Navigation Symbols

This tutorial is to show you how to make navigation buttons into one symbol. You can then drag the symbol as one unit into a layout. Another advantage is that you can then insert this into Dreamweaver including the code for your rollovers.

This is not using the nav bar behavior. The nav bar behavior is when you press a button it remains depressed or in the down state on the page that loads. See the Nav Bar tutorial for that.

To insert your nav symbol into a Dreamweaver page, see the "Using Fireworks Navigation in Dreamweaver" tutorial.

You can use any button you'd like for this tutorial or you can download the goldbutton.png file used in this tutorial.

If you don't know how to use the Button Editor then refer to the "Using the Button Editor" tutorial. It's written for Fireworks 4 but little has changed as far as the Editor is concerned.

This tutorial starts with a completed button symbol. To make a navigation symbol, follow these steps:

We are not doing an entire site design in this tutorial just the button and navigation portion. All you you'll need to do to a design is place your button symbol/symbols in place prior to this tutorial.

Note: To make additional buttons, simply drag another instance from the Library onto your document. Or press the Alt key and drag another copy out. To change the text, select it and change the name in the Property inspector. This is also where you change the link.

So you now have either a horizonal or a vertical row of buttons. here is a picture of what I'm starting with.

1. From the main menu, choose Edit|Insert|New Symbol.

2. In the Symbol Properties dialog box, name it gold_btn and choose Graphic for the type, click OK.

3. Shift+select each of your button symbols from the current document and paste into the symbol editor.

4. Close the Symbol Editor. You now have a new symbol in your document. This can be inserted now all at one time.

5. If you have the original buttons in your document, you can delete them now. Move the new symbol into place. The symbol looks like this:

If you haven't yet changed the names of the buttons like I haven't then you'll need to edit the symbol.

6. Double-click on the symbol in your document to re-open the Symbol Editor.

7. Select the second button. In the Property inspector change its name to Products. Also add the link and the Alt text. This image shows the Symbol Editor open, the second button selected and the Property inspector with the text changed and settings made.

8. Repeat for the remaining buttons then close the editor. The text is much too large. You can now edit the button symbol itself and it will affect each of the buttons within the navigation symbol.

9. Open the Library panel and double-click on the button symbol (not the nav symbol).

10. Select the text and change the size to 14 and press the down arrow on your keyboard 2 times. Repeat for the over and the down states. Close the editor.

11. That's all there is to it. You made a change on one button symbol and all are affected as seen here:

Export

Normally I'll export each of my sliced images for the layout and place them into Dreamweaver. The navigation is then exported as a separate image including the HTML. This way the rollovers stay in tact and don't have to be recoded in Dreamweaver.

1. If your buttons are in a layout design (or even in a separate document) then select the Export Area tool (its in the Crop tool fly-out).

2. To help in determining the export area, set up some guides. Be sure the rulers are visible (View|Rulers). Then choose View|Guides|Snap to Guides and be sure it is checked.

3. Drag a guide from the top ruler and place so it goes just below the dotted line of the symbol. Repeat for the other sides of the symbol.

Note: Try to get the export area right up to the edges of your buttons. When you export images and HTML a table will be made and any additional space around the button will be an additional image.

4. Use the Export Area tool to draw the selection. You can drag on the handles to fit into the area you defined with the guide lines.

5. When your area is defined then double-click to open the Export Preview dialog box. You'll see your symbol in the preview area. If any of the lines of the buttons are cut off then click on Cancel and adjust the guides. Or if you see the background color around the edges, click on cancel.

If your area is defined just right, then skip to step 8.

6. If you are off by a pixel or two the easiest way to move a guide line is to double-click on it and change the position.

7. Draw a new area with the Export tool and double-click again.

8. In the Export Preview dialog box,l make your optimization settings.

9. Click on the Export button when you are ready to export. The Export dialog box will open.

10. Navigate to the site folder that you want to export into. Normally I make a separate folder in the site root to export the navigation into.

11. From the Save as Type be sure that HTML and Images is selected.

12. In the Slices field be sure that Export Slices is selected.

13. Be sure that "Include Areas without Slices" is checked.

14. Click the Save button.

The navigation symbol is now ready to insert into a Dreamweaver layout. See the "Using Fireworks Navigation in Dreamweaver" tutorial.

If you'd like to write the email is:Joyce@JoyceJEvans.com