Create a navigation bar

A rollover image is an image that appears to change when a visitor to your site points to the image with the pointer. For example, a button on a page might appear to light up when the visitor points to it. Dreamweaver provides the ability to easily create a navigation bar consisting of a set of rollover images.

A rollover image consists of two images: the image displayed when the page first loads in the browser, and the image displayed when the visitor moves the pointer over the original image.

A navigation bar allows you to provide up to four images for each button: the normal two for a rollover, plus images that indicate that a navigation button is already active on a given page. In this lesson, however, you'll create a navigation bar that uses only the standard two rollover images for each button.

Note: When creating a rollover or navigation bar, make sure that all the images for each button have the same width and height (in pixels).

In some browsers, navigation bar buttons that aren't in a table may wrap onto a new line if the visitor makes the browser window too narrow. To avoid such wrapping, add a CSS style to the div tag surrounding the navigation bar.

To create a navigation bar:

1. Switch to the main (index.html) page if it's not the current page. (If the page isn't open, open it by double-clicking its icon in the Files panel.)
2. In the Document window, place the insertion point where you want the navigation bar to appear. On the Trio Motors main page, for example, you'll be placing the navigation bar immediately after the banner image at the top of the page; so select that image, then select the <div.logo> tag in the tag selector at the bottom of the Document window. Now press Right Arrow to ensure that the insertion point is outside of the div tag that contains the banner image.
3. Select Insert > Layout Objects > Div Tag. In the Insert Div Tag dialog box, type navbar in the Class text box, and click OK. Then press Backspace (Windows) or Delete (Macintosh) to delete the placeholder text that appears.
4. Select Insert > Image Objects > Navigation Bar.
5. The Insert Navigation Bar dialog box appears.

   
   
   

6. In the Element Name text box, type a name for the button, such as showroom_button.

   This gives the button a unique name and makes it easily identifiable in the HTML code.

7. Click the Browse button next to the Up Image text box, then navigate to the btnShowroom.jpg file in your site's images folder (inside the assets folder). Make sure the Relative To pop-up menu is set to Document, then click OK or Select (Windows) or Choose (Macintosh).

   The Up Image text box displays the path to the image: Assets/images/btnShowroom.jpg.

   Note: If it shows a longer path, you probably chose an image file in a different folder, or else you chose something other than Document from the Relative To pop-up menu. Click the Browse button and try again.

   The Up Image text box indicates the image to display when the button is in the "up" state, which is usually when the page first appears in the browser.

8. Click the Browse button next to the Over Image text box, then navigate to btnShowroom_on.jpg in your site's images folder. Make sure the Relative To pop-up menu is set to Document, then click OK or Select (Windows) or Choose (Macintosh).

   The Over Image text box indicates which image to display when the pointer is pointing to the image in the browser.

9. Leave the Down Image and Over While Down Image text boxes blank.
10. In the Alternate Text text box, type Showroom.
11. In the When Clicked, Go To URL text box, type showroom.html.

    This step causes the rollover image to link to a page called showroom.html. That page doesn't exist yet; if you were creating a complete Trio Motors site, you would have to create that page.

12. Make sure the Preload Images option is selected so the rollover images load when the page opens in the browser, ensuring a quick transition between images when a visitor moves the pointer over the original image.
13. Deselect the Show "Down Image" Initially option.
14. Click the Plus (+) button at the top of the page to add another button to the navigation bar. Repeat steps 6 through 13, entering news_button for the element name, btnNews.jpg for Up image, btnNews_on.jpg for Over image, News for alternate text, and news.html for URL.
15. Click the Plus (+) button at the top of the page again to add another button to the navigation bar. Repeat steps 6 through 13, entering owners_button for the element name, btnOwners.jpg for Up image, btnOwners_on.jpg for Over image, Owners for alternate text, and owners.html for URL.
16. Click the Plus (+) button at the top of the page again to add another button to the navigation bar. Repeat steps 6 through 13, entering services_button for the element name, btnServices.jpg for Up image, btnServices_on.jpg for Over image, Services for alternate text, and services.html for URL.
17. In the Insert pop-up menu at the bottom of the dialog box, make sure that Horizontally is selected.
18. Deselect the Use Tables option.
19. Click OK to close the dialog box and create the navigation bar.

    The images specified in Up images appear in the document.

20. Save your page.

To make sure the navigation bar buttons stay together on one line:

1. Select one of the navigation bar images in the Document window.
2. In the tag selector, select the <div.navbar> tag.
3. In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button.
4. In the Selector Type options, select Class, and type .navbar in the Name text box. Be sure to include the period at the beginning.
5. For Define In, select This Document Only.
6. Click OK.
7. In the CSS Style Definition dialog box, select the Block category.
8. In the Whitespace pop-up menu, select nowrap.
9. Click OK to define the style and dismiss the dialog box.

Note: Rollover images and navigation bars don't change when you roll over them with the pointer in the Document window in Dreamweaver; the images change only in a browser. To make sure your navigation bar works, you need to preview your page in a browser. For information on previewing, see Preview pages in a browser.

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/dreamweaver/mx2004/getting_started_en/gs_06_c5.htm

Add Comment