Build or Change a Dreamweaver Navigation Bar

A very nice feature of Dreamweaver 4 is its ability to write JavaScript for a navigation bar. It can write a script for a simple rollover or a more sophisticated changed third image. In this tutorial we will discuss building a navigation bar with simple rollovers.

New Navigation Bar

1. Build a page for your website, leaving a table cell open for the nav bar.

2. Place your cursor at the top of the cell, then go to Insert > Interactive Images > Navigation Bar. The Insert Navigation Bar dialog box will appear. See nav view 7.

3. Assign your first button an Element Name. It should be one word. It will appear in the Nav Bar Elements where a list of the nav bar buttons will be made.

4. Browse to the location of the Up stage button graphic or type in the location. The url of the button should look something like images/home_up.gif.

5. Browse to the location of the Over stage button graphic or type in the location. If you are using a Down stage and Over While Down stage, repeat the procedure for them.

6. In the When Clicked, Go To URL field, browse to the location of or type in the file name of the page to which you wish the button to link .

7. It is good to select Preload Images.

8. Select Horizontal or Vertical layout for the nav bar.

9. It is fine to use tables.

10. Do not click OK, yet! Click the plus sign at the top of the dialog box to add another button. Repeat the procedure for the rest of the buttons in your navigation bar. When all buttons are listed, click OK.

Modifying Dreamweaver Navigation in a Template

Several pages with corresponding buttons have been created for you in our Dreamweaver templates. However, it is almost certain you will need to make some changes to customize your template.

1. Blank buttons have been provided for you. You will need to import them into a graphics program to add button names. When the modified buttons are complete, export them to the images folder of your website.

2. If the template you purchased is based on a Dreamweaver template, you will be making changes to the template page found in the Templates folder. Changes will appear throughout the site. Open the template page.

3. Click on the nav bar and go to Modify > Navigation Bar.

4. Select a button you wish to change in Nav Bar Elements.

5. Modify the Element Name, Image locations, and When Clicked, Go To URL file name. Repeat for each button you wish to change.

6. To add a button, click on the plus sign at the top of the dialog box. To delete a button, click on the minus sign.

7. To change button order, click on the up or down arrow at the top of the dialog box after selecting a button in the Nav Bar Elements field.

8. When you have finished modifying, adding, or removing buttons, click OK.

- Navigation tutorial - general information