TUTORIAL 4

Building a Navigation Bar with Fireworks

This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you
can use on multiple pages of your website. A navigation bar—also known as a nav bar—is a series
of buttons that appears on one or more pages of a website. Typically, all the buttons in a nav bar
look the same, except for their text. The finished product will appear at the top of the Trio
Motors website home page that you’re creating.
This tutorial contains the following sections:
“Create a new Fireworks document” on page 140
“Create a button symbol” on page 141
“Create button states” on page 144
“Create multiple button instances” on page 146
“Change button instance text” on page 147
“Assign URLs and names to the buttons” on page 148
“Optimize the navigation bar” on page 149
“Set HTML preferences” on page 150
“Export the document to HTML format” on page 151
“View the exported files in the Dreamweaver Files panel” on page 152
“View the Fireworks HTML file in a browser” on page 153

139
Create a new Fireworks document
In Tutorial 2, “Creating a Table-based Page Layout in Dreamweaver,” you used HTML tables to
lay out your index.cfm page. You also inserted a line break (a space) between the first and second
table. Now you’ll create a new Fireworks document for a nav bar that fits between the two tables.
1 In Fireworks, select File > New.
The New Document dialog box appears.

2 In the Width text field, enter 650, and select Pixels (the default) from the Width pop-up menu.
3 In the Height text field, enter 40, and select Pixels (the default) from the Height pop-up menu.
4 In the Resolution text field, enter 72, and select Pixels/Inch (the default) from the Resolution
pop-up menu.
5 Under Canvas Color, select the White button if it is not already selected.
6 Click OK.
A new Fireworks document appears in the workspace. The canvas is white and is 650 pixels
wide by 40 pixels high.
7 Save the file (File > Save) as navbar.png.
In Chapter 6, “Setup for Sample ColdFusion Site,” you created a folder called png within the
site. When you save the new navbar.png file, save it inside that folder. It is good practice to
keep all your PNG files in a central location.

140 Tutorial 4: Building a Navigation Bar with Fireworks

Create a button symbol
Now you’ll create the first button for the nav bar. You’ll eventually use this button to create all the
other buttons in the nav bar, so you want to make sure that the first button you create is large
enough to contain the text of the longest word or words in the nav bar. In this example the
longest words in the nav bar are Financial Services, so you’ll create a Financial Services button first.
Note: You should be familiar with the Fireworks Tools panel and Property inspector before
proceeding. For more information, see Tutorial 3, “Creating a Banner Graphic in Fireworks,”
on page 131.

1 Make sure that the file you created in the previous section, navbar.png, is open in the
Document window.
2 In the Tools panel, click the Rectangle tool.
3 In the Property inspector, select light blue from the Fill Color pop-up menu. This tutorial uses
a hexadecimal value of #CCCCFF.
4 Drag a rectangle across the canvas as shown.

