|
A navigation bar contains links to the major
sections of a Web site. It appears on each page, providing an easy way
to "navigate" through a Web site. Macromedia Dreamweaver
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 Interactive
Images, 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 When Clicked, Go To URL, type in the
address that you want the navigation bar element to link to.
6. 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.
7. 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.
8. 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.
9. 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).
|