Dreamweaver 8 Design and Construction (OReilly Digital Studio)
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 Figure 13-18. Insert the decoration image in the top row of the nav-bar table
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
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 Choose File 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 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 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 |