Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Digital Audio, Video > Adobe Flash

How to Export a Site Design From Fireworks to Dreamweaver

  • Print
  • + Share This
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

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.

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
  • + Share This
  • 🔖 Save To Your Account