Using Fireworks to Create Buttons and Menu Effect

Disjoint Rollovers
Disjoint rollovers are created when one object, the trigger, is designed in such a way as to make another object, the target, appear. Disjoint rollovers can be created for both simple effects, such as having an additional explanation appear when a button is rolled over, to designing an entire page that uses disjoint as their basis.

In this exercise you'll build a fairly complex rollover, using three buttons that will make text appear in the center of the document. Once you get the hang of it, disjoints are lots of fun to make, and they can add a great look to a web page. You can see the finished product for this exercise by clicking here.

• To begin this project, create a new Fireworks document that is 400 wide by 120 high. Save your document with the name "disjoint.png".
• In the document, create three buttons, each 100 pixels wide and 40 pixels high, as you see below. Make usre you hit the enter key after entering the information. Also, if the ruler is not visiable, click View>Rulers. In this case, the Info panel has been used as away of controlling the size of the buttons precisely. The buttons have also used one of Fireworks pre-built styles (from the Styles panel) to give them a bevel. To open the Styles pallete, click Windows>Styles.

• Next, add the following text to the buttons: Products, Services, and Contact. You can position the text by eye, or drag a guide from the ruler area to align the text properly. In the example below, Verdana has been set as the font, with a size of 12.

Tip: Shift-click to select all of the text boxes and choose Modify | Align | Distribute Heights to line up your text boxes equally from top to bottom.

This provides the first part of the disjoint rollover--the three triggers that will activate the image in the other part of the document. Since we also want the buttons to have a simple rollover behavior, we'll need to take a few additonal steps to prepare the document. Next stop, the Frames panel.

• To create a simple rollover behavior, the objects in Frame 1 need to be copied to Frame 2. Fireworks makes this easy. Just open the Options menu in the Frames panel by clicking the arrow in the upper left corner, and choose Duplicate Frame. Set the number of frames to be duplicated to 1 in the pop-up window that appears. The objects on Frame 1 will be duplicated to Frame 2, ready for some modification to create the rollover effect.
  
• With Frame 1 duplicated, apply an effect to the objects in Frame 2 so that their appearance will change when the viewer mouses over the buttons. In this case, a text style has been applied from the Styles panel to the text objects, just to keep things simple. Make sure you are in Frame 2 and that you select the text (a blue box will surround the word) on each button, then select one of the text styles in the styles panel.
  

• With that step done, the next task is to add some additional frames to the document. This time, we want those frames to be empty, because we'll be adding the text that will appear when the buttons are rolled over. So, with three buttons, we need to add three more frames. Once again, click the arrow in the upper left corner of the Frames panel, and this time choose Add Frames. Set the number of frames to three, and again, add them at the end of the set of frames. When you're finished you will have 5 total frames, two for the buttons and three for the text objects that will appear.
• The final steps for creating the objects for this image require some bouncing around between the frames in the image. If you're not sure how to do this, just click on the frame by name and see how your canvas appears. Frame 1 has your "Up" buttons, Frame 2 has your buttons as they'll appear when the mouse passes over them, and the final three frames are empty. Go ahead and name the frames as shown below. To rename a frame, simply double click frame 1, frame 2, etc, and then key in the new frame name. All set? Good. Let's move on.

• Frame 3 (labeled Products) will hold the text that will appear when the "Products" button is activated. It's important that the text we'll create doesn't intrude on the buttons themselves, so it's a good idea to drag a guide from the ruler and position it just to the right of the buttons. You'll need to jump to Frame 1 or 2 to do this, but the guide will appear in all the frames.
• Making sure you're in Frame 3 (Products), add some text to the area to the right of your button area. You can use the text below as a guide.

• Wrap up this portion of the exercise now by adding additional text in Frame 4 (Services) and Frame 5 (Contact). You can see the finished product here and copy the text for you additional frames from there. See the sample above or make up your own descriptors.
• That completes our set up. Now it's time to move on to adding the slices and behaviors that will make this image work.
• Slices are web objects that allow an image to be broken into an HTML table. They are really at the heart of this effect, since they allow Fireworks to generate the JavaScript that controls the appearance of the image. Not to worry, this is automatic and only involves a few more steps to finish things up.
• Go to Frame 1, and select the top button on the canvas (Products). From the menu bar, choose Insert | Slice. You will see a green overlay appear over the button, and red lines that define the portions of the HTML table that Fireworks is generating. These overlays won't appear in the final document--they are there as a reference only. Continue adding slices to the two additional buttons until all three have slices applied.

Tip: Use the Layers panel to make it easier to select the different objects on your canvas. Once you begin adding slices it can often become a little tricky when you're trying to select graphics. Just look for the thumbnail of the graphic, select it, and then insert the slice.

• The last slice for this image goes immediately to the right of the buttons. Use the Slice tool from the Tools panel to draw this one out, being careful not to leave any space between the slices over the buttons and this new slice.
• Last stop, the behaviors for this image! In these last few steps we'll tell the image how to behave by attaching--behaviors. Fireworks makes this an incredibly easy process, especially when compared to hand-coding the JavaScript that makes it happen.

• The first behavior we'll attach is the simple rollover that will allow our buttons to swap from Frame 1 (Up) to Frame 2 (Over). This one is accomplished by selecting the slice and then clicking the little target symbol that appears in the center of the slice. Select each slice over a button in turn and attach the Simple Rollover Behavior from the pop-up menu that appears.
  
• The first behavior we'll attach is the simple rollover that will allow our buttons to swap from Frame 1 (Up) to Frame 2 (Over). This one is accomplished by selecting the slice and then clicking the little target symbol that appears in the center of the slice. Select each slice over a button in turn and attach the Simple Rollover Behavior from the pop-up menu that appears.
  
• In the dialog box that appears, you'll need to designate the trigger and the target for the image. It's an easy process. If you've named your frames, you need only attach the behavior for the Products button to the Products frame (Frame 3). Select the large slice in the preview panel, and designate the frame you want to swap to in the bottom of the dialog box.

• Complete this exercise by attaching the Swap Image Behavior to the Services button (Services Frame 4) and the Contact button (Contact Frame 5). That's it!
• The final part of the exercise involves exporting the completed image as HTML and Images. To finish up, choose File | Export Preview, complete any optimization, and export out to your site. Your spiffy new rollover is now ready for your use.

Tip: Since a fair number of images will be generated on export, it's a good idea to create and designate a folder to hold all the images in the Export dialog box. Below is how your finished product should look.

Roll Over the Menu to see how the Disjoint Rollovers behaves.
Back to top

Creating a Pop Up Menu

See My PopUp Menu

• Open Fireworks 4, hit "File > New" and create a blank work sheet.
• Then either import an image or create a button using the Fireworks drawing tools. I created my button in Fireworks using the rounded rectangle tool. Now is also a good time to sort out your background colour and crop your image.
  
• 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 as we did in the above exercise) hit "Insert" from the menu bar and click on "Hotspot". Notice we are using Hotspot instead of Slice!!! If it ask if you want to use single or multiple hotspots, use single. This will select the entire button as opposed to two parts of the button. The entire image should be masked in blue.
• Once again, click on "Insert" from the menu bar and then click "Pop Up Menu". The "Set Pop-Up Menu" box will appear as shown below. This is where we enter the names that will appear in our menu. As you can see, I have typed the name "Appetizer" in the text box and in the link box I have typed "appetizer.htm" which is the page I am linking to.

FYI: If I were using frames, I could use the "Target" box to specify which frame the linked page should open in.

• Pressing + writes the entered info to the large box and clears the text and link boxes for the next entry.

• As you can see from image below, I have entered the names of my "menu options " and have added a sub-section for "menu items".

• From the "Appetizer" section I am going to build a sub menu. To do this, I add the name of my first item (Oysters Rockefeller) and click on the name to highlight it. I then click on the sub menu icon . Notice that the name "Oysters Rockefeller" is now indented, indicating that it is part of a sub menu. I then enter the names of my other food items, following the same procedure. Enter alll the information listed below in the Sections with Sub-Sections listed below or enter information for a menu of your own:
  • Appetizers - appetizers.htm
    • Oysters Rockefeller - oysters.htm
    • Chicken Liver Pate - pata.htm
    • Shrimp Cocktail - shrimp.htm
  • Main Entires - entries.htm
    • Steak and Lobster - lobster.htm
    • Prime Rib - prime.htm
    • Leg of Lamb - lamb.htm
  • Desserts
    • New York Cheesecake - cheesecake.htm
    • Cherries Jublilee - jubilee.htm
    • Strawberry Shortcake - shortcake.htm
  • After Dinner Drinks
    • Irish Coffee - irish.htm
    • Creme De Mint - mint.htm

If you wanted to add additional sub menus, simply enter the name you want in the normal way, drag it up so that it appears below the heading 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.

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

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.

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>
<img name="chefs" src="chefs.gif" border="0" usemap="#m_chefs">
<!-- fwtable fwsrc="Untitled" fwbase="chefs" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
<map name="m_chefs">
<area shape="rect" coords="6,3,124,92" href="#" onMouseOut="FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_0,249,225);" >
</map>

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.