Creating Navigation Bars
Using Macromedia Fireworks and Macromedia Dreamweaver

Step 1 - Planning Your Site

Step 2 - Designing Buttons In Macromedia Fireworks

Step 3 - Exporting Buttons For Use In Dreamweaver

Step 4 - Importing Fireworks Buttons In Dreamweaver


Step 1 - Planning Your Site

Creating good navigation structures is easy with the help of Fireworks and Dreamweaver. To begin creating a navigation bar, start by thinking about the overall structure of your web site. It is possible to add buttons to your navigation bar after creating it initially, but planning your site's overall structure first will save time.

Generally navigation bars should consist of seven to nine buttons. Including more links than this generally results in clutter and won't keep the attention of your audience. One exception to this rule occurs in sites such as online tutorials, which demand more sequential coverage of multiple sub-topics.

After deciding what sub-pages your initial page page should link to, determine key words and phrases to summarize the content of these pages. These key words/phrases will be used as the descriptive text included in your navigation bar.

Step 2 - Designing Buttons In Macromedia Fireworks

Start Macromedia Fireworks and open a new document. (File-New) The following input menu will pop up:

In this particular example, you'll notice that the button is being designed to be 50 pixels wide by 50 pixels high, at a resolution of 72 pixels per inch. Click OK, and the new document will open.

Now, insert a new button. This can be done by clicking Edit-Insert-New Button as shown below.

After clicking, a new window will appear:

This is the space you'll use to design your button. You'll notice a series of tabs at the top of this dialogue box: Up, Over, Down, Over While Down, and Active Area. "Up" indicates the graphic that will be shown initially. "Over" indicates the graphic that will be shown when rolling your mouse over the object. "Down" indicates the graphic that will be shown while and after the button is being clicked. "Over While Down", while not always used, indicates the graphic that will be shown when rolling the mouse over the symbol while it's down. Finally, the "Active Area" tab allows you to define what area of the button will be active (what area in which a click will result in a link). This area also allows you to define the link for the button, though this can also be done in Dreamweaver.

Start by drawing the initial design for your button. In this case, I've chosen to draw a simple box with text inserted.

Active Area

Above you'll see four states of the example button; up, over, down, and active area. To keep the button consistent for each state, use the "Copy Over Graphic" button (located in the lower right region of the window). Then, to alter the appearance of each state while maintaining consistency, try changing the background, text, or border color.

Finally, after creating each of the graphic states, you can alter the active area. To do this, drag the red lines to the area you wish to be active (clickable). Also, if you wish to enter hyperlinks for this particular button, this can be done by clicking on the green area in between the red lines in the "Active Area" box. After clicking this area, the "Properties" window at the bottom should change as in the image below.

Enter the desired hyperlink address into the "Link:" box. Alternatively, links can be entered after each button is imported into Dreamweaver.

Step 3 - Exporting Buttons For Use In Dreamweaver

Now that all states of your button have been created using Fireworks, you can export this button for use in Dreamweaver. To do this, click Done on the bottom right hand corner of the button window. Then click the File menu and select Export. The following menu will appear:

Select a file name for this button. Save the file as "HTML and Images", as shown above. This will create the HTML/Java code that tells the web browser how to react when a viewer rolls their mouse over the button, clicks the button, etc., as well as the images requested for each state.

Now the button is ready to be inserted in Dreamweaver. Remember file names for each button you create; you'll have to select them for each button on your navigation bar.

Step 4 - Importing Fireworks Buttons In Dreamweaver

In our final step, we'll import the button we've just created into a table in Dreamweaver. Open Dreamweaver, and pen the file you intend to insert your button in. Find the space you wish to insert it into, and click the yellow Fireworks icon in the toolbar (shown below).

The following window will open:

Click the "Browse..." button and navigate to the directory where your files are located. Select the HTML file associated with the button you wish to open. When you have selected the HTML file that you created in Fireworks, press OK.

After the Fireworks button has been imported, you'll see the "up" state of your button , as shown below:

This indicates that your button has been successfully imported.


created 2-4-02
designed by:
Marshall Kurtz
Johanna Brams, Project Manager