Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 3: Layout and CSS

Note: This tutorial was written for Dreamweaver CS3. Although Dreamweaver CS4 adds new CSS functionality (revised Property inspector, Code inspector, related files), the CSS panel in Dreamweaver CS4 has not changed, and you should still be able to follow this tutorial using Dreamweaver CS4.

This three-part tutorial shows how to use Fireworks and Dreamweaver to design and build a fictitious blog named Blimey. Part 1 showed you how to prepare images in a Fireworks comp for the structural markup of the layout. In Part 2, you coded the markup that provides the hooks for the cascading style sheet.

This part of the tutorial shows you how to complete the layout and create the style sheet.

There are several ways to create an external style sheet in Dreamweaver. In this tutorial, you will use the Plus (+) button on the CSS Styles panel:

1. If the CSS Styles panel is not open, choose Window > CSS Styles to display it.
2. Click the Plus (+) button to open the New CSS Rule dialog box (see Figure 1).
3. Select Advanced as the selector type, so you can use group selectors.
4. Type the group selector body, h1, h2, h3, h4, p, ul, li in the Selector field. (Separate each selector by a comma and a space.)
5. Make sure the Define In option is set to New Style Sheet File. One of the two Spry style sheets is selected by default, so you'll need to use the popup menu to access New Style Sheet File.

6. Click OK.
7. A navigation dialog box opens. Browse for the Blimey site you developed in Part 2 of this tutorial, or use the starter files in the support_files folder for this tutorial.
8. Name the new style sheet blimey.css.
9. Click OK. The CSS Rule Definition dialog box opens (see Figure 2).
10. Select Box from the Category list.
11. Leave the Same For All option selected for both Padding and Margin, and type 0 for both.
12. Click OK.

This procedure writes the first rule to an external style sheet and attaches it to the current page.

This rule may strike you as odd. If you are new to CSS layouts, you may not know that before you apply a single rule to your page, there is already a browser style sheet that affects its display. Many elements have default values; such as those you added to the group selector. These values vary from browser to browser and thus lead to differences in the layout when you add your own values. By zeroing out these elements, you give your layout a consistent starting place for the values in your own style sheet. Many developers reset many more elements, and sometimes include other properties such as borders set to none. To learn more about browser style sheets and how to reset them, you can read the following articles by Eric Meyer:

• Reset Styles
• Rethinking CSS Reset

Note: If you need to edit a rule after you have closed its dialog box, simply select it and click the Edit Style button (the pencil icon) at the bottom of the CSS Styles panel. You can also edit properties and values directly in the Properties section of the CSS Styles panel.

The next rule you will write is for the body element:

1. Click the Plus (+) button to open the New CSS Rule dialog box (see Figure 3).
2. Select Tag as the selector type.
3. Type body in the Tag field.
4. Make sure the Define In option is set to blimey.css. (From now on, assume that all rules are defined in this external style sheet.)
5. Click OK.

6. Select Type from the Category list in the CSS Rule Definition dialog box (see Figure 4).
7. In the Font pop-up menu, select a sans-serif list such as one that begins with Arial or Verdana.
8. In the Color field, click the color picker and set the color to #333333 (dark gray).
9. In the size field, type 100 and choose % as the unit of measurement.
10. Click OK.

Note: The settings in Figure 4 instruct the browser to display the text at 100% of whatever the user has set in the browser preferences. For example, someone with impaired vision may have changed the browser preferences from the default font size of 16 pixels to 18 pixels or higher. In later exercises, you will scale other text such as h1 and p from that user setting. By setting the body to 100% of the user's browser font size, all future font sizes will scale from that starting point. For example, if you later set the paragraph font size to 85%, it will be 85% of the user's font preference, whether that is 12, 14, 16, 18, or more pixels.

Before you style any of the div elements, or divs, in the various modules, you will style the container div that will be common to all of them. Because you will reuse the container four times, use the class selector type.

