Building a Navigation Bar with Fireworks

Creating 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" in the Exploring Studio MX manual.

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

Figure 2. Rectangle on the canvas

Don't worry about the exact size and position of the rectangle. You'll set its properties in the next step.
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.
Figure 3. Rectangle properties in the Property inspector
Note: If you cannot see the Width and Height text boxes, click the Expander arrow in the lower right corner of the Property inspector.
In the Tools panel, click the Text tool.
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.
Figure 4. Text properties on the Property inspector
Click once at the center of the blue rectangle.

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

Figure 5. Centering the text with the Pointer tool

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.
Select both the rectangle and the text block by selecting Select All from the Select menu.
Select Modify > Symbol > Convert to Symbol.

The Symbol Properties dialog box appears.
Type Trio Nav Button in the Name text box, select Button as the symbol type, and click OK.

Figure 6. The Symbol Properties dialog box

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.
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.

Figure 7. The button listed in the Library panel