Creating Graphics - Navigation Menu

In this tutorial you will use the buttons you created in the rollover tutorial and produce a navigation menu.

You are now going to use Dreamweaver to create an interactive navigation menu.

Step 1
Open a new html page in Dreamweaver. Insert a table 3 columns by 3 rows. You are going to use the cell in the left column on the middle row. Click it.

Step 2
To insert a Navigation Bar select Insert > Image Objects > Navigation Bar.

The Insert Navigation Bar window will then be displayed. Give an appropriate name for the Element Name e.g. homebutton.

Up Image = The image to be displayed when the menu is loaded
Over Image = The image to be displayed when the cursor moves over the button
Down Image = The image to be displayed when the button is pressed down
Over while down image = The image to be displayed when the cursor is over the button when it is pressed down.

Set your homebutton as the Up Image. Then set your rollover button as the other images (you can create other versions of your buttons for each of the different button states if you fancy a challenge! To do this experiment with inner bevel button presents in Fireworks).

Set the alternate text to home. Identify the page you want the image to link to when clicked e.g. index.html. Be sure to select Vertically from the Insert option (this will create a vertical navigation menu).

Step 3
To add the other buttons click the Add Item button. Repeat what you did above for the images button.

Step 4
Repeat this for your final two buttons. The screen shot below shows this completed.

Click OK. To view your Interactive Navigation menu save the web page you created. Then go to File > Preview in Browser. You navigation menu should look something like this.

If you want to change any of the behaviours of your buttons simply click the button once then double click the appropriate behaviour from the Tag > Behaviour link.

In order to achieve a distinction you need to add drop down menus to your navigation bar. To find out how to do this go to the Navigation Menus with Drop Down Menus Tutorial.