Creating Navigation from Styled Unordered Lists

The current trend in Web design is to create global navigation using unordered (also known as "bulleted") lists. You can then style these unordered lists to resemble buttons. Below are instructions for creating a simple version of such a list. I've adapted these instructions for Dreamweaver from the vertical list found at http://css.maxdesign.com.au/listamatic/vertical08.htm.

To set up the unordered list

  1. Click inside the div you've created to contain the navigation section. For the purposes of these instructions, the division is called nav.
  2. On the Text menu, point to List, and then click Unordered List.
  3. Type Home after the first bullet, and then press ENTER.
  4. Type a name for another page you want to include in your navigation, and then press ENTER.
  5. Repeat step 4 until you complete your navigation.

To link items in the unordered list

  1. In the unordered list you just created, select the word Home.
  2. In the Properties panel, in the Link box type #, and then press ENTER to set the link.
  3. Select the next item in the unordered list.
  4. In the Properties panel, in the Link box type #, and then press ENTER to set the link.
  5. Repeat steps 3 and 4 until all entries in the unordered list are linked.

Note: The hash mark (#) is only a placeholder. You'll need to replace the hash mark with an actual link later.

To style the unordered list

  1. Open the CSS panel, and then click the All button.
  2. Make sure you have the screen style sheet selected in the list, and identify the name you've used as the ID for your navigation div. These instructions assume the ID is nav.
  3. Click the New CSS Rule New CSS Rule button button.
  4. For the Selector Type, click Advanced.
  5. In the Selector box, type #nav ul.
  6. Make sure Define in is set to the external style sheet, and then click OK.
  7. In the Category list, click Box.
  8. Under both Padding and Margin, clear the Same for all check boxes.
  9. Under Padding, in the Left box, type 0.
  10. Under Margin, in the Left box, type 0.
  11. In the Category list, click List.
  12. In the Type list, click none.
  13. Click OK.

To style the links within the unordered list

  1. In the CSS panel, click the New CSS Rule New CSS Rule button button.
  2. For the Selector Type, click Advanced.
  3. In the Selector box, type #nav a.
  4. Make sure Define in is set to the external style sheet, and then click OK.
  5. In the Category list, click Background.
  6. In the Background color box, type or select an appropriate color code (for example, #003366).
  7. In the Category list, click Block.
  8. In the Display list, click block.
  9. In the Category list, click Box.
  10. In the Width box, type a size for each navigation "button." Try 120px as a starting point.
  11. Under Padding, in the Top box, type 3px. The value 3px will automatically appear in all the other boxes under Padding.
  12. In the Category list, click Border.
  13. Under Style, Width, and Color, clear the Same for all check boxes.
  14. Under Style, in the Bottom list, click Solid.
  15. Under Width, in the Bottom box, type 1px.
  16. Under Color, in the Bottom box, type or select an appropriate color code (for example, #eeeeee).
  17. Click OK.

To style the active and visited link text

  1. In the CSS panel, click the New CSS Rule New CSS Rule button button.
  2. For the Selector Type, click Advanced.
  3. In the Selector box, type #nav a:link, #nav a:visited.
  4. Make sure Define in is set to the external style sheet, and then click OK.
  5. In the Category list, click Type.
  6. In the Color box, type or select an appropriate color for the "button" text (for example, #eeeeee).
  7. Under Decoration, select the none check box.
  8. Click OK.

To create a hover style

  1. In the CSS panel, click the New CSS Rule New CSS Rule button button.
  2. For the Selector Type, click Advanced.
  3. In the Selector box, type #nav a:hover.
  4. Make sure Define in is set to the external style sheet, and then click OK.
  5. In the Category list, click Type.
  6. In the Color box, type or select an appropriate color code for the hover "button" text (for example, #ffffff).
  7. In the Category list, click Background.
  8. In the Background color box, type or select an appropriate color code for the hover "button" (for example, #336699).
  9. Click OK.