Building Web Sites All-in-One For Dummies® (59 page)

15.
Click the Back button to return to the main window.

The button is added to your design.

Creating buttons with pizzazz

Two-state buttons work great for most Web sites. However, if you want to kick the button up a notch, you can include two more states:

•
State 3:
The graphic that's displayed on the down stroke of a mouse click.

•
State 4:
The graphic that's displayed when a user moves his cursor over a button that is part of a navigation (nav) menu and the page linked to the button is displayed.

To create a multistate button, repeat Steps 1–15 in the preceding steps for creating a simple two-state button, and then continue with these steps:

1.
In the Copy to States dialog box, select the All States radio button and then click OK.

You have a carbon copy of the shape and text in States 2, 3, and 4.

2.
Select State 2 in the States panel and then modify the graphic.

As a rule, we change the button and/or text button depending on the site design and the client.

3.
Modify the graphic in State 3 and 4.

What you do to the shape and text is a matter of personal taste — yours or your client's.

4.
Click the Back button to return to the main window.

The button is added to your design (see Figure 3-8).

Creating a Navigation Menu

A
navigation menu
is nothing but a collection of buttons all lined up neatly horizontally or vertically. You can do all the grunt work in Fireworks and then add the menu to an HTML document you're creating in Dreamweaver. Talk about your applications that play well with others!

To create a vertical navigation menu, follow these steps:

1.
Create a new document in Fireworks.

The document dimensions are the width and height of the area in which the menu appears in your HTML design.

2.
Create a single button.

If you fast-forwarded to this section, please rewind to the “Creating Buttons in Fireworks” section of this chapter.

3.
Select the button with the Pointer tool.

4.
Hold down the Alt key (Windows) or Option key (Mac) and drag down.

This creates an instance of the button. After you start dragging, hold down the Shift key to constrain the motion vertically.

5.
Release the mouse button when the instance is aligned to the bottom of the previous button.

Objects in Fireworks have a magnetic attraction to each other. The button actually snaps to the bottom of the button above it.

6.
Repeat Steps 4 and 5 to flesh out your menu.

At this stage, you have a column of buttons with the same title. (See Figure 3-9.) Not to worry; you'll give each button its own identity in the following steps.

7.
Select the first button in your menu. If the Property inspector isn't already open, choose Window
⇒
Properties.

8.
In the Property inspector, enter the following parameters:

Link:
The URL to the page that opens when the button is clicked.

alt:
The alternative text that's displayed in screen readers. alt text is also used by search engines when indexing a site. Certain browsers, such as Internet Explorer, display alt text as a tooltip when a user pauses her cursor over the button.

Target:
The target window in which the linked page appears. In most instances,
_top
is the proper choice. Your options are

•
_blank
: Displays the document in a new and unnamed browser window.

•
_parent
: Displays the document in the parent window currently displaying the frame.

•
_self
: Displays the document in the same window or frame as the link.

•
_top
: Displays the document in the body of the current window. This option ensures the document called by the form action displays in the full browser window, even if the document was originally displayed in a frame.

Show Down State on Load:
Shows the button's Down state when the page to which the button is linked loads.

9.
Select the second button. If the Property inspector isn't already open, choose Window
⇒
Properties.

You modify parameters for each button, but you perform one extra step for each button other than those on the home page.

10.
Type the title of the button in the Text field. (See Figure 3-10.)

This changes the text that displays on the face of the button.

11.
Use the Property inspector to modify the other parameters of the button.

12.
Repeat Steps 9 through 11 for the remaining buttons.

The finished menu is shown in Figure 3-11.

You can design horizontal navigation menus in the same manner. Create a document that's the height of your button. The width of the document is the button length multiplied by the number of buttons. After you create the first button, use Alt (Windows) or Option (Mac)
to drag the button right while you hold down the Shift key to create an instance of the button.

Creating a Pop-Up Menu

If you have a lot of pages to link to but only a limited amount of space, a pop-up menu is the obvious choice. A
pop-up menu,
um, pops up (hence the name) when a site visitor pauses his cursor over the button that triggers the pop-up menu. (That's right, Roy —
triggers.
) You might be thinking doomsday thoughts like JavaScript code, but you'd be only half right. A pop-up menu created in Fireworks uses JavaScript to create its magic. However, Fireworks writes all the code. To create a pop-up menu, follow these steps:

1.
Use the Pointer tool to select the button to which the menu will be attached.

A white button appears in the middle of the button. This signifies that you can add interactivity to the button. When you create a button, Fireworks creates a slice that conforms to the size of the button. The slice is saved as an image when you export your menu.

2.
Click the white button.

A menu appears with a list of interactive behaviors you can add to the button. (See Figure 3-12.)

3.
Choose Add Pop-Up Menu.

The Pop-Up Menu Editor appears. (See Figure 3-13.)

4.
Enter the Text, Link, and Target for the item.

The Text is the button label, the Link is the page to which the button links, and the Target is the window in which the linked page opens. If you're not familiar with targets, check out the earlier section, “Creating a Navigation Menu.”

5.
Click the plus sign (+) to add another item to the menu.

Fireworks adds blank fields for the button's Text, Link, and Target. Alternatively, you can press Tab to add another item to the menu.

6.
Repeat Step 4 for this button.

7.
Continue adding the other items to your pop-up menu.

Figure 3-14 shows a pop-up menu with several items.