The width of the container is constrained to 770 pixels, and it is placed inside a div such as header whose background color band spans the entire width of the browser window.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Class as the selector type.
3. Name the selector .container and click OK.
4. Select Box from the Category list in the CSS Rule Definition dialog box.
5. Type 770 in the Width field and choose pixels as the unit of measurement.
6. Deselect the Same For All option under Margin.
7. Type 0 for top and bottom margin.
8. Select auto from the pop-up menus for the right and left margins and click OK.

The auto margins center the layout in modern browsers. Internet Explorer 5 does not understand this value. If you need to support that browser, you can learn how to center layouts for it in Do You Want To Do That With CSS? — Centering a Wrapper by John Gallant and Holly Bergevin. Alternatively, you may decide that there are not enough visitors who still use this very old browser to bother with coding for it. Those visitors will still see the content, although it will be on the left side of the browser window rather than centered.

The next rules you will tackle are those for the header div, which includes the background image, the navigation list, and the search form.

Adding the header div rules

The first step is to add the background rules that give the header its band that stretches across the entire browser window:

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #header and click OK.
4. Select Type from the Category list in the CSS Rule Definition dialog box (see Figure 6).
5. Select white as the Color.
6. Select Background from the Category list in the CSS Rule Definition dialog box.
7. Click Browse and navigate to the header_bg.jpg image in the Blimey images folder.
8. Select repeat-x from the Repeat pop-up menu.
9. Set the Background color to #131313.

10. Select Box from the Category list (see Figure 7).
11. In the Width field, type 100%. Why declare the default width explicitly? In the next step you will be floating the header, and floats work best with an explicit width so that they don't shrink to the width of the content within them.
12. From the Float pop-up menu, select Left.
13. Deselect Same for all under Padding.
14. Type 15 pixels for top and bottom.
15. Type 0 for right and left.
16. Click OK.

Figure 8 shows what the header looks like at this point.

Note that the container within the header constrains the content to a fixed region

Adding the header navigation and search rules

Within the header, you are going to write rules to float the navigation list to the left and the search form to the right. To learn more about placing content on opposite sides of a div, refer to Do You Want To Do That With CSS? — Align Elements Left and Right by John Gallant and Holly Bergevin.

The next step is to style the links in the unordered list. To make sure only links within the header div display as horizontal buttons, you need to use descendent selectors. Styles applied to HTML elements such as the ul are global in scope. That is, they apply to every instance of that element on the entire page. To make an HTML element more specific, you can style it within the context of a particular page area such as the header. Thus, a style for #header ul applies only to unordered lists in the header div of the page.

In the steps below, note also of the list-style type. This type removes the bullets from the list so the links look more like buttons.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #header ul and click OK.
4. Select Box from the Category list.
5. Select Left from the Float menu.
6. Keep the Same For All option under Padding.
7. Type 2 pixels.
8. Select the List category.
9. Select None from the Type menu.
10. Click OK.

Styling the list items

The next rule changes the list items from block elements that each appear on a separate line to inline elements that flow side by side. Use the Block category in the CSS Rule Definition dialog box to access the display property:

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #header li and click OK.
4. Select the Block category.
5. From the Display menu, select inline.
6. Select Box from the Category list (see Figure 9).
7. Deselect Same for all for the Margin.
8. Type 0.25 for Right.
9. Set the Unit of measurement to ems.
10. Deselect Same For All under Padding.
11. Type 0.5 em for Bottom.
12. Click OK.

Styling the navigation links

To complete the header div, you need to finish the visual formatting of the link states, which are also known as pseudo selectors. Use group selectors to format two link states at the same time, and write descendent selectors to ensure that only links in the header div look this way:

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #header a and click OK.
4. Select the Type category.
5. For Size, type 70 and select % (percent) as the unit of measurement.
6. For Color, select dark gray: #333333.
7. Under Decoration, select None.
8. Select the Background category.
9. Select white in the color picker next to the Background-color field.
10. Select the Box category.
11. Deselect Same for all for the Padding.
12. Type 2 pixels for Top and Bottom.
13. Type 15 pixels for Right and Left.
14. Select the Border category.
15. Leave Same for all selected.
16. Select Solid for Style.
17. Type 1 pixel for width.
18. Type #B5B5B5 for color.
19. Click OK.

