Instructions 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 directory:

Using Fireworks, create your rollover:

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

Insert graphics if desired (logo, etc). Be creative.

Create 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!!!

Here is an example of the completed layout:

Duplicate the frame (frame palette—upper right triangle):

Change the text in frame 2 to red (or other design):

Open the Layer palette and select the Web layer. Select all text (shift-click), from the Insert menu, select Slice. Choose Multiple.

You 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):

Slices 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 Rollover”:

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.

TRIM CANVAS: from the Modify menu, select Canvas>Trim Canvas.

In 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:

Notice that many graphics files and an HTML file have been created (in addition to the original.png file!).

Now 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 will import the javascript rollover.

Make 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).

Do this for each Web page; upload all new and modified pages--as well as the new rollover folder.

IMPORTANT: 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 REMOTE. Export the rollover again in Fireworks and repeat all steps for Dreamweaver.

Instructions for Creating Dreamweaver Templates

Launch Dreamweaver. From the Site menu, select New Site and define your site:

Click OK.

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.

Make your text links in the bottom row.

From the File menu, select Save As Template.

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

Save. Close.

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.