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.
Create a navigation bar
49
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.
50
Chapter 5: Tutorial: Linking and Previewing Pages
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.
Create a navigation bar
51
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” on page 53.
Copy the navigation bar
Now that you’ve created a working navigation bar, you can reuse it in all of your pages. In this
lesson, you’ll copy the navigation-bar images and paste them into your second page.
There are a variety of other ways to reuse content in Dreamweaver, including library items,
templates, and snippets. For more information on those topics, see Using Dreamweaver Help.
To copy the navigation bar into another page:
1 In the index.html file, select the Showroom rollover image.
2 In the tag selector, select the <div#row1> tag.