Styling the hover and focus states of the links

To style the states of the links, follow these steps:

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #header a:focus, #header a:hover and click OK.
4. Select the Type category.
5. For Color type #B52620, which is the burnt red of the Blimey girl's hair bands.
6. Click OK.

Do not assign widths to the floats.

Styling the search form

The next steps float the search form on the opposite side of the header container and set the search icon image as a background that displays on the left side. The 25 pixels of padding carve out a space for the image.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #search and click OK.
4. Select the Background category.
5. Click the Browse button next to the Background image field.
6. Navigate to search_icon.jpg in the Blimey images folder.
7. Set its Repeat option to no-repeat.
8. Set its horizontal position to left.
9. Set its vertical position to center.
10. Select the Block category.
11. Set Text-align to right.
12. Select the Box category.
13. Select Right from the Float menu.
14. Deselect Same For All under Padding.
15. Type 25 for Left.
16. Select pixels as the unit of measurement.
17. Under Margin type 0 (Same for all).
18. Click OK.

Styling the search label

The next rule, which is another descendent selector, positions the label text off-screen by using absolute positioning to take the element out of the normal document flow. Setting its top coordinate to –10000 moves it off the display area of browser windows.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #search label and click OK.
4. Select the Positioning category (see Figure 11).
5. From the Type menu, select absolute.
6. Under Placement type -10000 (a negative value) in the Top field.
7. Click OK.

The completed header should look like the image shown in Figure 12.

The second module, or mini-layout, includes the masthead logo, as well as a background gradient that spans the entire width of the window.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #masthead and click OK.
4. Select the Background category.
5. In the Background color field, type #F2F2F2.
6. Click the Browse button next to the Background image field.
7. Browse for masthead_bg.jpg in the Blimey images folder.
8. Set its Repeat option to repeat-x.
9. Keep Same for all for the Margin.
10. Type 0.
11. In the Clear menu, select Both.
12. Click OK.

Image replacement, the p span

The rule for positioning the logo replacement text off-screen uses the same technique as the rule used to position the search label text off-screen.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #masthead p span and click OK.
4. Select the Positioning category.
5. From the Type menu, select absolute.
6. Under Placement type -10000 (a negative value) in the Top field.
7. Click OK.

Formatting the columns in the content and footer modules

This is where things get tricky. Many developers like to carve a large left or right margin for a content area and then float a sidebar in the empty space. One problem with this approach is that you can run up against something called the block formatting context.

Block formatting context

You may think of divs as self-contained entities that interact with other areas of the page in completely controlled ways. However, the block formatting context can surprise you. A div by itself is not necessarily an independent object. If you have ever floated an image in the content area of a page and then added a clearing div under it, only to see the floated sidebar area get cleared as well, you know that divs are not always independent.

Figure 15 shows a left-floated image in the content area of the page. The second heading on the page is riding up into the image area. Most designers will add a clearing property to push it down under the image.

When you add a clearing property to a layout that has a floated sidebar, the clearing property for the image also clears the floated sidebar, as shown in Figure 16.

Because using floats is one way to establish a new block formatting context, styling all columns and their wrappers as floats is a great way to structure independent page areas. This technique works particularly well in a fixed-width layout like this one.

Note: Another benefit of using all floats for columns is that it prevents what's referred to as the Internet Explorer 6 three-pixel text-jog bug.

You can use the all-float technique described in the previous section to manipulate the divs in the page content module.

The content-wrapper div

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #content-wrapper and click OK.
4. Select the Box category (see Figure 17).
5. In the Width field, type 770 (px).
6. From the Float menu, select Left.
7. Deselect Same for all for the Margin.
8. Type 20 (pixels) for Bottom.

9. Select the Border category.
10. Select solid for Style.
11. Type 1 (pixel) for Width.
12. Type #B5B5B5 for Color.
13. Click OK.

