Create a new rule for the navigation

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:

    This is a picture of the feature being described.

  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.

    This is a picture of the feature being described.

  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

      This is a picture of the feature being described.

  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.

    This is a picture of the feature being described.

    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).

    This is a picture of the feature being described.

  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.

    This is a picture of the feature being described.

  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.

    This is a picture of the feature being described.

  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.



Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly
 
ASPTreeView.com
 
Evaluation has ЪЧЛУВВМexpired.
Info...