• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Part: 1 Fireworks PROJECT 1 > Exporting a Site Design

Lesson 3. Exporting a Site Design

Once you create and finalize the whole page design and determine the slicing scheme, you can turn your attention to moving the design from Macromedia Fireworks to Macromedia Dreamweaver. Moving the design is a two-step process: image optimization and file export. Graphic optimization is the process of converting the high-quality Fireworks PNG file's graphics to low-bandwidth Web graphics, usually using the GIF or JPEG formats. More specifically, optimization refers to finding the balance between image quality and the shortest download time for your graphics, because as a rule of thumb, high-quality images have a lot of detailed information and that information results in large file sizes. The goal is to lower file sizes (and hence remove or compress some of that information) without compromising the quality of your images. Although optimization is a complex task, Fireworks offer a set of unique tools to make it easy.

In the course of this lesson, you will work with Fireworks' 2-Up (shown) and 4-Up Preview panes to find the optimal balance of file size and image quality. The image on the left is a much larger file—and longer download—but it looks better.

Once the graphics are optimized, you are ready to export them. Exporting generally occurs in two steps in Fireworks. In the first step, the graphics in each slice (HTML slices excluded) are exported according to their optimization settings; that is, Fireworks creates a new GIF or JPEG file for that region of the overall layout. In the second step, Fireworks generates an HTML file to reconstruct the individually exported graphics into a page layout. Fortunately, Fireworks and Dreamweaver work seamlessly together, so it is easy to reconstruct the Fireworks design in Dreamweaver and start developing pages right away.

In this lesson, you'll concentrate on learning the techniques to optimize graphics. In addition, you will explore and work with various exporting settings to prepare the Fireworks document for export. In the process, you'll become familiar with the Optimize panel and Export HTML setup process in Fireworks, mastering the techniques used to find the best optimization and export settings for your original design.


In this lesson, you will:

  • Optimize graphics for low file size and high quality

  • Specify export settings and output the files

  • View output pages in a browser


This lesson takes approximately 50 minutes to complete.


Starting Files:


Completed Files:





Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint