|
|
 |
| Macromedia's Fireworks 4: Has a great new feature for building "pop up menu's" like the one illustrated below. In this tutorial we will look at the technique used to build this pop up, and explore some customisation options. Roll your cursor over this button.
1/ First open Fireworks 4, hit "File > New" and create a blank work sheet. Then either import an image ( as we did with the meet the chef button) or create a button using the Fireworks drawing tools. Now is also a good time to sort out your background colour and crop your image to suit it's final destination.
2/ Before you can create your pop up menu, the image must be converted to either a "slice" or a "hotspot". Click on the image to ensure it is selected (surrounded by a blue line) hit "Insert" from the menu bar and click on "Hotspot". You will see that the image is now masked in blue.
3/ Once again, click on "Insert" from the menu bar and then click "Pop Up Menu". The "Set Pop-Up Menu" box will appear (fig 4) This is where we enter the names that will appear in our menu. As you can see, I have typed the name "Fred" in the text box and in the link box I have typed "fred.htm" which is the page I am linking to. If I were using frames, I could use the "Target" box to specify which frame the linked page should open in. (Note - if you ARE using frames you must remember that your pop up menu will only "pop up" within the confines of the frame it is loaded into ..... IT WILL NOT CROSS OVER INTO ANOTHER FRAME) Pressing + writes the entered info to the large box and clears the text and link boxes for the next entry.
4/ As you can see below, I have entered the names of
my "chefs" and have added a section for "Assistant
Chefs". From the "Assistant Chefs" section I
am going to build a sub menu. To do this, I add the name of my first assistant
(Andy) and click on the name to highlight it. I then click on the sub
menu icon
5/ Supposing that I now wanted a sub menu to run from the "Charley The Chef" box. No problem, simply enter the name you want in the normal way, drag it up so that it appears below Charlie's box, highlight it and hit the sub menu icon. Once you have all your names and links entered, click "Next" at the bottom of the box.
6/ This is where you get to choose the colour scheme for you text and background. You can also set up the font and text size. The normal warnings about using unusual font faces apply. At the top of the page you will see radio buttons labelled "HTML" and "Image". Our pop up is being built using the HTML setting. If you click on the Image button, you will be presented with a selection of images that you can use in your pop up. Try them out. Once you are happy, click "Finish".
7/ You are now presented with a layout view of your finished pop up menu. You can preview the final product in a browser by pressing the "F12" button on your keyboard. You can also move the position of the pop up box by using the white arrow tool and dragging the box to a new position on your page. To save the graphics and code of your pop up ( for later copy and pasting to your web site) select "File" > "Export" and save your work as HTML and Graphics.
8/ When you copy and paste the code generated in Fireworks to another web page, it is quite possible that the pop up menu will not appear exactly where you want it to. Go into the JavaScript that you pasted into the Body of your page and alter these settings (highlighted in red) <script language="JavaScript1.2">fwLoadMenus();</script> These two numbers control the horizontal and vertical position of your pop up. If you have any problems with the positioning of the "Hotspot" over your button graphic, you can re-align it using Dreamweaver's image map facility.
|
 |
|
|
Advertise
| Submissions
| Privacy Policy |
