Accessibility
 
Edit the Fireworks pop-up menu

Once you've inserted the pop-up menu in your Dreamweaver page, you can edit the pop-up menu and change colors, menu positions, and so forth.

1 Select the Cookies image in the Dreamweaver document window and launch Fireworks by clicking the Fireworks Edit button in the Property inspector.

Alternatively, you can select the entire table that contains your pop-up menu by clicking the <table> tag in the tag selector, then launch Fireworks by clicking the Fireworks Edit button in the Property inspector.
Fireworks launches in Editing from Dreamweaver mode.
2 In your Fireworks document, select the Cookies slice.
The pop-up menu outline appears and the cursor changes from an arrow to the shape of hand.
3 Double-click the pop-up menu outline to open the Pop-up Menu Editor. You will see the information you added at the beginning of this tutorial: Chocolate Chip, Peanut Butter, Oatmeal Raisin, and Dark Chocolate, and URLs for each.
4 Click the Appearance tab or the Next button.
In the Appearance tab you can change the colors and fonts for your pop-up menu. Adjust your settings in the Appearance tab to match those shown in the picture below.

Choose HTML as the cell type and Vertical Menu as the alignment.
Choose Verdana, Arial, Helvetica, sans-serif as the font, and 14 as the font size.
Click the Bold button.
Set the Up State and Over State colors of the pop-up menu. The blue that we have used throughout this tutorial is #000099. The yellow that we have used throughout this tutorial is #FFCF31. You can select these colors from the color palette, or type the exact hexadecimal values in the text boxes at the tops of the color pop-up windows.
Note: Once you change the default colors in the Pop-up Menu Editor, they will be used every time you create a pop-up menu, until you choose other colors.
5 Click the Advanced tab or the Next button.
In the Advanced tab you can change various cell and border properties. Adjust your settings in the Advanced tab to match those shown in the picture below. For now, you'll just change the Border Color, Shadow, and Highlight.

The blue that we have used throughout this tutorial is #000099. You can select the color from the color palette, or type the exact hexadecimal value in the text box at the top of the color pop-up windows.
6 Click the Position tab or the Next Button.
In the Position tab you can specify the position on the screen where the pop-up menu will appear. Coordinates of 0,0 mean that the upper left corner of the pop-up menu will align with the upper left corner of the slice that triggers it. There are also several preset positions you can choose from.
7 Enter 9 in the X Menu position box and 19 in the Y Menu position box.
Note: You can also reposition a pop-up menu by dragging its outline in the Fireworks workspace.
8 Click Done in the Pop-up Menu Editor.
9 Click Done in the Fireworks file.

Fireworks saves your work and returns focus to Dreamweaver. When you save your Dreamweaver document and test the file in a browser, the edits you made in Fireworks appear in the pop-up menu.
Now that you've created, exported, and edited a pop-up menu for the Cookies graphic, you can go back and create pop-up menus for the rest of the graphics in the sample file. A complete version of the pop-up menu is available on the contents page of this tutorial. The download source files also include the complete PNG file.

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