Share this Page URL

Lesson 10. Creating Frames > Adding a Navigation Bar - Pg. 278

Creating Frames 278 Adding a Navigation Bar A navigation bar is a set of images used to link to pages in your site. Navigation bars are similar to simple rollovers (covered in Lesson 5) in their ease of use. Navigation bars, however, allow you to add up to four states for each image to display, based on user interaction. The first state of an image in a navigation bar is known as Up Image and appears when the page first loads. The second state of an image is called Over Image and is displayed when the user rolls over the image. (These states are the same two that occur in a simple rollover.) In a navigation bar, you have two additional states that you can use. When the user clicks the image, the third state, Down Image, is displayed. The fourth state of an image, Over While Down Image, is displayed when the user rolls over an image after the image has been clicked. The navigation bar is effective for adding user feedback. You can make the third image look like a "clicked" button, indicating that it has been selected. Users will then understand what pages they are looking at based on the selected button. When the user is on a home page, for example, the Home Page button could look like the clicked button, while all of the other buttons would be in their normal states. When the user clicks another button, the user goes to that page; that page's button is in the clicked state, and the Home Page button returns to normal. On each visited page, the appropriate button appears to be clicked, and the others are back to their normal states. To use navigation bars without frames, you can create them on one page and then copy them to the other pages in your site. Then you will need to modify the behaviors for each button on all the other pages. 1. Place the insertion point in the nav frame (the bottom left frame). Save the file as nav_bar.html in the Lesson_10_Frames folder and title it Lights of the Coast: Locations. Choose Modify > Page Properties to set the background to white and the text to black, and type 0 into all four margin-text fields. Set the links to #330000, the visited links to #333333, and the active links to #660000. The document title bar changes to reflect the title and file name for the document in this frame. Place the insertion point in the nav frame. Choose Insert > Interactive Images > Navigation Bar. Clicking in the nav frame will enable you to edit the nav_bar.html document. This will be your navigation frame. It will contain links to various pages that will appear in the content frame to the right. These will be the links you target to open files in the content frame. The Insert Navigation Bar dialog box opens. NOTE 2.