Web Standards in Dreamweaver Part 3 - Create the Navigation

Follow these steps to create the navigation.

1. Create a new CSS class; this time select the Advanced (IDs, contextual selectors, etc) radio button, and type #nav in the Selector text box, as shown in Figure 2-37.

Figure 2-37. Creating an advanced CSS class

2. Click OK. Then select the Positioning category and set the following properties:

• Type: absolute

• Width: 200 pixels

• Top: 140 pixels

• Left: 4 pixels

3. Click OK. Click the Insert Div Tag icon once again, and in the ID drop-down list, click nav. In the Insert drop-down list, select After start of tag, and choose <div id="banner">, as shown in Figure 2-38, to ensure that this <div> tag is created outside the banner and is not nested inside it.

Figure 2-38. The Insert Div Tag Dialog Box

4. Click OK. The <div> tag will appear underneath the banner on the left, as shown in Figure 2-39.

Figure 2-39. The <div> tag Design view.

CSS Navigation Buttons

One way to trim down file sizes and improve the accessibility of your document is to use CSS for navigation that would have previously required images. You will use CSS in this way to create your navigation. Your navigation is simply a list of places where the user can go, and as such, using a list to markup the content is a good choice.

1. In the <div#nav> tag, create a list, and make each item a link, as shown in Figure 2-40.

Figure 2-40. Design view showing a list.

2. First you will style the list itself. Create a new CSS style, choose Advanced, and in the Selector box, type #nav ul, as shown in Figure 2-41.

Using the selector #nav ul means that you are creating styles for all <ul> tags within the div #nav. Any <ul> tags within that division will be styled in this way, but those not inside this area of the page will retain their default formatting.

Figure 2-41. Creating styles for all <ul> tags

3. Go to the Box category of the CSS Style Definition dialog box and set Margin Left to 0 pixels and Padding Left to 0 pixels. Click OK and then create a new CSS Style that styles any list item that is inside the #nav.

4. Go to the List category of the CSS Style Definition dialog box and under Type, select the none check box to remove the bullet from the start of each list item. Next, in the Box category, set padding to 3 pixels and select the Same for all check box. Set the bottom margin to 4 pixels and clear the Same for all check box. To add a border to each item, use the Border category, as shown in Figure 2-42.

Figure 2-42. Setting border properties

5. You now need to style the anchor tag—the navigation link itself. Create a new CSS class, select the Advanced radio button, and type #nav a:link. Using the Type category, style the text of the link and set the color. You can also set the navigation link to have no underline by selecting the none check box, as shown in Figure 2-43.

Figure 2-43. Setting text properties

6. After setting up #nav a:link, repeat this process for #nav a:visited, #nav a:hover, and #nav a:active. If you want your navigation to be highlighted when the user holds his or her mouse pointer over the link, set a different color for the #nav a:hover state.

TIP When setting different properties for the hover state, take care not to change the size of the text. If you do, you will end up with a jiggling effect as the page elements are shifted around by the change in size of the link.

This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today. Buy this book now.

Next: The Content Area >>
 

More Web Standards Articles
More By Apress Publishing

Comments On: Web Standards in Dreamweaver Part 3

>>> Be the FIRST to comment on this article!