Create a basic pop-up menu

Before you begin creating your pop-up menu, make sure that you have set up your Dreamweaver workspace. (You will later be exporting the pop-up menu to Dreamweaver.) If you haven't already defined a site in Dreamweaver, then do so now by choosing Site > New Site in Dreamweaver, and either following the steps in the Site Definition Wizard, or Setting your site definitions manually in the Advanced tab. For more information, see "Setting up a Dreamweaver site" in Dreamweaver Help (Help > Using Dreamweaver > Dreamweaver Basics > Planning and Setting Up Your Site).

You should also create an empty folder called images in your Dreamweaver site. You will use this folder later when you export the Fireworks pop-up menu to Dreamweaver in the form of HTML.

Lastly, you need to make sure that Fireworks MX is set as your external image editor for GIF files. You can check this setting by choosing Edit > Preferences in Dreamweaver, clicking File Types/Editors in the Category column, and clicking .gif in the Extensions window. For more information, see "Setting external image editor preferences" in Dreamweaver Help (Help > Using Dreamweaver > Adding Content > Inserting Images > Reference).

Now you'll create a basic pop-up menu.

1 In Fireworks, open the sample file popup.png.

The sample file contains textual images upon which you will build your pop-up menus. The file also contains Fireworks slices over the images. Slices are the basic building blocks for creating interactivity in Fireworks MX. They are web objects that exist not as images, but ultimately as HTML code. Pop-up menus cannot attach to images alone; they can only attach to Fireworks slices or hotspots.
For more information, see "Slices, Rollovers, and Hotspots" in Fireworks MX Help (Help > Using Fireworks).
2 Select the slice covering the Cookies graphic.
3 Choose Modify > Pop-up Menu > Add Pop-up Menu.
The Pop-up Menu Editor appears.

4 Double click the text box in the Text field (Windows only).
5 Type Chocolate Chip in the text box and press Enter.
The next text box is highlighted, ready for you to create another entry.

6 Type Peanut Butter and press Enter.
Create two more entries for Oatmeal Raisin and Dark Chocolate.
7 Double-click the text box in the Link column for the Chocolate Chip entry.
8 Enter a working URL of your choice and press Enter.
For the purposes of this tutorial, any URL will do. Be sure that it's an actual URL so that you'll be able to test your links later.

9 Enter URLs for the remaining entries.
Note: There is always one extra line at the bottom of the entry list in the Pop-up Menu Editor. It's there so you can easily add new entries without having to click the Add Menu button.
10 Click Done to close the Pop-up Menu Editor.
In the workspace, an outline of your pop-up menu appears attached to the slice.

11 To test your pop-up menu, choose File > Preview in Browser > Preview in [your preferred browser]. Your pop-up menu appears in the browser window.
Note: Pop-up menus must be previewed in a browser; they aren't visible using the Preview tab in Fireworks.
Run your cursor over the Cookies graphic to test the pop-up menu. At this stage, the pop-up menu won't look exactly the way you want it to look. You'll change that later when you edit the pop-up menu from Dreamweaver.

To Table of Contents Forward to next document