The secondary-content div

Use the following steps to float the secondary content div to the left and give it a width of 250 pixels. The Accordion widget will automatically reduce in width as well. Its default behavior is to take up the entire width of its parent container.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #secondary-content and click OK.
4. Select the Box category (see Figure 18).
5. In the Width field, type 250 (pixels).
6. In the Float menu, select Left.
7. Click OK.

The main-content div

Next, create a rule to float the main-content div to the left and give it a width of 500 pixels. The div will have a left border to serve as a separator between the two columns. In order for this border to continue to the bottom of the content region, the main-content div must be longer. If you need to have short main-content pages, you will need to create a border image that you can place on the content-wrapper div that is the parent of both the secondary and main content divs. You may know this technique as faux columns.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #main-content and click OK.
4. Select the Box category (see Figure 20).
5. In the Width field, type 500 (pixels).
6. In the Float menu, select Left.
7. Deselect Same for all under Padding.
8. Type 20 (pixels) for Bottom.

9. Select the Border category.
10. Deselect Same for all.
11. Next to Left, select solid for Style.
12. Type 1 (pixel) for Width.
13. Type #B5B5B5 for Color.
14. Click OK.

The main-content h1

This rule styles the h1 element so that it has a decorative background image.

1. Switch to Split View.
2. In Code View, locate the opening #main-content div tag.
3. Position the cursor after this tag and press Enter.
4. Type The Blog of Blogs.
5. Place the cursor in front of this text.
6. Type <h1>.
7. Place your cursor after this text.
8. Type </h1> to close the h1 tag.

9. Return to Design view.
10. Click the Plus (+) button to create a new CSS rule.
11. Select Advanced as the selector type.
12. Name the selector #main-content h1 and click OK.
13. Select the Type category.
14. For Size, type 120 and select % (percent) as the unit of measurement.
15. For Color, select dark gray: #333333.
16. From the font-variant menu, select small-caps.
17. From the Weight menu, select normal.
18. Select the Background category (see Figure 22).
19. Next to the Background image field, click the Browse button.
20. Navigate to the heading_bg.png image in the Blimey images folder.
21. Set the Repeat option to no-repeat.

22. Select the Box category.
23. Under Padding deselect Same for all.
24. Set Left padding to 25 (pixels).
25. Under Margin deselect Same for all.
26. Set the left margin to 10 (pixels).
27. Set the top margin to 10 (pixels).
28. Click OK.

You are ready to tackle the final module, the footer. To reinforce the tutorial's lessons about floats, let's proceed in a slightly different way.

The footer div

The footer itself spans the entire width of the browser window. Note that you are not floating this parent div like you did the header div.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #footer and click OK.
4. Select the Type category.
5. In the Color field, select white: #FFFFFF.
6. Select the Background category.
7. In the Background-color field, type #191919.
8. Select the Box category.
9. From the Clear menu, select Both.

   Important: This property clears the floats in the content module. Without this property, the footer would display in odd ways.

10. Deselect Same for all under Padding.
11. For Top and Bottom type 20 (pixels).
12. For Right and Left, type 0.
13. Click OK.

The footer-wrapper div

The footer's border needs to go in a footer wrapper instead of with the columns so that the border continues no matter which column is longest. To give the illusion of equal height columns with borders that extend to the bottom, use the footer_bg.jpg image that you created in the Fireworks comp for this project.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector #footer-wrapper and click OK.
4. Select the Background category.
5. In the Background-color field, type #191919.
6. Click the Browse button next to the Background image field.
7. Navigate to footer_bg.png in the Blimey images folder.
8. Set its Repeat option to repeat-y.
9. Select the Box category.
10. In the Width field, type 770 (pixels).
11. In the Float menu, select Left.
12. Select the Border category.
13. Select solid for Style.
14. Type 1 (pixel) for Width.
15. Type #B5B5B5 for Color.
16. Click OK.

