Dreamweaver 8 Design and Construction (OReilly Digital Studio)

13.2. Building a Two-State Nav Bar

First things first. Before you even think about building the navigation bar, you need to put all the image files in the img or images folder of your site. If you're storing these files somewhere else on your computer, make copies of them, and move the copies to the images folder. This is very essential! If you use the image files in some other folder, your site is going to generate broken graphics all over the place when you upload it to the Web.

Do you have your graphics in the right place? Good. The next question is: where do you build the nav bar? Do you put it in the template document, or do you put it on the actual pages of your site? By now, you can probably guess the answer. This is a two-state nav bar, which means that it's fixed contentthe default state of the buttons is always the up state, no matter where on your site the nav bar appears; and fixed content belongs in the template document, as you'll recall from Chapter 11.

You want to work on the template document, so launch Dreamweaver and load the layout template for your site. Click inside the navigation area, remove the text label, and set the Format menu on the Property Inspector to None. The flashing cursor should now be in the upper-left corner of an empty table cell or layer, similar to Figure 13-7.

Go to the Insert panel, click the inverted triangle to the right of the image objects to open their menu, and choose the Navigation Bar object as in Figure 13-8. When you do, Dreamweaver opens the Insert Navigation Bar dialog box shown in Figure 13-9.

Working through this dialog box isn't hard at all. Just take it step by step. In the Element Name field, type a brief but descriptive name for the first button in the nav bar. In this case, it's the Theories button, so theories makes sense as a name.

Then click the Browse button next to the Up Image field, and navigate to your images folder. Select the image file that corresponds to the up state for the Theories button. You have a two-state nav bar, so repeat this process for the Over Image field, this time choosing your over-state image file for the Theories button. Feel free to skip the states that you don't need. Just leave their fields blank.

In the Alternate Text field, type "Go to the Theories section" or something to that effect. When you're dealing with an interactive element like a button, the alternate text should always start with a verb. Don't just say "Theories." That means nothing out of context. Explain to the visitor who can't see your web page exactly what the button does.

Now click the Browse button next to the When Clicked field, and navigate to the location of the page that appears when the visitor clicks the button. In this case, this is the Theories button, so you want to connect to the main Theories page.

Under Options, make sure that the Preload Images checkbox is checked for this element. Preloading images helps to make the rollover animation smoother.

Your Insert Navigation Bar dialog box looks much like the one in Figure 13-10.

This takes care of the first nav-bar button. Go to the top of the dialog box, and click the plus button to add a new element to the nav bar. This one is the Facts button, so do exactly as you did previously, only substitute the Facts images for the button states and the main Facts page as the target location.

One nav-bar button remains, so click the plus button at the top of the Insert Navigation Bar dialog box, and fill out the fields.

You're almost done. All that's left is to review the options at the bottom of the dialog box. From the Insert menu, choose the orientation of your nav bar: Vertically for buttons that go top to bottom or Horizontally for buttons that go left to right. For this site, you want a vertical, top-to-bottom nav bar, so your Insert Navigation Bar dialog box should look like the one in Figure 13-11.

Click OK, and Dreamweaver adds the nav bar to the navigation area of your template document, as Figure 13-12 shows.

While the nav bar is selected, glance at the Property Inspector, and notice that it indicates a table. Dreamweaver constructed your nav bar in a table structure, just like you may have done for the general page layout, but even if you built a layers-based page layout, your nav bar still appears in a table.

Each nav-bar button occupies its own cell of this table. You still have a decoration for the bottom of the nav bar, so why not add a new cell to the nav-bar table and place the decoration graphic into this cell? Here's what to do:

1. With the nav-bar table still selected, go to the Property Inspector.

2. Find the Rows field. It currently shows the value 3three rows for three buttons.

3. Type 4 in the Rows field, and press Enter or Return. Dreamweaver adds a new row to the bottom of the table.

   TIP

   If you inserted a horizontal nav bar, then adjust the value in the Cols (columns) field, not the Rows field.

4. Click inside this new row in the document window.

5. Choose Insert Image from the main menu. The Select Image Source dialog box appears. Navigate to the decoration image, and click OK.

6. The Image Tag Accessibility Attributes dialog box appears. Because this is a decoration image that contributes nothing in terms of content to the page, you don't have to specify alternate text or a long description (see Chapter 14 for more information). In other words, a visitor who can't see your web page loses nothing by missing a textual description of this particular graphic. Simply click OK to close the dialog box.

Dreamweaver adds the decoration image to the nav-bar table, as Figure 13-13 shows.

Choose File Save from the main menu, and update the pages of your site. To test your nav bar, open your home page in Dreamweaver, and press F12 to preview this page in a live browser window, as Figure 13-14 shows. When you hover over the buttons with the mouse pointer, the rollover effect kicks in, and when you click the buttons, you go to the appropriate pages of your site.