Make a Navigation Bar in Fireworks using the button editor

 

 

The navigation bar can be horizontal or vertical. If it has to be a particular size, plan this from the beginning. FW will help you make the buttons as links, including the different states.

 

Draw a button

Create a new document in FW and make sure the background colour is the same colour as your web page or transparent.

Open the button editor: Edit → Insert → New Button

Notice the tabs Up, Over, Down, Over While Down: you can make these four states here.

 

In the Up state use the vector rectangle tool to draw your button. Choose the exact size here if it is important: you can see the width and height numbers on the left of the properties bar as you draw.

 

In the Properties bar you can change the colour and choose to have rounded corners to the rectangle

Using the Text tool (A) write the button name. Choose the longest word that you will be using for your links. You add the other button names later.

 

Align the text

Select the button and the text together by using the select tool and drawing a rectangle round both.

Choose the Align tab on the right hand Optimise/Align pane and align the button and text.

Note: here you can align to the canvas or the contents of the section - do not align to canvas.

 

Make the other states

Choose the Over tab: you get a blank pane. From bottom right, click on Copy Up Graphic to get the button in its Up state that you have just made. Change its colour and/or text colour.

 

Do the same for the other states if you wish. Click on Done when you are ready.

The button appears in the FW window (by default it has a green colour, this is not the colour it will be.)

 

Make a row of buttons

Click on your button to select it and, holding down the Alt key, drag to copy the button as many times as you wish.

In turn click on each button and change the text in the Properties bar to the required names.

 

Align the row

Select the whole row and align, as above

 

Trim the canvas

Modify → Canvas →Trim Canvas

 

Optimise and Save

You can preview your buttons using the Preview tab - this shows you the correct colours and the changes of state.

Optimise and Save your buttons as a .png

Then save as .gif: Use File → Export

Here choose a folder location, a file name, Export HTML and Images, and tick the Put Images in Subfolder box.

FW will save all the slices.

 

Insert in page

You can open the html page created by FW and build round it or insert the Fireworks html into an existing page.

Insert → Image Objects → Fireworks html

 

Make Links

Make the links in the usual way: select the button and drag the link icon to the appropriate file name in the file list.

Complete alt tags as the buttons are images.

 

To edit your button

If you want to edit your button, go back to FW and double click on the button symbol in the FW library panel, and click Edit. After editing re-export to your root folder.