ToolmakerSteve's alternative QuickStart Tutorial for Expression Web
Last updated: January 1, 2007.
The existing Quickstart guide uses layers to build your first web page. I consider this a poor approach. A layer is a <div> with its absolute position and dimensions set to explicit values. Too much time setting numeric values and/or dragging layers into exactly the right positions. Extra effort later when you want to change your layout. There is a better way: plain old <div>s (that are not layers) (plus an occasional table).
Here is a brief description of how to modify "Quickstart Guide.doc", part of "Download Lesson Files" at:
Microsoft Expression: Quick Start Guides
Follow the instructions up to just before the following quote, then start following my alternate directions. [which are INCOMPLETE]
Layers are a popular choice among designers because they provide such precise layout control, but you should know that this is only one of many ways to create designs using CSS in Expression Web.
- To add a layer to a page, click to select the Layer icon in the Toolbox ...
To quickly create a flexible layout, learn to "stack" and "nest" divs. Think of your page as a large "box" containing other "boxes".
1. First create a <div> to hold the page as a whole. To add this <div> to an empty page, double-click on the <div> icon in the "HTML" / "Tags" section of the Toolbox.
One disadvantage of using a <div> instead of a Layer, is that an empty <div> is hard to find or select in Design view. Type something into this <div>, such as "Hello". [Note: View / Visual Aids / Empty Containers can help. This tutorial was written before I knew this.]
To identify this <div> for later CSS styling, do Format / Tag Properties to open the "Tag Properties" pane. Click on white area right of property "id". Type "container" (without the quotes). To see the result, in Design window click inside the box labeled "div". It should now be labeled "div#container". Also look near the top of the screen. There is a trail of "breadcrumbs" starting with <body>. The next breadcrumb should now be highlighted orange showing it is selected, and should be "<div#container>". step1
2. To help show what area is inside <div#container>, let's give it a background color. do Format / New Style [or find "Apply Styles" pane and click on the "New Style..." link]. Delete what is in the "Selector" field. Be sure to delete the initial ".". Type "#container". For Category, select "Background". Over to the right, click on the down-arrow next to "background-color". Choose some color, such as yellow. OK to close dialog. Now there is a yellow band across the page, behind the "Hello" text. step2
3. Next "stack" some <div>s inside <div#container>, top-to-bottom down the page. These <div>s will each hold a main region of the page. Lets start with two regions, a banner plus a main content area. We will place these divs before the "Hello" (which is just there to help us find and select <div#container>).
Click just to the left of the "H" of "Hello" before inserting the next <div>. For the banner, double-click <div> in Toolbox. Now type something inside the <div> so that we don't lose track of it, for example "top stuff".
Now give this div an id, as we did for <div#container>. "Tag Properties" / id, type "banner".
And give it a background color, perhaps a dark blue. New Style dialog, Selector: "#banner", Category: Background / background-color, click on desired color. OK. Hmm, the black text on dark blue is hard to read. Let's modify the style we created. In Apply Styles pane, in section "Current Page", on "#banner", right-click (or mouse over and click the down arrow) and select "Modify Style". Notice Selector is "#banner". Category "Font", choice "color", pick a light color, such as aqua (the light blue square). step3a
On the page below the banner will be our navigation area. As for banner, click to left of "H". Double-click Toolbox <div>. Type some dummy text "menu". (If you are in the right place, this text will be black on a yellow background. And will be on its own line above "Hello".) Tag Properties / id: "navigation". New Style "#navigation", Background / background-color, dark-green. Also Font / color, light-green. step3b
The next stacked box, below the navigation, will be our main content area. Do similar steps to give it dummy text "Main content of page", an id "content", and style it with a light gray background. step3c
Save a copy of this file as a starting point for future files. You may want to color it more pleasingly :)
4.a. Now lets put in some of the sample content from the Quickstart. Click inside the dummy text "top stuff". Observe that the label above it now says "<div#banner>", which is also orange-highlighted in the "breadcrumbs" at top of screen. We want to eliminate that dummy text and put in our real contents. Drag-select over "top stuff" so that it is selected. Click Toolbox icon "Image" (or similar icon in toolbar). Browse to "seals-top.jpg". OK. In Accessibility Properties dialog, enter alternate text "creatures of the water, with photo of a frog". step4a
Preview in browser. If you have a large monitor, you will see the dark blue background color of the banner area extending to the right of the picture. Now you have a design decision to make: will this be a "flexible" page, which expands to any browser window size? Or will you fix the page size to match the banner image?
4.b. If we do not specify a width for <div#container>, then we will have a "flexible" page. In this case, we want to center the picture in the banner area, and change the background color to match the photo. Modify Style "#banner", Block / text-align: center. step4b
4.c. If we do specify a width, then we will have a "fixed width" page. (NOTE: Don't do "4.b" above) In this case, we want to center the whole page within the window: Modify Style "#container", Box / margin (top: 0, right: auto, bottom: 0, left: auto). Position / width: 800 px. step4c
[Navigation - TBD]
[Main Content - columns - TBD]
Footer. The yellow band at the bottom of #container can be used as a footer area [centering TBD], or it can be deleted (select the dummy text "Hello", Delete).