The result probably surprises you unless you remember that you need to use a float clearing method to contain the floated divs within the footer. In the next step, you will use the clearfloat method that is popular with many developers.

The clearfloat class

The clearfloat class rule of the layout is for the br elements you placed in the code before Module 4 and after the closing div for the footer-wrapper and before the closing div for the container. The trick here is to remove anything that causes the break to have dimension:

1. Click the Plus (+) button to create a new CSS rule.
2. Select Class as the selector type.
3. Name the selector .clearfloat (don't forget the period) and click OK.

This is the name you gave the class in the markup when you added the br clearing element.

1. Select Type from the Category list.
2. Set the font size to 1 pixel.
3. Set the Line height to 0.
4. Select Box from the Category list (see Figure 27).
5. Select Both from the Clear pop-up menu.
6. Set the height to 0 and click OK.

The column divs

To make the columns fit within the inner borders, create a rule that floats the three columns and gives them their width.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Class as the selector type.
3. Name the selector .column (don't forget the period) and click OK.
4. Select the Box category.
5. In the Width field, type 256 (pixels).
6. From the Float menu, select Left.

Note: In Dreamweaver, you will probably see a gray color behind the columns in Design view, although everything will display properly in the browser. Design view does not always render CSS styles perfectly. When in doubt, check the browser, and check as many of them as possible.

The column paragraph styles

This last descendent selector formats the look of paragraphs in the columns. Add a line-height in the Type category to introduce some leading—the space between lines of text. In this instance, it's better not to use a standard unit of measurement because doing so can cause unexpected bugs in the layout. Instead, select Multiple from the Line Height pop-up menu.

1. Click the Plus (+) button to create a new CSS rule.
2. Select Advanced as the selector type.
3. Name the selector .column p and click OK.
4. Select the Type category.
5. For Size, type 75 (%).
6. For Line height, type 1.4.
7. Select Multiple as the unit of measurement.
8. Select the Box category.
9. Keep Same for all under Padding.
10. Type 10 (pixels).

Adding a float class for the image

There is a detail to take care of in the Tab 1 content area: the Blimey girl image sitting at the baseline of the first paragraph of text. Because images are inline elements, they follow the default behavior of such elements to flow one after the other. The image is taller than any letter, so it makes a large space in its row. Adding a float to the image enables the text to wrap around it.

One reason to use a class for this task instead of an ID is that you might want to add other images to the content region. Classes can be used multiple times while IDs must be unique on the page:

1. Click the Plus (+) button to create a new CSS rule.
2. Select Class as the selector type.
3. Name the selector .leftimg (don't forget the period) and click OK.
4. Select Box from the Category list (see Figure 30).
5. Select Left from the Float pop-up menu.
6. Deselect the Same For All option under Margin.
7. Set the right margin to 8 pixels and click OK. Nothing has happened to the Blimey girl image yet because you must specifically apply the class to it.

8. Select the Blimey girl image.
9. In the Class pop-up menu of the Property inspector, select the leftimg class that now appears.

The text should now wrap around the image as shown in Figure 31.

In the heat of creation, you probably added rules in no particular order. This would be a good time to take a "cleansing breath" and bring a little order to the chaos. Dreamweaver CS3 lets you drag and drop rules right in the CSS panel. I like to order my styles according to their place in the source order. There are as many ordering preferences as there are developers, however.

As noted in Part 2 of this tutorial, Dreamweaver places dependent files that control the behavior of the Spry widgets in a SpryAssets folder. You can modify the appearance of the widgets by changing properties and values in their style sheets.

In the SpryAssets folder, locate the SpryAccordion.css file for the Accordion widget and open it. The file contains extensive comments that explain the purpose of each rule.

The steps part in this section use the Properties pane of the CSS panel extensively as a quick way to adjust existing properties or to add new ones.

1. Click the arrow next to the SpryAccordion.css file in the CSS Styles panel to expand it.
2. Click the first rule, .Accordion (see Figure 33).
3. Select the border-bottom property.
4. Click the Trashcan at the bottom of the panel to delete it.
5. Repeat these steps to delete border-left and border-right as well.

Do not change anything in the .AccordionPanel rule. Skip over that one and move on to the next one, .AccordionPanelTab.

1. Select .AccordionPanelTab.
2. In the Properties pane of the CSS Styles panel, change the background-color rule to #EEEEEE (see Figure 34).
3. Select the border-top property.
4. Click the Trashcan at the bottom of the panel to delete it.
5. Change the bottom border color value to #7F7F7F.

Do not make any changes to the next rule, .AccordionPanelContent; instead skip to the following rule: .AccordionPanelOpen .AccordionPanelTab.

1. Select .AccordionPanelOpen .AccordionPanelTab.
2. Click the Add Property link in the Properties pane of the CSS Styles Panel.
3. Type background-image (or select the property from the popup menu).
4. Click the folder next to the value field.
5. Navigate for acc_bg.jpg in the Blimey images folder.
6. Add another property.
7. Type background-repeat (or select it from the menu).
8. Select repeat-x from the dropdown menu.
9. Add another property.
10. Type border-bottom.
11. Type solid 3px #7F7F7F.

The next rule governs the hover color of the Accordion menu text.

1. Select the .AccordionPanelTabHover class at the top of the CSS Styles panel.
2. In the Properties pane, change the color from #555555 to #B52620.

   The next two steps apply to the following rules:

   • .AccordionFocused .AccordionPanelTab
   • .AccordionFocused .AccordionPanelOpen .AccordionPanelTab

3. Click the hexadecimal color text.
4. Change the background-color #33CCFF to #EEEEEE.

   Next you will add four new rules to the Accordion style sheet to style the list of links in each Accordion panel.

   Because these rules all start with the .AccordionPanelContent class, an easy way to begin creating them accurately is to click the rule name and copy it to the clipboard.

5. Click the Plus (+) button to create a new rule.
6. Paste the class name from the clipboard.
7. Type a space and then add ul.
8. Make sure the radio button is set to the Advanced selector type. Descendant selectors go into this Dreamweaver category.
9. Also make sure that the Defined in option is set to the SpryAccordion style sheet (see Figure 37) and Click OK.

10. Select the Box category.
11. Add 20 pixels of padding to the top and bottom.
12. Click OK.
13. Repeat Steps 1 through 5 to create a new rule for .AccordionPanelContent li.

14. Select the Background category.
15. Select the Type category.
16. Set Size to 95 % (percent).
17. Next to Background image, click the Browse button.
18. Navigate to list_bg.png in the Blimey images folder.
19. Set its Repeat option to no-repeat.
20. Next to horizontal position, select Left.
21. Next to vertical position, select Center.
22. Select the Box category (see Figure 39).
23. Deselect Same for all under Padding.
24. Set the padding to 0 top, 0 right, 5 pixels bottom, and 25 pixels left.

25. Select the List category.
26. Set Type to none.
27. Click OK.
28. Repeat Steps 1 through 5 to create a new rule named .AccordionPanelContent a.
29. Select the Type category.
30. Set the Color to #333333 (dark gray).
31. Set Decoration to none.
32. Click OK.
33. Repeat Steps 1 through 5 to create a new rule named .AccordionPanelContent a:hover.
34. Select the Type category.
35. Set the Color to #B52620.
36. Click OK.

Figure 40 shows the completed Accordion widget.

The Tabbed Panel widget requires fewer style changes because it does not involve navigation. The first two rules are fine as they are; so start with the .TabbedPanelsTab rule:

1. Select the .tabbedPanelsTab rule in the top part of the CSS Styles panel.
2. In the Properties panel, delete the border-bottom property and values.
3. Click the arrow to close SpryAccordion.css in the CSS Styles panel.
4. Click the arrow to open SpryTabbedPanels.css.
5. Select .TabbedPanelsTabHover.
6. In the Properties panel, click the Add Property link.
7. Type Color (or select it from the contextual list of properties).
8. Type the value #B52620.
9. Select the .TabbedPanelsTabSelected rule.
10. In the Properties panel, change background-color to white (#FFFFFF).
11. Change the border-bottom color value to #B5B5B5.
12. Click the Add Property link.
13. Type background-image (or select it from the contextual menu).
14. Click the folder and browse to tab_bg.jpg in the Blimey images folder.
15. Click the Add Property link.
16. Type background-repeat.
17. Select repeat-x from the pop-up menu.

18. Select the .TabbedPanelsContentGroup rule.
19. Change background-color to #FFFFFF.
20. Remove all borders except for the top border.
21. Change the top border color to #B5B5B5.

22. Select the .TabbedPanelsContentVisible rule.
23. Click the Plus (+) button at the bottom of the CSS Styles Panel to create a new rule.
24. Type .TabbedPanelsContentVisible p as the selector name.
25. Click the Advanced radio button for selector type.
26. Make the sure the new rule is defined in the SpryTabbedPanels.css file.

27. Click OK.
28. Select the Type category.
29. For Size type 85% (percent).
30. For Line height type 1.4.
31. Select Multiple as the unit of measurement.
32. Select the Box category.
33. Deselect Same for all under Padding.
34. Type 8 pixels in the field for Left.
35. Click OK.

Congratulations! The layout is now complete, and the client should be satisfied because you took a Fireworks comp and translated it quite precisely into code in Dreamweaver. There are still a few tasks, including checking for browser compatibility, that you might want to complete in the interest of thoroughness, however. Dreamweaver CS3 makes this easy with its new feature, the Check Browser Compatibility page check.

The goal for this layout is to keep hacks to a minimum. Indeed, if you were to do a page check, you would find that there are no serious issues.

1. Click the Check Page button on the right side of the Document toolbar.
2. Select Check Browser Compatibility. Dreamweaver will run a script on the page that looks at how you coded the CSS. It will identify known bugs and present them to you in the Results panel.

What the results panel does not show, however, is that there are a few discrepancies in the appearance of the page when it is viewed with Internet Explorer 5. If you need to support the various version 5 upgrades of Internet Explorer, you can tweak the page with a centering fix (as described earlier in this tutorial) and add a rule to address the fact that the header links don't display as buttons the way they do in more standards-compliant browsers.

If you decide that the Internet Explorer 5 audience is too small for you to worry about, leave this small, cosmetic issue alone. If you want the navigation to look identical in this older browser, however, you can add the following code to the head of the document after the link to the style sheet:

Conditional comments appear within HTML comments and include a conditional statement—or if statement—that looks for a particular version or range of versions of Internet Explorer. If the version is found, a custom rule is served to that browser. In this case, adding a dimension and vertical alignment to the navigation links fixes the spacing problem.

A full discussion about conditional comments is beyond the scope of this tutorial, but you can read more about them in the Conditional Comments posting on Peter-Paul Koch's QuirksMode blog. You can also read more about the list display problems in Internet Explorer in List Display Problems in Explorer for Windows – Part 1 on Community MX.

Where to go from here

Now you know how to think in terms of CSS at every step of the web page development process—from starting layout comps in Fireworks to completing the pages in Dreamweaver. If you encounter any problems with your CSS or markup while following this tutorial series, compare your code with the completed examples included in the tutorial sample files. You can also study the CSS comments after each property and value in the blimey.css sample document. CSS comments begin and end with a slash and asterisk combination (/* and */). Commenting is a best practice that helps team members understand the thinking of other members on the team. They can also help solo designers recall their own thought processes. For example, six months later a comment may help a designer remember the purpose of a particular property.

Another troubleshooting method is to make sure that the page validates for markup, CSS, and accessibility. Checking these critical factors using the free Firefox Web Developer Toolbar quickly reveals problems and gives you clues about how to fix them.

You can also validate your markup and validate your style sheet at the World Wide Web Consortium (W3C) website.

For more information about CSS, visit the CSS topic page in the Dreamweaver Developer Center.