Write the Introduction… Goal … Purpose…Scope…etc

Introduction/Overview

Prerequisites:
You should have the following programs installed and running on your computer:

You should also be familiar with:

Steps:

Explain what we’re going to demonstrate

Step 1: Creating the Initial Button

From the File Menu on the Menu Bar, select “File”  “New”
In the window that appears, choose a width of 100 and height of 40 for the initial button that will activate the pop-up menu. Leave the Resolution at its default of 72.
To make a colored button, select “Custom” under Canvas Color and choose the color you would like from the options in the pull-down palette.
Maximize your file window???

Step 2: Adding Text to Your Button

Click the “Text tool” on the Tools menu
Click on your new button that you created and a “Text Editor” dialogue box will appear.
In the Properties Menu at the bottom of the window, choose the font, font size, and other text-related properties for your button text.
Click the “Pointer tool” in Tools menu to get out of text mode
If you want to reposition your text, click on the text (while in “Pointer” mode) and hold the mouse button down to move the text around to where you want it.
Click somewhere on the screen that isn’t on the button to deactivate the text.

Step 3: Creating a “Hotspot” for a pop-up menu

Click on the” Slice tool” in the Tools menu
Click in the area outside your button in the upper left-hand corner, and holding the mouse button down, drag a rectangle around your button, ending in the lower right hand corner, outside the button itself.
Release the mouse button.

Step 4: Adding the Pop-up Menu

Right-click anywhere on the button (make sure the slice is activated and the Hotspot symbol is showing from previous step) and select “Add Pop-Up Menu…” from the choices that appear.
The Pop-up Menu Editor will appear
Make sure the Content tab is selected. Double click in the box under the column labeled “Text”, and type the name of the option you want in your menu. Tab to the next box under the column labeled “Link”, and type the link to the page where you want that option to redirect to (***Make sure you prefix your link with “http://” or the link will not work).

***How to link to pages within our file server? Not on the web?

Lave the “Target” column blank (might want to explain why)
Click “Next” at the bottom.
Now the Appearance tab should be selected. Here choose the font and link options for your menu. As you make your choices, you can preview them in the “Preview” box.
Click “Next” at the bottom.
Now the Advanced tab should be selected. Here, you can change your cell width, height, padding, and other settings for your pop-up menu. As before, you can preview your changes in the “Preview” box.
Click “Next” at the bottom.
Now the Position tab should be selected. This controls where your menu will appear on the screen. For our purposes, simply click “Done” at the bottom without changing anything.

(**Don’t worry that your text you entered doesn’t show in the outline of the pop-up menu**)

Click the “Pointer” tool in the Tools menu.
Click on the pop-up box that is now shown as an outline, and move it (by holding down the mouse button) to where you’d like it to appear when your button is rolled over.

Step 6: Saving and Exporting your Pop-up Menu

From the File Menu on the Menu Bar, select “File”  “Save”.
Type in a name for your pop-up menu file.
Select a location for your file.
Click “Save”.
Now you must export your file (Fireworks MX file types are *.png, and this extension is not recognized by many browsers. By exporting your file, you can save it in as a *.html extension, which is readable by all browsers).
From the File Menu on the Menu Bar, select “File” “Export”.
Type in a name for your pop-up menu file.
Select a location to export your file.
Click “Save”.

Step 7: Check to see if Your Pop-up Menu Works

To see that your pop-up menu works, open Internet Explorer.
From the File Menu, select “File”  “Open”.
Click “Browse”.
Locate your file and click “Open”.
Click “OK”.
Your button should be in the browser window, and when you move your mouse over it, the pop-up menu will appear. Neat!!

Step 8: Put Your Pop-Up Menu in a Web Page???

Sum up what we’ve demonstrated.

Objects:

Script:

Introduction
1. Introduce ourselves
2. Goal
3. Purpose
4. Scope
5. What kind of “pop-up” we’ll be doing
Prerequisites
Steps
1. Make a “Schools” Menu (GVSU, MSU, U of M, Ferris)
2. Give specifics about size of button, colors to use, file names, where to save, etc
Summary
1. Now you can play with multiple-button menus, different colors, sizes, etc

Download 31.5 Kb.