• Inserting a Navigation Bar 11/28/07 4:17 PM

Inserting a Navigation Bar 11/28/07 4:17 PM
Tutorial Home IT Center OIT WMU
IT Center
Tutorials Inserting a Navigation Bar
Dreamweaver has an easy-to-use tool that allows you to insert
Time to complete: vertical or horizontal navigation bars. To use this tool, for each
About 15 minutes element you want in your navigation bar, you will need at least one
Button states
button style graphic that represents the element. You can also create
navigation bars with rollover states.
Inserting a
navigation bar
You can only insert one navigation bar per web page
To edit a navigation bar already in your page use
Modify>Navigation Bar from the DW menu
Button States
The table below displays the buttons that will be used in this
exercise. Rollovers used in a navigation bar can have up to four
individual states.
up state
how the button appears when the user hasn't yet clicked or
moved the pointer over the button
over state
how the button appears when the pointer is moved over the
button
down state
how the button appears after the user has clicked it. (think of this
as similar to a visited link)
over while down
how the button appears when the user has moved the pointer
over a button that has already been clicked.
Examples
up state
over
state
down
state
over
while
http://www.wmich.edu/itc/tutorials/dreamweaver/advanced/nav-bar.html#navbar Page 1 of 3
Inserting a Navigation Bar 11/28/07 4:17 PM
down
zip archive of these images sit archive of these images
check the rollover and downstates
(note clicking on these buttons won't take you anywhere)
Inserting a navigation bar
When using the navigation bar tool, do not press the RETURN key.
Use the TAB key or your mouse to move from field to filed.
To insert a navigation bar, from the Insert panel, Common tab, click
on the Insert Navigation Bar icon ( ). Each element in your
navigation bar should have a unique name (don't use spaces or
special characters). Use the Browse button to specify the image you
will use for each state. Once you have all the information enter for
an element, click the "+" sign to add information about the next
element.
At the bottom specify either a horizontal or vertical navigation bar.
When you are done, click the OK button.
http://www.wmich.edu/itc/tutorials/dreamweaver/advanced/nav-bar.html#navbar Page 2 of 3
Inserting a Navigation Bar 11/28/07 4:17 PM
Editing a navigation bar
To edit a navigation bar, from the menu, click Modify>Navigation
bar.
top
Contact: Julie Scott
Last revised: October 15, 2004
http://www.wmich.edu/itc/tutorials/dreamweaver/advanced/nav-bar.html
Instructional Technology Center
269-387-6958
part of
Office of Information Technology
Western Michigan University
http://www.wmich.edu/itc/tutorials/dreamweaver/advanced/nav-bar.html#navbar Page 3 of 3