Creating a Multiple State Navigation Bar
Author's Site: Beginner's
Guide to Dreamweaver and Fireworks
Reference ID: 15626
One of the more popular navigation features on the Web is the tabbed
interface that simulates the appearance of file folder tabs for
site navigation. Most people are quite familiar with file folders,
so this simple interface can create a comfortable experience for
viewers and allow them to quickly find your site's navigation features
and begin moving through the site. In this project, you'll learn
not only how to create the graphical interface that uses tabs as
the primary means of navigation but also how you can add to your
site's usability by employing multiple instances of a navigation
So what exactly is a multiple state navigation bar anyway? Simply
put, a multiple state navigation bar displays the Down state of
a button to give your site's visitors a visual reference as to their
location within your site. Some of the most popular sites on the
Web use this navigation scheme because it is simple and intuitive
and yet allows the site a great deal of depth.
Fireworks has allowed for the automatic creation of multiple-state
navigation bars since version 3, but the process has become much
simpler, and a more intuitive with the addition of the Property
inspector in Fireworks MX.
Goals of this Tutorial
In this tutorial you will learn the following:
- Using Fireworks symbols to create a tabbed interface
- Using new features of the Property inspector in Fireworks MX
- Modifying symbol properties in Fireworks MX
- Export settings for creation of multiple navigation bars
- Inserting your completed navigation bars in Dreamweaver MX
Understanding Button States
Before we begin, let's review the uses of button states
and how they help define where your visitor is when they view your
- Up-The appearance of a button when
it is first loaded into a web page.
- Over-The appearance of the button
when a viewer passes over it with the mouse pointer.
- Down-Used when navigation bars
are designed that display a button as it might look if it were
pressed down. This button state can be used to help viewers orient
themselves to their location within your web site.
- Over While Down-When a button displays
in the Down state, you can still change its appearance by using
this option. A button already displaying its down appearance can
change again when a viewer passes the mouse over it.
Using the Button Editor
In this tutorial you'll build a component for a web sitea
navigation bar with buttons arranged horizontally. In this case
the navigation bar is a component intended for insertion into your
pages as part of a Dreamweaver template. While there are many ways
to compose pages in Fireworks this example assumes that this is
just a part of the overall page design.
Start by creating a new document in Fireworks with a canvas size
of 500 pixels wide by 40 pixels high. Set the canvas color to white
and save the file as navbar_practice.png.
In addition to creating this file, use your computer's Explorer
or Finder controls to create a new folder named navbar
on your hard drive.
Creating the tabs is a relatively easy process. Start by selecting
Edit» Insert» New Button to
open the Button editor. Note that by default the Button editor begins
on the Up state, as designated by the tab at the top of the editor's
Using the Rounded Rectangle tool, draw a rectangle with a corner
roundness of 35 pixels. To change this setting, you'll need to look
in the Property inspector for the roundness setting once the tool
is selected. Using the Info area of the Property inspector, set
the size of the rectangle to about 100 pixels wide by 50 pixels
high. In the illustration you see here the fill color has been set
to a pale yellow and a 1-pixel soft-rounded stroke in gray has been
To remove the bottom part of the rectangle, select the rectangle
and use the Knife tool to cut the lower portion of the rectangle.
Hold down SHIFT while dragging the Knife tool across the object
to draw a straight horizontal line. After the rectangle is cut,
click once on the canvas to deselect the rectangle and then use
the Pointer tool to drag away the lower portion of the object, as
you see in this illustration. With this lower portion selected,
you need only press DELETE to remove it from the Button editor's
canvas. This illustration shows the first two steps of the process.