Dreamweaver versions up to CS4 included a system for creating navigation bars with images in a similar way to creating rollover buttons. Later versions use Spry or jQuery and are instead optimised for text.
The earlier navigation bar consists of a set of button images whose display changes based on the actions of a user. Navigation bars often provide an easy way to move between pages and files on a site. Graphics for this exercise here Make your navigation bars as Library items (in assets) or as a server side include (ssi) to make it easy to add or subtract buttons on several pages at once. Example from Stone Arts Ltd.
 |
 |
 |
initial 'UP' state |
'OVER' state |
'DOWN' state |
Select Insert > Image Objects > Navigation Bar.
Or, in the Common category of the Insert bar, click the Images menu and select the Insert Navigation Bar button, fifth item down from the dropdown options to the right of the tree symbol. NB the tree will be replaced in the palette by the nav bar icon until you choose something else from the dropdown.
When you insert a navigation bar, you name the navigation bar elements and select images to use for them.
There are two decisions you must make which cannot be changed later except by starting again. These are at the bottom of the dialogue box, under a horizontal rule, and will not be available if you modify the nav bar later).
- Do you want your buttons arranged across horizontally, or vertically down the page?
- Do you want them kept tidily in a table? (YES otherwise they will move if people make their browser window small).
A navigation bar element can have four states:
 |
Up: the image that appears when the user hasn't yet clicked or interacted with the element. For example, the element in this state looks like it hasn't been clicked. |
 |
Over: the image that appears when the pointer is moved over the Up image. The element's appearance changes (for example, it may get lighter) to let users know they can interact with it. |
 |
Down: the image that appears after the element has been clicked. For example, when a user clicks an element, a new page loads and the navigation bar is still displayed, but the clicked element is darkened to show that it's been selected. |
|
Over While Down: the image that appears when the pointer is rolled over the Down image after the element has been clicked. For example, the element could appear dimmed or gray. You can use this state as a visual clue to users that this element cannot be clicked again while they are on this page. (I rarely use this one. Actually I NEVER use this one and simply put in the Down graphic again.) |
After creating a navigation bar, copy it to other pages in your site, use it with server side includes (ssi) or frames, and edit the page behaviors to show different down states as pages are accessed.
