Download (direct link):
Be sure to save your source file so that you can easily make alterations as needed. With your images created, you’re ready to move into Dreamweaver to create the list and encompassing <div> tag.
Step 2: Creating the list and containing <div>
Next, you create the basic HTML and text elements for the CSS navigation bar. Because one of the elements you need is an absolutely positioned <div> tag, you can set up your CSS file and enter the first of the CSS definitions.
Tip It's not absolutely necessary for you to create the CSS before you insert the tags, but because
* Dreamweaver renders each new style as it is applied, this approach gives you a better sense of what the CSS styles are doing.
To set up the CSS file with the first of the CSS definitions, follow these steps:
1. Create a new CSS file by choosing File Î New and then selecting CSS from the General category. I named my file navlist.css.
2. Open the HTML or dynamic page to which you want to add the navigation.
3. From the CSS Styles panel, select Attach Style Sheet; when the dialog opens, import your previously created style sheet. Click OK to close the dialog when you’re done. Next, you define the first of your CSS, which positions and gives the basic shape to the navigation bar.
4. From the CSS Styles panel, select New CSS Style.
576 Part III ¦ Advanced Design Tools and Techniques
5. In the New CSS Style dialog box, select Advanced and enter the ID for the element to contain the list navigation. I called mine #listnav. You’ll recall that the opening hash mark designates an ID selector in CSS.
6. Click OK to open the CSS Style Definition dialog and switch to the Position category.
7. Set these values in the Positioning category, as shown in Figure 15-8:
• Type: Absolute
• Width: 125 pixels
• Top: 50 pixels
• Left: 25 pixels
Figure 15-8: Determine where the navigation element is to appear by setting values in the Positioning category.
8. When you’re finished, click OK to close the CSS Style definition dialog. The next step combines two actions into one: inserting a <div> tag and assigning the CSS style you just created.
9. From the Layout category of the Insert bar, select Insert Div Tag.
10. In the dialog box, choose the just-defined CSS style from the ID list. When you click OK to close, your <div> is added to the page with some placeholder text. Now you’re ready to add your list items.
11. Delete the placeholder text in the <div> and, from the Property inspector, select Unordered List.
12. Enter the text for your button labels, one button per bullet. I’ve got four list items:
Chapter 15 ¦ CreatingLists 577
13. Be sure to avoid placing any unnecessary paragraph returns following the list. Only the list items you want to appear as buttons should be in the <div> tag.
14. Add a link to each list item by selecting the text and entering a filename in the Link field of the Property inspector. Alternatively, you can select the folder icon and then select a file from the Select File dialog.
At this point, you should have a plain bullet list of links in an absolutely positioned <div> tag on your page, as shown in Figure 15-9. Now you’re ready to start styling!
Step 3: Building the CSS styles
The definition of the CSS styles is at the heart of this technique. In all, six different styles are needed:
¦ #l istnav ul: Defines the font face and size for all the list items as well as removing the standard bullet and clearing the margin and padding.
¦ #l istnav li: Ensures a bottom margin is present to separate each list item.
¦ #l istnav a: Extends the active area of the link to the block-level and adds a background image, width, and border.
¦ #l istnav a:link, #listnav a:visited: Defines the look of the text when the buttons are in their standard state, giving a specific color and removing the underline from the link.
¦ #l istnav a:hover: Swaps the background image and alters the text color in the rollover state.
¦ #sell istnav a:link, #sellistnav a:visited, #sellist a:hover: Sets the look and feel of the selected button, indicating the current page in a navigation bar.
Because I’ve already laid the foundation with a list of links inside a <div> with a defined CSS ID, the changes are immediately evident.
The process is the same for defining each CSS rule. Each rule is named with the Advanced selector type chosen in the New CSS Style dialog box, which allows the user to enter any type of selector.
To get started with #listnav ul, follow these steps:
1. From the CSS Styles panel, select New CSS Style.
2. In the New CSS Style dialog box, with Selector Type set to Advanced, enter #listnav ul in the Selector field and click OK to open the CSS Style Definition dialog.
3. Set these values in the Type category: