These effects are common and can potentially contribute to more usable
navigation and enhanced visual appeal. Rollover's can help users "see"
graphic-based navigation links more clearly. Pop-up menus offer ways
to, as Price and Price suggest, "write and display many levels
[of site navigation] at once" (p. 254-260). Yet, according to Steve
Krug, some novice users find pop-up menus difficult to use (pp. 112-115).
Krug likes, on the other hand, the "feedback" that rollovers
give to users as they decide where to click next (p. 114).
To create rollover buttons, you must layout your page in Fireworks,
add the rollover buttons, and then "slice"
and export the .png file into an HTML version. Thus, you will learn
another feature of Fireworks in this lab: how to design a graphic-heavy
Web page in Fireworks and export it into Dreamweaver.
If you follow the instructions below, you should create a site that
resembles the lab 6 example below:
| Task |
Hint |
Sample |
| 1. Open new file in
Fireworks, canvas size 800 x 600 px, background white
|
|
|
2. Create a page header by
creating a rectangle 795 x 100 px
Insert text in the rectangle as the page's main title. |
Align the square in the upper-left corner.
Since your header is going to be an image file, use a non-standard
font like "BankGothic" |
see page header screenshot |
3. Add a drop shadow effect
to header text and header rectangle |
Highlight the text box. Click on the plus sign
(+) next to the "effects" option in
the property inspector. Select Shadow and Glow > Drop
Shadow from the menu.
Repeat for the rectangle object.
You can customize the drop shadow effect. The other "live
effects" options allow you to alter text in many ways. |
see drop shadow effect
screenshot |
4. Create first navigation button with "button
editor" |
|
|
| Go to Edit > Insert > New Button |
Tabs of button editor equal:
- up=initial state of button
- over=mouse over state
- down=on click state
- over while down=after click, second mouse
over (rarely used)
- active area=image map/linkable area (default
is always whole object area)
|
see button editor
screenshot |
Draw a square 140 x 30 px.
Make the background color the same as header color & add
the text "About Me" (~14-16 pt font) |
Use cross-hairs to center button.
NOTE: Make the text box the same width as whole button, this
will make it easier to create buttons with longer text from this
first button |
see button screenshot |
| Click on "Over" tab and click "copy up graphic"
|
|
|
| Change background color to a darker color and change font color
to white |
|
|
Click on "Down" tab and click "copy over graphic"
Change background color to black. |
You should generally leave the down button the same as the over
button, but you can create a different click effect if you want.
To see the difference between the mouse states, change the background
color again to black. |
|
| Click "Done" |
The button will appear in the center of the canvas. The red lines
are "slices," which will be discussed later. |
|
| Move/drag the button to the upper-left corner, below the header. |
You're creating your main navigation menu in the first column
of the page. |
|
| In the property inspector of the "About Me" button,
add a URL that works. |
|
|
| 5. Create remaining navigation buttons
from original "About Me" button |
|
|
| Under the "Assets" panel, click on the "Library"
tab and drag the "About Me" button icon anywhere onto
the canvas |
This will automatically create a second copy of the original button,
saving you the hassle of creating each button from scratch! |
|
| In the property inspector of the new button, change the text to
"resume" and change the link address to another working
URL |
|
|
| Carefully align the "resume" button below the first
"About Me" button |
|
|
Repeat this again 3 more times creating the following buttons:
- "Experience"
- "Activities"
- "Sample Work"
|
Don't forget, each time you have to drag the "About Me"
icon from the Assets panel, then change the text and the link.
You can click on the "Preview" tab
of your Fireworks file to see how your buttons work. |
When you're done,
your Fireworks file should look like this |
| 6. Finish your navigation menu with some design
effects |
You'll add visual appeal to your navigation menu by 1) "rounding
off" the bottom and 2) adding a drop shadow |
|
In the middle of the canvas, draw a "rounded rectangle"
160 x 60 px
Set the "rectangle roundness" to 80
in the object's property inspector and make the background color
the same as the buttons |
The "rounded rectangle" tool is found by clicking
and holding on the tiny triangle icon of the
rectangle tool in the Vector palette of Fireworks. |
|
| Next, create a "rectangle" 160 x 30
px. somewhere near the rounded rectangle |
Make the background gray |
|
| Drag the rectangle over the top two-thirds of the rounded rectangle
|
You want to overlap the top two thirds perfectly, so there's none
of the rounded rectangle showing except for the bottom third |
See overlap screenshot |
| Select both the rounded rectangle and rectangle
object together by clicking on both while holding down the
shift key |
|
|
| Select Modify > Combine Paths > Punch |
This will combine the two object layers, "punching out"
the overlapping areas, leaving you with an object shaped like
the bottom third of the rounded rectangle, which can be used to
finish off the bottom of the navigation menu. |
See combine paths/punch screenshot |
| Drag and align the object you just created at the bottom right
of your navigation bar |
The far left side of the punched object should hang off the canvas.
|
|
| Add a drop shadow effect to all of the navigation bar buttons
and the punched object |
|
|
| 7. Create the Pop-Up menu. |
|
|
Select the "Sample Work" button and go to Modify
> Pop-Up Menu > Add Pop-Up Menu
|
The tabs of the Pop-Up menu editor:
- Content: add/delete text
and links of submenu
- Appearance: choose text, color, other visual
effects
- Advanced: Customize appearance (Menu
delay option sets amount of time before menu disappears)
- Position: Sets location of pop-up menu (ignore
because this can be done more easily in WYSIWYG mode)
|
|
| Under content tab of pop-up menu editor, add
3-4 Pop-Up menu text + links. |
After you type in link text and URL, hit return or the + sign
to create another menu item |
|
| Under appearance tab of pop-up menu editor, select
the "look" of your pop-up menu, including font style,
alignment, colors |
"HTML" option gives you simpler pop-up menu look. "Image"
option gives you more three-dimensional-type options |
|
| Under advanced tab of pop-up menu editor, add
an indent of 5 px and set menu delay
to 500 ms. |
You can experiment with time of menu delay to whatever suits you.
The default 1000 ms is a bit long. |
|
| Once you've made your adjustments, select "Done"
in the pop-up menu editor. |
You should see the outline of where your pop-up menu will display.
If you want to adjust the pop-up location, you can select and move
the outline. (Or you can double-click on the outline to edit the
position tab in the pop-up menu editor) |
see pop-up menu screenshot |
| 8. To finish off the page layout in Fireworks,
add a headshot photo with a dropshadow effect. |
You add image files to Fireworks by selecting File
> Import.
Place the photo at the right side of the page, just below the
header. Make the photo roughly 250 |
see photo screenshot |
| 9. Slice up the Web page layout |
"Slicing" involves breaking up a larger image into
smaller images. Designers do this to decrease download time for
large images.
When you "export as HTML" a sliced Fireworks file,
it automatically converts the sliced canvas into an HTML page
that uses table HTML code to preserve the layout created in Fireworks |
For more on slicing and exporting a Fireworks file, here's a link
to the "slicing"
section of a good Macromedia tutorial on "Creating
a Layout with Fireworks and Dreamweaver" |
Select the slice tool under the Web palette.
Carefully use the slice tool to draw rectangular slices over
the reaming elements of the page (header, content area, photo).
|
Do not draw new slices over any/all of the buttons
that make up the navigation bar. Each button must have
its own slice. The button editor automatically creates slices
for each separate button you generate. These slices also contain
the javascript for the rollover effects. Drawing new slices on
top of the pre-existing slices will delete the rollover effects
upon export.
If you followed the lab, your slices should resemble the pattern
of slices in the screenshot,
including the separate slices created by the button editor for
each button.
Notice that the header is split into one big slice and one small
slice (just above the photo).
Make sure you have the "show slices and hotspots"
option selected under the Web palette. |
see the slicing screenshot |
10. Export the file as an HTML file.
Select File > Export.
Save the file and images in your web folder. |
In the Export menu, make sure under the "Save
as Type" option, you select "HTML and
Images"
Also make sure you have the "Include areas without
slices" option selected.
You can also choose to have all of the images saved in a separate
folder. |
|
| 11. Open the new html file in
Dreamweaver |
If you click around the page in Dreamweaver, you should see how
Fireworks "sliced up" the page into tables and images. |
|
12. Eliminate "empty" placeholder
images.
|
Since the page is divided up into tables and images, delete the
big image files so you're left with empty cells. |
|
| Insert some text in the main content cell of the page. |
|
|
| 13. Preview in IE to check how rollovers and
pop-up menu works. |
If you have both the Fireworks file open and the exported Dreamweaver
version, you can go back and forth relatively easily to make adjustments
and revisions.
You simply have to remember you have to export the file again
with every new change you make. |
Your page should work something like the final lab
6 example. |
| 14. E-mail
the URL of the finished version to Dr. J |
Make sure:
- All of your buttons include the rollover
effect.
- Only one button needs a pop-up menu.
- That the pop-up menu location isn't too far
away or too close to the rollover button it's attached to. You
should be able to read the text on the rollover button.
- You have a picture (with a drop shawow effect)
- You have some text in the main content cell
|
|
