Exporting a Site Design
After 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. Image optimization is the process of converting the high-quality Fireworks PNG file’s graphics to low-bandwidth Web graphics, usually in GIF or JPEG format. More specifically, optimization refers to finding the balance between image quality and the shortest download time for your graphics. High-quality images generally include a lot of detailed information, and that information results in large file sizes. Your goal is to reduce 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 offers a unique set of tools to make it easy.
In the course of this lesson, you’ll 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—and yet actually looks worse than the image on the right.
When the graphics are optimized, you’re ready to export them. In Fireworks, exporting generally occurs in two steps. In the first step, the graphics in each slice (except HTML slices) 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’s 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’ll work with various export settings to prepare the Fireworks document for export. In the process, you’ll become familiar with Fireworks’ Optimize panel and the Export HTML setup process, mastering the techniques used to find the best optimization and export settings for your original design.
What You Will Learn
In this lesson, you will:
- Optimize graphics for small file size and high quality
- Specify export settings and output the files
- View output pages in a browser