Don’t worry about the exact size and position of the rectangle. You’ll set its properties in the
next step.
5 With the rectangle still selected, set its stroke, width, height, and x and y coordinates in the
Property inspector.
■ Select white (#FFFFFF) from the Stroke Color pop-up menu.

■ Enter 1 as the stroke value.

■ Select Pencil > Pixel Hard from the Stroke category

■ Enter 131 in the Width text box.

■ Enter 40 in the Height text box.

■ Enter -1 in the X text box.

■ Enter 0 in the Y text box.

Note: If you cannot see the Width and Height text boxes, click the Expander arrow in the lower
right corner of the Property inspector.

Create a button symbol 141

 6 In the Tools panel, click the Text tool.
7 In the Property inspector, do the following:
■ Select a font from the Font pop-up menu. In this tutorial, Arial is selected.
■ Enter 11 as the font size.
■ Select dark blue (#000033) from the Fill Color pop-up menu.
■ Click the Bold button.
■ Click the Center Alignment button.
■ Select Smooth Anti-Alias from the Anti-Aliasing Level pop-up menu.

8 Click once at the center of the blue rectangle.

An empty text block is created.
9 Type FINANCIAL SERVICES inside the text block in capital letters. The width of the text
block expands as you type.
10 Click once outside the text block to apply your entry.
11 Use the Pointer tool to center the text near the top of the rectangle as shown.

Remember that you can also move objects in Fireworks by using the arrow keys on your
keyboard. You can use them to move an object up, down, left, or right, one pixel at a time.
In the example, the x coordinate of the text block is 0 and the y coordinate is 1.
12 Select both the rectangle and the text block by selecting Select All from the Select menu.
13 Select Modify > Symbol > Convert to Symbol.
The Symbol Properties dialog box appears.

142 Tutorial 4: Building a Navigation Bar with Fireworks

14 Type Trio Nav Button in the Name text box, select Button as the symbol type, and click OK.

A slice appears on top of the button graphic, and a shortcut icon appears at the left of the slice.
This indicates that the selection in the workspace is an instance of the symbol you just created.
Symbols are like master copies of your graphics. When you change a symbol, all the instances
of that symbol in your document change automatically. Symbols reside in the library.
15 If the Library panel is minimized, click the word Assets on the Assets panel and click the Library
tab. If the Assets panel isn’t visible, select Window > Library.
Your new button symbol is listed in the Library panel.

Create a button symbol 143

Create button states
Next, you’ll create various states for the button symbol. Button states are the various ways that a
button appears when rolled over or clicked in a web browser.
1 Double-click the button instance that you just created.
Alternatively, you can double-click the preview of the button in the Library panel or the
symbol icon beside it in the Library panel’s symbol list.
The Button Editor opens, with the button graphic displayed in the work area.

2 Click the canvas to make sure that everything is deselected.

3 Click the tabs at the top of the Button Editor.
The first four tabs represent the button states. The last tab, Active Area, represents the hot area
on the button, or the area where a user must click or roll over with a pointer to activate the
button states. The active area is also the swap area for the button, or the area that changes with
each button state. Currently there are no states for the button symbol other than the Up state,
the state of the button before it is rolled over or clicked.
4 Click the Over tab at the top of the Button Editor, and then click the Copy Up Graphic button.
The button graphic is copied from the Up tab. The Over state of a button is the way it appears
when the pointer rolls over it. To give users visual feedback, you’ll change the color of the
rectangle behind the text.

144 Tutorial 4: Building a Navigation Bar with Fireworks

5 Select the rectangle. Be sure that you don’t select the text instead; if you are unsure which one
you are selecting, check the Layers panel (Window > Layers) to see which one is selected.

6 Click the Fill Color box in the Property inspector and select gray (#CCCCCC) as the color.
The rectangle changes to gray.
Note: This is the same web safe color that you chose for one of the table backgrounds in
Tutorial 2, “Creating a Table-based Page Layout in Dreamweaver.” If the color change is not
perceptible enough on your monitor, you can select another color.

7 Click the Down tab at the top of the Button Editor, and click the Copy Over Graphic button.
The button graphic is copied from the Over tab. The Down state of a button is the way it
appears after a user clicks it. This time you won’t change the color of the rectangle; you’ll leave
it as it is.
8 Click Done in the Button Editor to apply your changes to the button symbol.
9 Click the Preview button in the upper left corner of the Document window and test the
button’s states. Turn slices off if necessary. You can turn slices off by clicking the Hide Slices
and Hotspots button in the Tools panel.

Show slices and hotspots button

Hide slices and hotspots button

10 Click the Original tab and turn slices back on by clicking the Show Slices and Hotspots button.

Create button states 145

Create multiple button instances
Next, you’ll create more instances of the button symbol.
1 Select the button in the workspace if it isn’t already selected.
The Property inspector displays button properties.
2 Select Edit > Clone.
A new instance of the button appears on top of the original button.
3 Hold down Shift while pressing the Right Arrow key repeatedly to move the new instance to
the right.
This moves the instance in 10-pixel increments. If necessary, use the arrow keys alone to move
the selection one pixel at a time. Position the instance to the immediate right of the original
instance, but not overlapping, as shown in the illustration below.

4 Clone three more instances of the button, and position each instance to the right of the previous
instance.

Tip: As a shortcut, you can press Alt (Windows) or Option (Macintosh) while using the Pointer tool
to drag the selected instance to make a copy of it. After positioning the new instance to the
immediate right of the previous instance, select Edit > Repeat Duplicate to automatically create
and place another copy of the instance.

5 In the Tools panel, click the Hide Slices and Hotspots button, and then use the arrow keys on
your keyboard to move the buttons one pixel at a time until they are uniformly separated. In
the nav bar in this example, no space exists between the buttons.

Note: With no space between the buttons, the right edge of each button (except the last button)
touches the left edge of the button next to it, giving the appearance of two pixels of white space
between each button. (Remember that the white stroke, or outline, of each rectangle is one pixel.)
The fifth button, like the first button, should be “off” the canvas by a few pixels. That is, there should
be no white space showing at the left or right edges of the canvas.

6 Click the Show Slices and Hotspots button to turn slices back on.

146 Tutorial 4: Building a Navigation Bar with Fireworks

Change button instance text
Now that you’ve created all the buttons for your nav bar, you need to give each button unique
text. You can easily change the text of a button instance by using the Property inspector.
1 Select the button instance at the far left.
Properties for the button instance appear in the Property inspector. With the exception of the
Export Settings pop-up menu, these properties apply to the selected instance only. Making
changes here does not affect the original button symbol in the Library.
2 In the Property inspector, replace the text in the Text box with the word SHOWROOM in
capital letters. Then press Enter (Windows) or Return (Macintosh).
The text on the button changes to reflect your entry.

3 Repeat steps 1 and 2 for the remaining buttons.

■ Enter NEWS & EVENTS for the text of the second button.
■ Enter OWNERS for the text of the third button.
■ Leave FINANCIAL SERVICES as the text for the fourth button.
■ Enter PREVIEWS for the text of the fifth button.

4 Click the Preview tab, turn off slices by clicking the Hide Slices and Hotspots button, and roll
the pointer over the buttons in the nav bar.
The buttons change from blue to gray as you move the pointer over them.
In this section, you used the Property inspector to change the text of individual button instances
without affecting the original button symbol in the Library. If you wanted to change the color of
all the buttons to red, however, you would double-click the original button symbol in the Library,
select the rectangle, change the Fill color to red, and click Done. Updating a button symbol in the
Library updates all instances of that symbol in the document.

Change button instance text 147

Assign URLs and names to the buttons
Next, you’ll assign a unique URL, or link, to each button instance. A URL, or Uniform Resource
Locator, is the address or location of a page on the web. You can easily assign URLs and names to
buttons by using the Property inspector.
1 Select the button instance labeled SHOWROOM and enter your favorite URL in the Link text
box of the Property inspector.

For the purposes of this tutorial, any working URL will do. If you were creating a real website,
you would enter the URL that you wanted the Showroom button to jump to.
Be sure to enter the URL of an actual website, so that you can test your button links later.
2 In the Button text box, type showroom.

Naming each of your button instances makes them easier to identify after they are exported.
3 Assign a working URL and unique name to each remaining button instance.
When you name button instances, don’t use spaces or high ASCII characters (ASCII characters
from 129 to 256, including accents and math symbols, which are not the same on all
computers). For example, you might name the News & Events button instance news_events.
4 Select File > Preview in Browser > Preview in [your preferred browser]. To test button links,
you must preview the document in a browser.
Note: If your browser is not listed, you must first select a browser by selecting File > Preview in
Browser > Set Primary Browser.

Your navigation bar is now complete. In the next sections, you’ll optimize your work and export
the nav bar to your Macromedia Dreamweaver MX 2004 site.

148 Tutorial 4: Building a Navigation Bar with Fireworks

Optimize the navigation bar
Before you export any document from Fireworks, you should always optimize it. Optimizing a
document ensures that a graphic is exported with the best possible balance of compression and
quality.
1 With the navbar.png file open in the Document window, do one of the following to open the
Optimize panel if it isn’t already open:
■ Select Window > Optimize.
■ If the panel is minimized on the right side of the screen, click the word Optimize to view the

entire panel.
2 Click in the Document window outside the canvas to make sure that no buttons are selected.
3 Select GIF Websnap 128 from the Settings pop-up menu if it isn’t already selected.
The options in the panel change to reflect the new setting.

4 Click the Hide Slices and Hotspots button in the Tools panel, and click the Preview button in
the upper left corner of the Document window.
Preview view displays your document as it will appear when it is exported with the
current settings.

In the lower left corner of the Preview window, Fireworks displays the file size of the exported
file and the estimated time it will take to display the graphic when it is viewed on the web.
For more information, see “Optimizing and Exporting” in Fireworks Help.

Optimize the navigation bar 149

Set HTML preferences
HTML, or Hypertext Markup Language, is the primary language used to create and display web
pages on the Internet. You don’t need to understand HTML to use Fireworks, but it helps to keep
in mind that when Fireworks slices are exported, they become cells in an HTML table.
Before you export the document for the first time, you need to set HTML export preferences.
1 Select File > HTML Setup.
The HTML Setup dialog box appears.

The options that you set in this dialog box will affect all future Fireworks documents that you
create, except the options on the Document Specific tab.
2 On the General tab, select Dreamweaver HTML from the HTML Style pop-up menu.
3 Select .htm as the file extension.
4 Click the Table tab.
The Table tab allows you to change HTML table properties.
5 In the Space With pop-up menu, select Single Table, No Spacers.
6 From the Contents pop-up menu, select None.
7 Click the Document Specific tab.
The Document Specific tab allows you to choose a variety of document-specific preferences,
including a customized naming convention for your exported files. Remember that the options
you set here apply only to the current Fireworks document.
Note: You can apply the settings on the Document Specific tab to all new documents by clicking
the Set Defaults button.

8 Select Rollover (over, down, overdown) from the first Frame Names pop-up menu.
9 Click OK to accept the settings on the Document Specific tab and close the HTML Setup
dialog box.
For more information about setting HTML preferences, see “Exporting HTML” in
Fireworks Help.

150 Tutorial 4: Building a Navigation Bar with Fireworks

Export the document to HTML format
Your document is now ready for exporting.
1 Create a folder called navbar inside the images folder of your Trio Motors Dreamweaver site.
2 With the navbar.png file open in the Fireworks Document window, select File > Export.
The Export dialog box appears.

3 Navigate to the navbar folder that you created in step 1. It should be inside the images folder of
the Trio Motors site.
4 Ensure that the File name text box reads navbar.htm, and that the Save As Type (Windows) or
Save As (Macintosh) pop-up menu reads HTML and Images.
5 Ensure that Export HTML File is selected in the HTML pop-up menu and that Export Slices
is selected in the Slices pop-up menu.
6 Select Include Areas without Slices, and make sure that Put Images in Subfolder is not selected.
7 Click Save.
The nav bar files are exported to the navbar folder of your Dreamweaver site.
Remember that the PNG file is your source file, or working file. Although you’ve exported
your document in HTML and GIF format, you must also save the PNG so that any changes
you’ve made are reflected in the source file as well.
8 Select File > Save to save the changes to the PNG file.

Export the document to HTML format 151

View the exported files in the Dreamweaver Files panel
Now you’ll examine the list of files that Fireworks exported. The new files created during the
export process appear in the navbar folder within your Dreamweaver site.
1 In Dreamweaver, select the Trio Motors site in the Files panel.
2 Expand the navbar folder by clicking the plus sign (+) to the left of the folder.
A long list of nav bar files, as well as a navbar.htm file, appear.

The navbar.htm file contains all the HTML code that you will need to insert into your
Dreamweaver page, including the JavaScript code for the various states of the nav bar buttons.
Fireworks also exported graphics files for your buttons. There are several GIF files, including
one for each button state.

152 Tutorial 4: Building a Navigation Bar with Fireworks

View the Fireworks HTML file in a browser
Now that you’ve examined the exported files, you’re ready to test the nav bar in a browser.
1 Open a web browser and select File > Open (Internet Explorer) or File > Open File (Netscape).
Then navigate to the navbar.htm file that you exported to the navbar folder of your
Dreamweaver site.
Alternatively, you can navigate to the navbar folder of your Dreamweaver site from your
desktop and drag the navbar.htm file to an open web browser.
Your nav bar appears in the browser window.

2 In the browser, click the buttons on the nav bar to test the links. If you added live links to the
buttons (such as http://www.macromedia.com), your web browser displays the corresponding
live pages when you click the buttons.

View the Fireworks HTML file in a browser 153

 3 Find and execute the command that lets you view the source code for the page. Most web
browsers let you view the source code with a command such as View > Source.

4 Scroll through the source code. If you know HTML and JavaScript, scan the code that
Fireworks created to see how it works. If you don’t know HTML and JavaScript, you can
appreciate the work that Fireworks has done for you.
Completed versions of the files you created in this tutorial are available in the
trio_motors_complete directory on your Studio MX 2004 CD. To locate the directory, insert
your Studio MX 2004 CD, click Browse CD contents, and select the Samples folder. If you
copied the Samples folder to your hard drive for the previous tutorial, the complete files are
already on your computer.
For more information about any of the procedures described in this tutorial, see Fireworks Help.

154 Tutorial 4: Building a Navigation Bar with Fireworks