Section 13.4. Adding a Background Color to the Nav Area

13.4. Adding a Background Color to the Nav Area

Your nav bar probably doesn't take up the entire space that you allotted for it in your layout. Why not cover up that empty space by coloring in the background of the navigation area? There are two ways of going about it:

HTML attributes

Use this method if your layout is tables-based, you don't already have a style rule for the navigation area, and you want to take a basically harmless shortcut.

HOTKEY

Press Shift-F4 to toggle the Behaviors panel.

CSS attributes

Use this method if you have a layers-based layout or if you want to keep all the color information of your tables-based layout in the external stylesheet. This is the recommended method, but it takes a little more time (unless you already have a style rule for your navigation area).

This section goes through both methods. Compare, choose a favorite, and color away.

13.4.1. Coloring the Nav Area with HTML Attributes

Applying a background color to a table cell using HTML attributes is faster than by way of CSS, although you begin to blur the distinction between content and style that you've worked so hard to maintain. By this method, the color information appears inside the HTML code of the template, not the style rules of the external CSS document. Therefore, if you ever decide to change the color of the nav area, you can't just edit the CSS file, where the color information for everything else resides. You have to get back into the template file to make this one, quirky change. That said, a template-based site in Dreamweaver makes it extremely easy to manage these kinds of edits, so, at the end of the day, it's not that big a deal. Technical purists will want to use CSS, but those who care more about faster results may proceed with these steps:

1. Open the template document.

2. Click anywhere in the navigation area.

3. Go to the Tag Selector at the bottom of the document window, and click the <td> tag.

4. Go to the Property Inspector, and click the Bg color box. A menu of color swatches appears. Click any of these, or move the mouse pointer anywhere on the screen, and click to sample a color.

Dreamweaver applies this color to the background of the table cell, as Figure 13-25 shows. Choose File Save from the main menu to update the pages of your site.

Figure 13-25. Add a background color to the navigation area of the layout template

13.4.2. Coloring the Nav Area with CSS Attributes

Keeping the colors with the rest of your styles makes good sense from a technical point of view. If you opt for CSS attributes, here's what you do:

1. Open the template document.

2. Click anywhere inside the navigation area.

3. Go to the Tag Selector at the bottom of the document window, and click the <td> or <div> tag.

4. Go to the CSS Styles panel, and click the New CSS Rule buttonthat's the one with the page icon. The New CSS Rule dialog box opens.

5. Under Selector Type, choose Advanced.

6. In the Selector field, type td or div, a period (.), and then a brief but descriptive name for the style. A name like td.nav or div.nav is perfect.

   TIP

   If you already have a style rule for the nav area, simply conjure up the CSS Rule Definition dialog box and add a background color to the existing definition.

   
   

7. Click OK to proceed to the CSS Rule Definition dialog box. Then, select the Background category.

8. Click the color box to the right of the Background Color field. The mouse pointer becomes an eyedropper.

9. Move the eyedropper onto the nav bar in the document window, and click anywhere on the background of a button image to sample the background color.

10. Click OK. Dreamweaver adds the style rule to your external stylesheet. Switch to its document window, and choose File Save.

11. Choose File Save from the main menu, and update the pages of your site.