|
Create a button symbol
The first step in making a navigation bar is creating a button symbol. Here you will use an existing graphic to create a button symbol, and then you'll create button states. You will also assign a default URL and Alt text to the button symbol.
Convert an object into a button symbol
A graphic for the button has already been created for you. You'll convert that object into a button symbol.
| 1 |
In Fireworks MX, choose File > Open. |
| 2 |
On your hard disk, navigate to the nav_buttons folder that you downloaded. |
| 3 |
Inside the Start folder, select navbar.png and click OK. |
|
The file opens in the document window. |
| 4 |
Click the object on the canvas to select it. |
| 5 |
Choose Modify > Symbol > Convert to Symbol. |
|
The Symbol Properties dialog box opens. |
| 6 |
Enter My Button in the Name text box, choose Button as the Type.
 |
| 7 |
Click OK. |
|
An instance of the button symbol you created appears on the canvas.
 |
|
The small arrow icon displayed in the lower left corner of the object indicates that it is an instance. The instance also has a green slice on top of it. |
|
Note: If you don't see the slice, ensure that slices are turned on by clicking the Show Slices and Hotspots button in the Tools panel.
 |
| 8 |
Choose Window > Library to open the Library panel if it's not already open. |
|
The button symbol you created appears in the symbol list, and a preview of the symbol appears in the preview area.
 |
| 9 |
Double-click the button symbol preview in the Library panel. |
|
The Button Editor opens with the button symbol displayed. The center of the button symbol aligns with the cross hairs in the work area. Fireworks centered the object for you when you converted it to a button symbol.
 |
 |
|
Create the Over state for the button
When you convert an object to a button symbol, the object is placed on the Up tab of the Button Editor. The Up state for a button is its normal state, or its appearance before it is rolled over or clicked by a visitor on a web page.
If you view the other tabs of the Button Editor, you'll discover that the other button states are empty. This enables you to create a button with as many or few states as you desire, and customize the appearance of each.
In this and the following sections you'll create the remaining states for the button symbol: Over, Down, and Over While Down.
| 1 |
With My Button still open in the Button Editor, click the Over tab. |
|
The Over state is the way a button will appear when a visitor moves the pointer over it in a web browser. Currently there is no Over state for the button. |
| 2 |
Click the Copy Up Graphic button. |
|
A copy of the Up state graphic is copied onto the Over state tab. |
|
You can make changes here to the color, shape, or size of the graphic, and those changes will not affect the Up state. You can even make changes to the text color, font, and other text attributes without affecting the Up state. |
| 3 |
Select the button text in the work area of the Button Editor. |
| 4 |
If the Property inspector isn't visible, choose Properties from the Window menu. |
| 5 |
In the Property inspector, click the Fill Color box.
 |
|
The color pop-up window appears. |
| 6 |
Click the hexadecimal value in the text box at the top of the color pop-up window to place the insertion pointer there. Double-click to highlight the text, then type FFFF66 and press Enter to apply the new color.
 |
|
The text color on the button symbol changes to pale yellow. |
| 7 |
In the Property inspector, type 36 as the value in the Kerning box, and press Enter. Kerning is located just below the Font pop-up menu.
 |
|
Kerning adjusts the spacing between letters. Setting kerning to a higher value inserts more space between letters, while lowering the kerning value reduces the amount of spacing between letters. |
| 8 |
Select the button graphic in the work area of the Button Editor. Be sure to select the button graphic and not the text. If you aren't sure, click the Rounded Rectangle object in the Layers panel. |
| 9 |
If the Property inspector isn't displayed at full height, click its expander arrow in the lower right corner to expand it to full height.
 |
|
The button graphic has Live Effects applied to it, displayed in the Effects list at the bottom right of the Property inspector.
 |
| 10 |
Double-click the name for the Inner Bevel effect in the list, or click the info button beside the effect name. |
|
A pop-up window appears displaying options for the Inner Bevel effect.
 |
| 11 |
Click the arrow beside the Button Preset pop-up menu at the bottom of the pop-up window, and choose Highlighted from the menu.
 |
