1. File >> New to get a blank canvas to work with. Make the dimensions a little larger than the final navigation bar. In this case the buttons are going on a site that is 770 pixels wide and the buttons are going to be 20 pixels in height. So make the canvas at least 800 by 200. Set the canvas color to background color of the web page, in this case white.

2. For this navigation bar the "button wizard" will be used. A button will be designed as a library symbol and then dragged out onto the canvas. So go to "Edit >> Insert >> New Button. A mini canvas will open with a cross-hair in the middle. This canvas is special, it is really in the library and has special properties.

3. If library items are going to be used it is a good idea to open up the library item panel so we can see what is going on in there. Go to "Windows >> Library" the Library Panel should show up on the right/ bottom.

4. Time to design the button. On the left is the "Tool" toolbar. This button is going to be a simple rectangle with text on top. So select the rectangle tool in the "vector" section. Notice the little black triangle at the bottom corner of the tool. If you click and hold on it other options will pop out.
   
   Click and drag out a rectangle on the button canvas. Don't worry yet about the size or color.

5. Once the rectangle is drawn all of its properties can be edited using the "Property Toolbar" that runs along the bottom. Select the rectangle by clicking on it, blue handle indicate it is selected. First pick a fill color. Next to the paint bucket icon is the color pallet button. click it and the color pallet will show. A color can be selected from this pallet or you can type in a hexadecimal color code. In this case type in 9999cc, which is a shade of blue.

6. The button needs to be sized. Select the button and in the property bar there is a width and a height control on the left. Desired dimensions can be entered here. For this menu seven buttons are needed within 770 pixels so each button needs to be 110 pixels wide and 20 pixels high. enter the values and hit enter. The button should resize.

7. Add the text by selection the text tool. THe letter "A" in the TOOL tool bar. Click where you want the text. Don't worry if it is not in the exact position, it will be aligned later. Also don't drag out a text box. Just click and then start typing the label. The text box will expand to fit.
   
   

8. The longest label is "Disclosure" Type that one first then use the property bar to set the properties of the text to make sure it fits and the appearance is appropriate. This text is Ariel, size 16, and white.

9. Let Fireworks line these up with each other. First get both objects selected by using the black pointer to drag around both. With both selected go to "Modify >> Align >> Center Vertical". Also do "Center Horizontal". This ensures the text is lined up right on top of the button. If doesn't look right select the text alone and use the arrow keys on the keyboard to adjust it a little at a time.

10. IF a roll over effect is wanted click the over tab at the upper right of the window. A blank canvas will come up. this is what the button will look like when the mouse rolls over it. Most likely it will look almost identical to the up state with a minor change, maybe the color of the text. Instead of recreating the entire button just hit the "Copy Up Graphic" button.

11. Now the Over state has the original design. Select the text and change the color to black.

Go to Page Two