After you create and finalize your site's design in Fireworks, you can turn your attention to moving the design from Fireworks to Dreamweaver. Moving the design is a two-step process that involves image optimization and file export. In this lesson, you'll learn techniques for optimizing 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.

This chapter is from the book

This chapter is from the book

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.

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.