Creating a navigation bar in Fireworks

Setting up the canvas

• Open Fireworks and choose a canvas size big enough to fit the buttons on you are going to create

• Remember that you will be going quite far across or down the page

Button Editor

• DO NOT draw any of your navigation bar on the canvas

• A navigation bar is made up of buttons• Use the Button Editor to create only one

button in the exact same way• Add states to the button and click Done

Cloning

• One button will be created on your canvas• This needs cloning– Right click the button, select Edit, Clone– The cloned button will be on top of the original.

Click it and drag to one side– Repeat this cloning until you have the required

amount of buttons for your navigation bar

Editing the Clone

• The text on each button from the navigation bar can now be changed

• Click on a button you wish to change and alter the Text in Properties at the bottom of the screen

Adding pop up menus

• Pop up or drop down menus can be added to each of the buttons in the navigation bar by clicking on the white Swatch in the middle of each button

Positioning pop up menus

• After going through the pop up menus and creating how you want them to look, they can be repositioned around the navigation bar buttons by simply dragging the pop up outlines

Saving your navigation bar

• You need to save your navigation bar as you did your button both as a Fireworks file and as an HTML file

• Select File, Save as for the Fireworks file• Select File, Export for saving as a HTML and

Image• Save both versions in the same folder