How to Use the Open Browser Window Behavior in Dreamweaver
How to Create Styles with Class and ID Selectors in Dreamweaver
How to Create Swaps with Multiple Images in Dreamweaver

How to Create a Navigation Bar from an Unordered List of Links in Dreamweaver

Here's a great CSS trick for turning a bulleted list into a navigation bar in Dreamweaver with a simple rollover effect. Using a bulleted list for navigation bars is a well-accepted convention for websites that meet current accessibility standards.

[Credit: Photos by istockphoto.com]
Credit: Photos by istockphoto.com

The same links are still contained in the unordered list, but the application of the styles changes their appearance dramatically.

[Credit: Photos by istockphoto.com]
Credit: Photos by istockphoto.com

To create a navigation bar using CSS to redefine the unordered list and link tags, follow these steps:

  1. Click to place your cursor where you want to create your navigation bar in the page.

  2. Enter the text you want to serve as the links, separating each by pressing the Return or Enter key to create a paragraph return.

    To format the links as an unordered list, separate each line of text that you want to link with a <p> tag.

  3. Create links by selecting each piece of text in turn, clicking the Hyperlink icon in the Common Insert panel, and then selecting the page you want to link to or entering a URL.

  4. Drag to select the entire set of links, and then click the Unordered List icon in the Property inspector.

    A bullet point appears at the beginning of each link. If any link isn’t set off with a separate bullet, click to delete the space between it and the link before it, and then press Return or Enter to separate the links with a paragraph return.

    image2.jpg
  5. To add a <div> tag around a list of links (or any other content that is already on a page), select the content and then click the Div icon in the Common Insert panel.

    The Insert Div dialog box opens.

    Adding a <div> tag around the unordered list of links is helpful if you want to add formatting.

  6. Choose Wrap Around Selection from the Insert drop-down list.

    For more precise control over where you add a new <div> tag, you can choose options from the Insert drop-down list at the top of the Insert Div dialog box.

    image3.jpg
  7. Enter a name in the Class field or the ID field.

    A <div> tag with the class or ID name you entered is added automatically to the page surrounding the list of links.

  8. At the bottom of the Insert Div dialog box, click the New CSS Rule button.

    The new CSS rule name is added to the list of style names in the CSS Designer Selectors panel.

  9. In the Properties panel, specify your desired settings for color, background, size, margins, and padding.

    The style formatting is automatically applied to the content of the <div> tag because you applied the style as you created it in Steps 5–7.

  10. To create a compound style that will format the unordered list only when it is used in the navigation bar, create a compound style that includes the class name .navbar:

    1. Place your cursor anywhere in the bulleted list.

    2. Click the plus sign (+) at the top of the Selectors panel.

    3. In the Selector Name field, make sure that Dreamweaver automatically entered .navbar ul as the name of a new style in the Selectors panel.

    4. In the Properties panel, set the margins and padding to 0.

  11. Create a compound style to redefine the list item tags:

    1. Place your cursor anywhere in the bulleted list.

    2. Click the plus sign at the top of the Selectors panel.

    3. In the Selector Name field, make sure that Dreamweaver automatically entered .navbar ul li as the name of a new style in the Selectors panel.

    4. In the Properties panel, set the Display to Inline.

    5. Change the List Style Type to None to remove the bullet.

    6. Set the left and right margins to 20 pixels.

      This step separates the list items from one another in the horizontal list. You can change the setting to create the amount of space between links that best fits your design.

  12. Create a style to redefine the link tag:

    1. Click to place your cursor within a link in the navbar.

    2. Click the plus sign at the top of the Selectors panel.

    3. If you want to change the style name, double-click the name in the Selectors panel and enter the name you want to use.

    4. In the Text section of the Properties panel, set Text-Decoration to None.

    5. Still in the Text section, choose a color from the color well to specify the color of links when they’re loaded on a page.

  13. Create a new style to redefine the hover-link tag so that the link color will change when a user rolls a cursor over the link:

    1. Click the plus sign at the top of the Selectors panel.

    2. In the Selector Name field, enter .navbar a:hover.

    3. In the Text section of the Properties panel, set Text-Decoration to None.

    4. Still in the Text section, choose a color from the color well to specify the link's color when users roll their cursor over the link.

  14. Create a new style to redefine the visited link tag so the link color changes after a user clicks a link:

    1. Click the plus sign at the top of the Selectors panel.

    2. In the Selector Name field, enter .navbar a:visited.

    3. In the Text section of the Properties panel, set Text-Decoration to None.

    4. Still in the Text section, choose a color from the color well to specify the link's color after it’s been visited.

  15. Click the Live button at the top of the workspace or click the Preview button to view the page in a browser to see the effect of the link styles.

    image4.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Define Styles with the Tag Selector in Dreamweaver
How to Create Internal and External Style Sheets in Dreamweaver
How to Link Pages within Your Website in Dreamweaver
How to Create a Page from a Dreamweaver Template
How to Open an Image in Photoshop or Fireworks from Dreamweaver
Advertisement

Inside Dummies.com