for Creating Fireworks Rollovers
Create a web
site directory with your computer's system. The example
below is for an index and 3 major areas: nomenclature, practice,
and links. Notice that folders were made for graphics, as well
as a folder for the rollover.
Here is the
create your rollover:
menu: new. Make it a transparent background, 600x200 pixels,
72 dpi. Save in your rollover folder. Note:
the saved file will have the .png extension.
graphics if desired (logo, etc). Be creative.
the text that will become "rollover" links: use the text tool
to type a descriptive name for each link that will take
the audience to a Web page in each subdirectory (folders):
HOME, LINKS, TEMPLATES, AUDIO, IMAGES, CASE STUDIES, SOFTWARE
REVIEWS, VIDEO, POWERPOINT, FLASH, LINKS, and CONTACTS. Note:
while it is not necessary to have a subdirectory for each Web
page, doing so will nicely organize your Web site. Imagine
a Web site with 50 pages and graphics--all in the same folder!!!
is an example of the completed layout:
the frame (frame palette—upper right triangle):
the text in frame 2 to red (or other design):
the Layer palette and select the Web layer. Select
all text (shift-click), from the Insert menu, select Slice.
should see your sliced graphics; notice that the slices
that are selected (in the web layer) are green AND have the
target symbol over each slice):
MUST be selected (green) in the web layer for the next step
(in case you have clicked anything on the canvas since the
previous step). From the behavior palette, click the + button
and select “Simple
Hide the Web
layer (turn off the eye) and click the preview button at the top
of the graphic window. Test to see if the rollover works.
CANVAS: from the Modify menu, select Canvas>Trim Canvas.
the optimize palette, select JPEG if your graphic has photos
or gradients, OR GIF if not. Save your work. Export
(from the File menu) into
your rollover folder. Be sure the Save As dialog box
settings are similar to the example below:
that many graphics files and an HTML file have been created
(in addition to the original.png file!).
open a Web page in Dreamweaver, place the cursor at the top
of the page; from the Insert menu, select Image Objects>Fireworks
HTML; browse to the HTML file in your rollover folder. Dreamweaver
the links happen: CAREFULLY, individually select each slice
and use the link tool (in the Property Inspector) and point
to the appropriate file in the Files window (just as you would
any ordinary link).
this for each Web page; upload all new and modified pages--as
well as the new rollover folder.
if your rollover ever goes "haywire," completely delete
it from the offending Web page; also delete ALL FILES EXCEPT THE
ORIGINAL .PNG from the rollover folders--BOTH LOCAL AND
Export the rollover again in Fireworks and repeat all steps for
for Creating Dreamweaver Templates
From the Site menu, select New Site and define your site:
From the File
menu, select New.
Create a 600
pixel table with 3 rows. Have border set to zero:
Put the cursor
in the top row of the table. Click the Fireworks button in the
Tool palette and browse to your rollover folder. Select the only
HTML file in the folder. Click OK.
text links in the bottom row.
From the File
menu, select Save As Template.
the cursor in the middle row and from the Insert menu, select
Template Objects>Editable Region. Call it “content.” This
is where you will but your content.
Now, you can
select New From Template from the File menu. Make your web pages
from the these and save them in the appropriate folders. Once
the pages are made, Open your Template and make the links. Save
the template and all of your files will be updated.