FireWorks MX--Pop-Up Menu

Macromedia Products are large programs. It is recommended that you buy a comprehensive user's guide along with the software, if a manual is not included with your program. These instructions are for one possible exercise in Fireworks.

I. New File

• Click on File and then New.
• Type in Width: 700 pixels
• Height: 500 pixels
• Resolution: 72 pixels/inch
• Choose  canvas color, considering "transparent" if you will be layering this over a colored webpage. However, jpeg compression doesn't support transparency, so you'll need to save this as a gif format. If you prefer jpeg, then try to match the canvas color to your webpage background.

II. Import Image

• Click on File and then Import. Browse through your local computer to find an image. Click Open.
• Then drag your cursor, which will have turned into a icon of a corner, from the upper left hand part of the screen to the lower right hand. Make it as large as you like.
• Then you may grab the center of the image and drag it whereever you want.
• If you put your Select Tool on one of the corners of the image box, you may resize it.

III. Menu Background

• Click under Colors, on the Tool menu on the color square by the pail. Choose any color
• Click on the rectangular marquee tool under Vector tools.
• Draw a long rectangle at the top of your page, above the image.

IV. Menu Text

• Click under Vector Tools, the text tool which looks like an A.
• Change color, size, font, etc. in the Properties Window.
• Position it whereever you'd like and begin typing a general term for a drop-down menu item.

V. Create the Pop-up Links

• Under Web Tools choose the Hotspot Tool. Draw a rectangle over one of the text terms in your menu.
• Open Window and then Behaviors. The Behavior window appears and so click the plus sign on it. Scroll down to Set Pop-up Menu.

• In the new box, type in the link names under Text, adding new lines with the + sign.
• Under Link, put in the URL or web address where the link will lead to.

• Click on the Appearance tag and choose either html or image to change the look of the links. Advanced and Position tabs will also change the looks.

• With the Select Tool, position the pop-up links whereever you'd like them to show.
• Repeat Steps 1-6 for the other text items in your menu.

VI. Export

Under File, choose Export (so you can save this in a format suitable for bringing into Dreamweaver.)

• Save as Type: HTML and images
• HTML: Export HTML file
• Slices: None

• Under File, click Preview in Browser and test .