|
The appearance of the button graphic in the work area changes to reflect your selection. The Button Preset pop-up menu enables you to quickly change the appearance of a graphic so that you can easily create button states. |
| 12 |
Click outside the pop-up window to close it. |
|
|
Create the Down state
Here you will create the Down state for the button. The Down state is the way a button appears after a visitor clicks it in a web browser.
| 1 |
With My Button still open in the Button Editor, click the Down tab. |
| 2 |
Click the Copy Over Graphic button. |
|
A copy of the Over state graphic is copied onto the Down state tab. |
|
The Include Nav Bar Down state option near the top of the tab is automatically selected for you. This behavior enables you to create a button that behaves similarly to a push button of an old car radio. When one button is clicked, it stays depressed until another is clicked. Adding this behavior to buttons provides visitors with a navigational clue about where they are within a site. |
| 3 |
Select the button graphic in the work area of the Button Editor, and be careful not to select the text. |
|
For this state, you will simply change the button graphic's appearance and leave the text as it is. |
| 4 |
In the Effects list in the Property inspector, double-click the Inner Bevel effect, or click the info button beside the effect name. |
| 5 |
Choose Inset from the Button Preset pop-up menu and click outside the pop-up window to close it. |
|
This gives the button the appearance of being depressed. Notice that the Drop Shadow effect is still applied, however. Deleting or disabling this affect will give the button a more realistic depressed appearance. |
| 6 |
In the Effects list in the Property inspector, click the checkmark symbol beside the Drop Shadow effect.
 |
|
The checkmark changes to an X. This indicates that the effect and any custom settings you may have applied are disabled, but preserves both in case you want to reapply them later.
 |
|
Note: Clicking the Delete Effect button is another way to remove an effect, but doing so removes it from a selected object permanently. |
|
|
Create the Over While Down state
Here, you will create the Over While Down state for the button. The Over While Down state is the way a button will appear if a visitor rolls the pointer over it after it has been clicked in a web browser.
| 1 |
With My Button still open in the Button Editor, click the Over While Down tab. |
| 2 |
Click the Copy Down Graphic button. |
|
A copy of the Down state graphic is copied onto the Over While Down state tab. |
| 3 |
Select the button graphic in the work area of the Button Editor, and be careful not to select the text. |
|
For this state, you will change only the button graphic's appearance and leave the text as it is. |
| 4 |
In the Property inspector, double-click the Inner Bevel effect in the Effects list, or click the info button beside the effect name. |
| 5 |
Choose Inverted from the Button Preset pop-up menu. This is how the button will appear when visitors move the pointer over it in its depressed state. |
|
|
Assign a default URL and Alt text
Now that you've created the states for the button symbol, you'll define a default URL. This is the default URL that will be assigned to all new instances you create from this symbol. You will change this URL for each instance later. This feature is helpful if the URLs you will assign to the button instances later have a common root, so you wont have to retype it each time.
| 1 |
With My Button still open in the Button Editor, click the Active Area tab. |
|
A slice appears over the button symbol in the work area. This is the active area for the button. A button's active area is its "hot" area, or where a user must click or roll over to activate the button states.
 |
|
The Set Active Area Automatically option is checked by default. When this option is checked, Fireworks generates a slice in approximately the same size and location as the button graphic. You can resize or move the slice if desired. Moving the slice will deselect the Set Active Area Automatically option. You can choose it again if desired, and Fireworks will reset the active area to its original size and location. |
| 2 |
Select the slice. |
|
Slice options appear in the Property inspector.
 |
| 3 |
Type http://www.macromedia.com in the Link box. This link will be assigned to all new instances you create from this symbol. Changing this link later will not affect existing instances if you have already assigned other URLs to them. |
| 4 |
Type button in the Alt box, and press Enter. This Alt text will be assigned to all new instances of the symbol. Changing it later will not affect existing instances if you have already assigned Alt text to them. |
|
Alt text, or alternative text, is an important part of web design. If a visitor's connection is slow, Alt text will display as a placeholder for each of the graphics on your web page as they download. Alt text is also important for accessibility. Visually-impaired visitors may browse your website using a screen reader that converts text and Alt text to a computer-generated voice. If you don't include Alt text for your graphics, the screen reader won't be able to identify them in a meaningful way. |
| 5 |
Click Done to close the Button Editor. |
|
|
|
