A navigation bar—also known as a nav bar—is a series of buttons that appears on one or more pages on a Web site. Typically, all the buttons within a nav bar look the same, except for text identifying where clicking each button takes you.

In Macromedia Fireworks 4, you can easily create a navigation bar by making a button symbol with text in the Button Editor and then copying as many instances of the button symbol as you need in your nav bar. Then you can select each button instance and change the text on all button states simultaneously from the Object panel. The Fireworks 4 tutorial in Using Fireworks and in Fireworks Help demonstrates how to do this.

One result of using the simple method described above is that you create a new symbol upon changing the text of each button instance. Thereafter, if you want to change the look of your buttons, you must edit each individual button symbol.

This tutorial shows you how to take button-symbol nav bars one step further. By nesting a button symbol representing all the non-text characteristics into another button symbol that includes text, you can maintain full control of the graphical characteristics of all your buttons by editing only one symbol.

Note: Because this procedure uses nested buttons, which will produce overlapping slices, it is not recommended for use in Fireworks 3. To find out more about how to create buttons and build nav bars in Fireworks 3, please see Using the Button Editor in Fireworks 3 (TechNote 14302) and Building a Nav Bar in Fireworks 3 (TechNote 14306).

This tutorial is intended for advanced Fireworks users. Before you begin, preview the HTML page you'll create.

You'll perform the following tasks to create an advanced nav bar:

Draw an object

Convert your object into a button symbol

Nest the button symbol

Add text

Create multiple buttons

Specify unique text and URLs for each button

Modify your nav bar

Preview the completed nav bar

Tonya Estes Tonya Estes writes documentation and tutorials for Fireworks and FreeHand. 6/12/01 Fireworks, Fireworks 4, navigation bar, nav bar, button, nested symbol, Button Editor, tutorial