Making Navigation Bars in Dreamweaver MX 2004

A navigation bar contains links to the major sections of a website. It appears on each page, providing an easy way to "navigate" through a website. Macromedia Dreamweaver MX 2004 allows you to easily create a navigation bar with rollover images.

Prepare the Buttons:
Before inserting a navigation bar, you need to make the buttons it will contain. You will need at least one button for each link, and additional buttons if you want rollover buttons displayed with a mouse-over of the original button, down buttons displayed when a button is clicked or over while down buttons displayed when the button is clicked and then moused-over.

Insert the Navigation Bar:
1. From the Insert menu in Dreamweaver, select Image Objects, then Navigation Bar. The Navigation Bar Properties dialog box comes up.

2. After Element Name, type in the name of the button you are going to insert first.

3. After Up Image, type in the address of the button that will be displayed first or browse for it by clicking the Browse button.

4. If you made a rollover button, select it after Over Image. If you made a down button, select it after Down Image. If you made an over while down button, select it after Over While Down Image.

5. After Alternative text, type in a short description of the image. This text will appear when the image is moused over in a Web browser, or if the image cannot be displayed.

6. After When Clicked, Go To URL, type in the address that you want the navigation bar element to link to.

7. To add another element to the navigation bar, click the Add symbol (+) in the upper left. Notice how another entry appears after Nav Bar Elements. Name this one, select its images and where it links to in the same way you did before in steps 2-5. Continue doing this until you have all the elements you want in the navigation bar.

8. After Options, check the box for Preload Images so the images load before the user actually does the mouse-over. Check the box for Show "Down Image" Initially if you want to make it so that when a page loads, its corresponding button will be in the down state. This will highlight the section of the site that is being viewed. For example, when visiting the home page, the "home" button would appear in the down state, distinctive from the other buttons.

9. After Insert, you can select to display the navigation bar Horizontally or Vertically. The Use Tables option to the right of that decides whether or not the navigation bar will be enclosed in a table. Check this option so the buttons in the navigation bar don't accidentally get moved around.

10. Click OK.

Below is an example of a navigation bar with rollover images created in Dreamweaver. (Your navigation bar should contain links; the example below does not).