Creating a Rollover Navigation Bar in Dreamweaver
The navigation bar is one of the most important components of any Web site. This tutorial is going to show you how to make one that is functional and visually appealing.
1. First you will need to create a minimum of 2 images for each navigation element. The first image is the image that is loaded when the page is viewed (up image). The second is the rollover image (over image), which is displayed when a person puts their curser over the navigation element. If you are unsure how to make a navigation button, see my tutorial Create a Navigation Button. Here is a working example of what we want to accomplish.
2. Find the place where you want your navigation bar to be.
3. Choose Insert >> Image Objects >> Navigation Bar.
4. Next you will find the insert navigation dialog box. For the purpose of this tutorial we will only concern ourselves with the following: Element name, Up image and Over image. Also, it is a good idea to fill in the URL on the bottom now instead of later. See the screen shot below.
5. After you finish the first element (in this case Home) click on the plus symbol on the top left. That will allow you to add the rest of the navigation elements.
6. Once you have finished adding the elements and URL's click OK. Dreamweaver will then wrap your bar in a table and it will look something like this:
7. To add a little spacing between the navigation elements I went into the code and changed the cellspacing to 3. You can play with the cellspacing and cellpadding and see what works best.
8. Save your work and preview the page in a browser. The result should be something like this:
Note: If you want to modify the navigation bar at a later time, simply select one of the elements and click on Modify >> Navigation Bar.
Leave a comment