Topics in Desktop Graphics - (CPTR240) - Lectures  

Arranged and adapted by: David Siguelnitzky -

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, create a new Dreamweaver document by choosing File > New, selecting Basic Page and HTML in the General Tab category windows, and clicking Create. Save the file as mypopup.html.

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.

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.

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.

Export the pop-up menu as HTML

When you export a pop-up menu as HTML, Fireworks automatically generates the JavaScript necessary to display it in a web browser. You can then easily insert the JavaScript and HTML code into your Dreamweaver pages, or you can cut and paste the code into any HTML file.

1. With popup.png open in Fireworks, Choose File > Export (the Export dialog box appears)

2. In the Save in pop-up menu navigate to the desired folder in your Dreamweaver site.

3. Choose HTML and Images from the Save as Type pop-up menu. (This should be the default setting.)

4. Choose Export HTML File from the HTML pop-up menu. (This should be the default setting.)

5. Choose Export Slices from the Slices pop-up menu. (This should be the default setting.)

6. Choose Put Images in Subfolder. This is an optional setting, but it is a good idea to keep your exported images in a separate folder. Export your images to a separate folder in your Dreamweaver site called images.

7. Click Save.

Fireworks exports the pop-up menu as HTML to your Dreamweaver site.

Notice that a JavaScript file called mm_menu.js is exported to the same location as the HTML file containing your pop-up menu. When you upload your files, you should always upload mm_menu.js to the same directory location as the web page containing the pop-up menu. If you want to post the file to a different location, you must update the hyperlink referencing mm_menu.js in the Fireworks HTML code to reflect the custom location. If your document contains several pop-up menus, or you have several documents with pop-up menus, Fireworks does not create extra mm_menu.js files; only a single file is used for all menus in all documents.

For more information, see "Exporting from Fireworks" in Fireworks MX Help (Help > Using Fireworks > Optimizing and Exporting).

Source: David Jacowitz and Gary White - Macromedia FIREWORKS MX (2004) - http://www.macromedia.com/support/fireworks/tutorial_index.html