Printable File
Animated Gifs
Image Maps & Rollovers
Optimize Slices and Export to Dreamweaver

 

OPTIMIZING SLICES and DREAMWEAVER INTEGRATION

 

Okay, so you draw yourself some nice web elements in Fireworks How are you supposed to make sure that each part is optimized correctly? How are you supposed to get them into Dreamweaver?

These questions and more will be answered in the next installment of our web design course

Learning Fireworks! (or, How to See North-Eastern Azerbaijan for Only Five Manat a Day")

 

Creating Good Slices

 

Line Slices up Correctly

Although slices can be used for creating rollovers, they can also be used to "slice up" an image and optimize each part in a different way. Slices translate directly into tables when you export them. The following image will turn into five images when exported.

 

You should adjust your slices by dragging their handles (above). The slices should line up as much as possible to minimize the amount of images and table code Fireworks exports. For example:

 

Keep in mind that Fireworks will create a table cell and an image for every slice. The right image above would contain 17 image holding cells, while the center image would contain 29. After Dreamweaver imports the Fireworks file as a table, you can click any unnecessary images (transparent GIFs or solid colored blocks) and delete them.

 

Optimize Slices in Different Ways

To minimize download time, most of your site elements should be made with HTML. For example, never use an image if you can create the same effect with a HTML background color or regular HTML text. Sometimes the situation will call for an image intensive site, in which case youll have to make sure that every image is optimized to its maximum capacity. You should never create a site that is one big image. The web page below looks like one image, but is actually a number of different images, optimized to different strengths and held in a table.

You should add a slice wherever you feel that a different optimization will do you good!

 

To Optimize Different Slices:

  1. Add slices to elements. Adjust them so that they line up to reduce the number of image holding table cells.
  2. Make sure you DONT have a slice selected.
    First youll want to apply a general optimization.
  3. Hide slices by clicking the Hide Slices button on the Tool Palette.

 

  1. Click the PREVIEW tab at the top of the image window.
  2. Optimize the whole image using the Optimize palette.
  3. Show slices by clicking the Show Slices button on the Tool Palette.

  1. You can now click each slice and optimize it individually.
  2. Return to the Original tab when youre finished.

 

Naming Slices

Each slice is exported as an image. Images must have names. If you dont name them Fireworks does. Usually Fireworks picks a great name like "400_r07_c03_f2.gif". You should name your slices so you can recognize them later and so you dont confuse your clients.

To Name Slices:

  1. Click the desired slice.
  2. Open the Object Palette.
  3. Remove the check from "Auto-Name Slices" and name the slice.

Remember, no capitol letters or spaces!

 

Importing Fireworks Items into Dreamweaver

Its easy to bring Fireworks items into Dreamweaver

  1. After exporting your HTML and images from Fireworks open Dreamweaver.
  2. In Dreamweaver, Click:
    INSERT-> INTERACTIVE IMAGES-> FIREWORKS HTML
  3. Navigate to and select the HTML File Fireworks made for you when you exported.
  4. Select the Delete File After Insertion option to delete the Fireworks HTML file when the operation is complete. The HTML will still exist inside of your Dreamweaver document.

Ta-da!

 

If youd like, you can just copy and paste the Fireworks HTML into Dreamweaver. When exporting, choose the Copy HTML to Clipboard command. Then, click in Dreamweaver and paste!

 

After you've imported to Dreamweaver, you can select and delete any unnecessary images.

HANDY TIP: After importing into Dreamweaver, you can select the whole imported Fireworks table, and click EDIT on the Properties Inspector. Fireworks will open the original Fireworks PNG and will automatically export any changes you might make into Dreamweaver. Nice, huh?

 

|