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.
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 .