| In the previous exercise, you created a simple rollover graphic. It was simple in the sense that it had an up and over state and that was it. What if you wanted a down state as well, and what if you had more than one button to create? That's when you use the Navigation Bar feature. This feature allows you to have four states as well as many buttons. The only catch is, you can have only one navigation bar per page. Inserting a Navigation Bar into your Document Follow these steps if you want to place more than one button with several states into your document. It's important to download the nav_buttons.zip file from this books companion Web site at http://www.dreamweavermxunleashed.com. Be sure to navigate to the Chapter 4 section of the site. Unzip the files and leave the Buttons folder on your desktop. -
Open a new document by choosing File, New. This launches the New Document dialog box. Choose Basic HTML and click OK. -
After the new document is open, choose File, Save As to launch the Save As dialog box. Name the file navigation.html and save it in the local root folder for whatever site you're working on. -
Inside the document, click Insert Navigation Bar under the Common tab of the Insert Panel or choose Insert, Interactive Image, Navigation Bar. This launches the Insert Navigation Bar dialog box as shown in Figure 4.41. Figure 4.41. The Insert Navigation Bar dialog box.
-
Type About into the Element Name text field. -
Next, browse for an up image. Locate the file called about_up.gif inside the Buttons folder you downloaded from the Web site. You can locate it by clicking the Browse button to launch the Select File dialog box. -
After the up image is in place, click the Browse button for the over state. Find the image named about_over.gif. -
After the over state is inserted, click the Browse button for the down state. Locate the file named about_down.gif. -
The last state is the over-while-down state, which can be confusing. The way to activate the over-while-down state is also a bit strange, but here it is. If the end user clicks the button and moves the mouse away from the button without releasing the mouse and then moves the mouse back over the button, still without having released the mouse, it triggers the over-while-down state. It's such natural behavior to do that, isn't it? If you think it's stupid, you can leave this state blank. There is a graphic named about_overdown.gif; if you want this state, browse for that file. -
Next, you must fill out the link. Because you don't have any local files, you can send it to Train Simple's About page. In the text field next to the label When Clicked, Go To URL: type in the following URL: http://www.trainsimple.com/culture.htm. -
Use the drop-down menu to determine which window you want it to open in. The default is Main Window, which works at this point. -
Make sure the Preload Images option is checked. Your rollover will not become active until all the images have been downloaded. If you don't have this checked, you run the risk of having the end user mouse over one of the images before the other states download, and they'll get a broken image icon. -
Repeat steps 4 through 11 to include the Products, Locations, News, and Search set of graphics. -
Also, make sure you insert this horizontally and that you use tables. -
Choose OK, and test it out in a browser by pressing F12 on your keyboard. Notice in Figure 4.42 that the image changes on mouse over and down. Figure 4.42. Notice that the navigation bar is placed into the document and when you preview it in the browser, you can see the different events for each button.
|
Some final notes about the navigation bar: if you want to modify it in any way, choose Modify, Navigation Bar. When you modify it, you'll no longer have options for inserting horizontally or vertically, nor will the table option be available. Finally, you must have an element name and an up image to add additional content to the navigation bar. |
