Home > Products > Dreamweaver > Support > Working with Studio MX
Dreamweaver Icon Macromedia Dreamweaver Support Center - Working with Studio MX
Create a button symbol

Now you'll create the first button for the nav bar. You'll eventually use this button to create all of 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 in the nav bar. In this case, the longest word in the nav bar is "Publications," so you'll create a Publications button first.

Note: You should be familiar with the Fireworks MX Tools panel and Property inspector before proceeding. For more information, see Wildlife Project 9: Creating a Fireworks MX banner graphic.

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 a tan color from the Fill Color pop-up menu. For this tutorial, we've selected a hexadecimal value of #996633.
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 width, height, x and y coordinates, and stroke in the Property inspector.
Enter 100 in the Width text box.
Enter 22 in the Height text box.
Enter 1 in the X text box.
Enter 1 in the Y text box.
Select tan (#996633) from the Stroke Color pop-up menu.
Enter 1 as the stroke value.

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

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. For this tutorial, we've selected Palatino Linotype.
Enter 12 as the font size.
Select white from the Fill Color pop-up menu.
Click the Bold button.
Click the Center Alignment button.
Select Strong Anti-alias from the Anti-Aliasing Level pop-up menu.

8 Click once at the center of the tan rectangle.
An empty text block is created.
9 Type the word PUBLICATIONS 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 inside the rectangle as shown.

Remember that you can also move objects in Fireworks by using the arrow keys on your keyboard. Using the arrow keys on your keyboard allows you to move an object up, down, left, or right, one pixel at a time.
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.
14 Type Wildlife 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 of the instances of that symbol in your document change automatically. Symbols reside in the library.
15 If the Library panel is minimized, click the Assets panel expander arrow 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.

To Table of Contents Back to Previous document Forward to next document