Section 13.3. Building a Four-State Nav Bar

13.3. Building a Four-State Nav Bar

Constructing a four-state nav bar is very much like building the two-state model, although the process from start to finish requires a little more effort. First, you build the default nav bar, where all buttons are in the up state by default. Then you build custom nav bars for each of the top-level content pages (in this case, the Meet Bill, Coercion, Pandering, and Duplicity pages), where the button for each particular page is in the down state by default.

The way you go about doing this depends upon your comfort level with Dreamweaver. You'll look at two different methods: the easier way (which takes more time), and the harder way (which takes less time). Review them both, and choose the one that makes more sense to you.

13.3.1. Doing It the Easier (Longer) Way

Open the home page in Dreamweaver, clear out the text label inside the editable region for the main navigation, set the format for this region to None, and choose the Navigation Bar object from the Insert panel. Dreamweaver opens the Insert Navigation Bar dialog box. Fill it out as before, this time adding the images for the other two button states, as Figure 13-15 shows.

Figure 13-15. For a four-state nav bar, fill out all the image fields

Click OK, and Dreamweaver adds the default nav bar to the home page, as Figure 13-16 shows.

While the nav-bar table is selected, go to the Property Inspector, change the number of rows from 4 to 5, and press Enter or Return. This gives you an extra table cell for the decoration image. However, the decoration appears at the top of the nav bar, not the bottom, so a little dragging and dropping is in order. You'll move each button (along with its link) one row down to make room for the decoration image at the top of the nav bar.

In the document window, click the bottom-most nav button to select it. Then go to the Tag Selector, and click the <a> tag. This tag, which stands for anchor, corresponds to the button's link. You don't want to move the button image without its link, so don't skip this important step.

Figure 13-16. Dreamweaver adds the default nav bar to the home page

With the button and its link selected, position the mouse pointer atop the button image. Hold down the mouse button, and drag the mouse to the empty table cell. Release, and you've moved the button and its link, as Figure 13-17 shows.

Figure 13-17. Add a new row to make room for the decoration image

When the top row is empty, click inside it, and choose Insert Image from the main menu. Select the image file for the decoration, and youre good to go, as in Figure 13-18.

Figure 13-18. Insert the decoration image in the top row of the nav-bar table

TIP

Don't want to drag images and links around the document window? Who can blame you? Here's a shortcut. Select the nav-bar button that is next to the decoration. Then choose Modify Table Insert Rows Or Columns, and you get the dialog box of the same name. Under Insert, choose Rows. Under Number of Rows, type 1. Then, under Where, choose the appropriate location. In the case of Figure 13-18, you would pick Above The Selection. In the case of Figure 13-13, you would pick Below The Selction. Click OK, and Dreamweaver inserts the table row exactly where you want itno dragging and dropping required.

Now for the top-level content pages. Tackle each one in turn.

Up first is Meet Bill. Open this page in Dreamweaver, clear out the contents of the nav-area editable region, set the format to None, and call up the Insert Navigation Bar dialog box by clicking the Navigation Bar object in the Insert panel. Fill out the dialog box as before. However, for the Meet Bill button, when you come to the Options section, check the "Show 'Down Image' initially" checkbox as in Figure 13-19, because this is the nav bar for the Meet Bill page. All other buttons on the Meet Bill page are in the up state by default, so leave this option unchecked for the remaining nav-bar elements.

Figure 13-19. Check the "Show 'Down Image' initially" option

When you finish with the Meet Bill nav bar, continue on to the rest of the top-level content pages, always remembering to set the particular button for that page in the down state by default. At this point, the building process can be mind-numbingly repetitive, but it's worth it, as you see when you preview your site in a live browser window. Figure 13-20 shows the fruits of your labor: the Coercion button appears in the down state by default when the visitor is on the Coercion page.

Figure 13-20. Each page's button appears in the down state initially

TIP

Now that you have a custom nav bar on each of the main content-category pages, you never have to build a nav bar for this site ever again. When you create a second-level content page in the Meet Bill section, for instance, simply copy the Meet Bill nav-bar table from the main Meet Bill page and paste it in the navigation area of the new page.

13.3.2. Doing It the Harder (Shorter) Way

In the easier but longer method, you built the same nav bar on several different pages of your site. By this method, you build the nav bar one time only in the template document, even though it's variable content. Then you create new template-based pages for the top-level content categories, replace the original pages from Chapter 11, and modify the nav-bar behavior on each new content page. This is a little tricky and a little technical, so proceed carefully, and you'll do fine.

Begin by opening the template document and building the default nav bar inside the editable region for the navigation area, as Figure 13-21 shows.

Choose File Save from the main menu, although you dont have to update the pages for your site this time because you're about to delete them. They served their purpose well. They provided you with a page to which to link from the Insert Navigation Bar dialog box, but now they're out of date.

Choose File New from the main menu, and create a new page based on your modified template. Then choose File Save, and save this document as index.html page.

Change the title in the document window's Title field to match the name of the first top-level content page (Meet Bill, in this case), and choose File Save As. Save this file in the same location and with the same name as the previous Meet Bill page, and make sure you click Yes when Dreamweaver asks about updating the links. Repeat this operation for the remaining top-level pages in the site.

Figure 13-21. Build the nav bar in the template document

You now have brand-new top-level content pages to go with your brand-new home page. What you want to do now is to modify the behavior of the nav bar for each of the top-level content pages. To do this, you need the Behaviors panel, which Figure 13-22 shows, so go to the main menu, and choose Window Behaviors. The Behaviors panel allows you to browse and edit the JavaScript functions associated with any particular page element. You know from Chapter 4 that the rollover effect happens by way of JavaScript, so what youre about to do, in essence, is rewrite a portion of the rollover script to get the nav bar to show the correct default button state.

Figure 13-22. Browse and edit JavaScript Behaviors of page elements

Start with your first top-level content page (Meet Bill, in this case). If this document window isn't already open in Dreamweaver, open it. Then click the corresponding nav-bar button in the document window, and Dreamweaver lists the associated JavaScript behaviors. This is the Meet Bill page, so the Meet Bill button is the one to click.

Now go to the Behaviors panel, and double-click the gear icon of any one of the Set Nav Bar Image behaviors. It doesn't matter which you choose. They all call up the same Set Nav Bar Image dialog box. In this dialog box, under Options, check the "Show 'Down Image' initially" checkbox, as in Figure 13-23, and click OK. Dreamweaver adjusts the default appearance of the Meet Bill button to the down state, as you see in Figure 13-24.

Figure 13-23. Check the "Show 'Down Image' initially" checkbox

Figure 13-24. Dreamweaver adjusts the default appearance of the button

Choose File Save. Repeat this procedure for the rest of the top-level content pages, and you end up with custom nav bars on each.