Create a new rule for the navigation

1. Open the cafe_townsend.css file if it isn't already open, or click on its tab to see it.
2. Define a new rule by typing the following code in the file, after the .bold class style:

   .navigation {
   }
   

   This is an empty rule.

   The code in the file should look something like the following example:

   
   
   

3. Save the cafe_townsend.css file.

   Next you'll use the CSS Styles panel to add properties to the rule.

4. Open the index.html file if it isn't already open.
5. In the CSS Styles panel, make sure All mode is selected, select the new .navigation rule and click Edit Style in the lower-right corner of the panel.

   
   
   

6. In the CSS Rule Definition dialog box, do the following:
   • Enter Verdana, sans-serif in the Font text box.
   • Select 16 from the Size pop-up menu, and select pixels from the pop-up menu immediately to the right of the Size pop-up menu.
   • Select Normal from the Style pop-up menu.
   • Select None from the Decoration list.
   • Select Bold from the Weight pop-up menu.
   • Enter #FFFFFF in the Color text box

   
   
   

   TIP

   For more information about any CSS property, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel.

7. Click OK.

   Now you'll use the CSS Styles panel to add a few more properties to the .navigation rule.

8. In the CSS Styles panel, make sure the .navigation rule is selected and click Show List View.

   
   
   

   List view reorganizes the Properties pane to display an alphabetical list of all available properties (in contrast to Set Properties view, the previous view, which shows only those properties you've already set).

9. Click in the column to the right of the background-color property.

   To see the full wording of a property, hold the mouse over the property.

10. Enter #993300 as the hexadecimal value and press Enter (Windows) or Return (Macintosh).

    
    
    

    TIP

    To see how your work affects the external style sheet, keep the cafe_townsend.css file open in the Document window while you work. When you make a selection in the CSS Styles panel, you'll see that Dreamweaver writes the CSS code in the style sheet at the same time.

11. Locate the display property (you might need to scroll down), click once in the column to the right, and select block from the pop-up menu.

    
    
    

12. Locate the padding property, click once in the column to the right, enter 8px as the value, and press Enter (Windows) or Return (Macintosh).
13. Locate the width property, click once in the column to the right, enter 140 in the first text box, select pixels from the pop-up menu, and press Enter (Windows) or Return (Macintosh).
14. Click Show Set Properties so that only your set properties appear in the Properties pane.

    
    
    

15. Click on the cafe_townsend.css file to display it. You'll see that Dreamweaver has added all of the properties you specified to the file.
16. Save the cafe_townsend.css file and close it.

You've now created a rule to format the navigation bar text. Next you'll apply the rule to the selected links.

Comments

Add Comment

No screen name said on Jan 1, 2006 at 1:18 PM :

When I opened the cafe_townsend.css, it didnot includedthe new .bold rule

chucknado said on Jan 2, 2006 at 4:01 PM :

Make sure you complete the task described in the section called "Create a new CSS rule" (http://livedocs.macromedia.com/dreamweaver/8/using/gs_06_c8.htm). You define the .bold rule there.

Joe Pau said on Jun 20, 2006 at 3:34 PM :

DW will not allow me to enter 140, only 2 digits. Is there an error on the tutorial? Thanks

jonmichael said on Jun 22, 2006 at 2:48 PM :

DW does allow you to add the 140, it just looks like it's limited because it only displays two characters at a time. Type the whole thing and press return. You should see the correct text appear in the panel.

msdelearner said on Apr 21, 2007 at 7:24 PM :

At point #5, my screen does not look the same. Nothing appears under "Properties for '.navigation' " except "Add property."

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/dreamweaver/8/using/gs_06_11.htm

Add Comment