Banner of Disjointed Rollovers tutorial
button 1 Image of swap image area of Disjointed Rollover
button 2
button 3
button 4
Intro | Tips | 1 | 2 | 3 | 4 | 5 | 6 | Sharpie Sheet | Resources
 

Part 3 - Exporting Into Dreamweaver
Page 6

 

Steps Covered on this Page: About Slices | Trim Canvas | Export Selection | Settings number 44 | Navigating to Save the HTM portion of file follow numbers 45, 46, 47, 49 and 50 | Navigating to Save the gif files (all the slices) numbers 51 and 52 | How Files Look When All Goes Well numbers 53 and 54

42a> Each Slice, whether it is custom made by you or automatically created by Fireworks is an image. Copies of the Slice images just like any other images used to design your web page must reside inside the root folder of your defined site. Since every single Slice creates a file, the more Slices, the more files. It is easy to see how these files might confuse you if they are loose inside your Root Folder.

Button One Part of Disjointed Rollover that contains the Swap Image area
Button Two
Button Three
Button Four

42b> Not only does each Slice have a file, but you also have the HTM file to save into the root directory. The HTM file is the file where your Slices are all put together so it works when your mouse moves over the numbers just as the one on the left does.

Fireworks provides a way to Export all of these files so that they enter your root folder completely organized with the Slice files in an image folder and the HTM right outside of the images folder, separate and available to you for use and editing. A cheat sheet comes in very handy on learning multiple steps like this so you might want to follow along using the Sharpie Sheet.

42C>Before Exporting, be sure your canvas is as economical as possible by going to Modify>Trim Canvas. It will make the canvas fit your design tightly without cropping any of your design off.

43> In-depth illustration is being used to clarify these exporting steps. In my root folder in Dreamweaver, I made two files. One named rollover and the other named images. With this in mind,we will begin exporting the Fireworks file rollover. Go to the main menu and click on File>Export. It will open the Export Window illustrated in step 44.
back to top

44> First, make certain the Base Name (1) matches your file. If it doesn't, type in rollover. Second, Slicing (2) field box should read Use Slice Objects. Third, Stlye (3) should be whatever version of Dreamweaver you are using and this tutorial uses Dreamweaver 3. Go to Step 45.

 

45> Click on the arrow to open the fly out menu and scroll to One Level Up.

 

46> This is how the settings should look before you go to step 47.

47> Click on Save and a Locate HTML File Window opens. The File name should read: rollover.htm. Don't Save yet. Go to step 48.

 

 

 

 

 

 

 

 

48> Click on arrow to right of Save in: field box to open fly out menu and scroll to the where the drive that contains your root folder
.
back to top

49> Open the rollover folder. Notice that the file extension is HTM in this part of the Export.

50> Open the images folder and click on Save

51> Now you are automatically returned to the Export Window where you will change the Custom... setting to One Level Up. Notice that the file extension is a gif meaning that you are saving your Slice files in this part of the Export. It will put all of your Slice files (no matter how many) into the images folder.

52> Once the Once Level Up is in the Location field box, click on Save.

          

53> Go to Dreamweaver and click on rollover. Your files should look like the ones on the left.

54> When you open the images folder, you should see all of your slice files tucked inside!

Steps Covered on this Page: About Slices | Trim Canvas | Export Selection | Settings number 44 | Navigating to Save the HTM portion of file follow numbers 45, 46, 47, 49 and 50 | Navigating to Save the gif files (all the slices) numbers 51 and 52 | How Files Look When All Goes Well numbers 53 and 54 | Back to Top

 

Intro | Tips | 1 | 2 | 3 | 4 | 5 | 6 | Sharpie Sheet | Resources

 

To Sharpie Sheetback to page 5To Sharpie SheetTo Resource page
Revised 05.08.01
Contact Ginny LeBleu

Copyright 2001 © Ginny LeBleu
URL: http://www.digitalartbeat.com/websites/report/index.htm