Skip Navigation.

Tutorial: Exporting code and images from Fireworks

After you have added behaviors and links to all your rollovers, it's time to export the code and images from Fireworks. Be sure to save your file before you start this. On this page, we will cover how to prepare your images for export and how to configure the export window.

Prepare your images
Optimize panel
Optimize panel
Before you export your images, you need to optimize them for the web. In essence, to optimize your images is to prepare them to be viewed by people with slow internet connections. Remember that your readers may be using a 56.6K modem or even a 28.8K modem. Such connections are common, and your images should respect that. You can find the optimize panel (shown right) in the same panel as the object panel, or you can open it using the following progression:
Window Object

See also: Fireworks: Exporting images and code


Configure the Export Window
Export window
Export window
Click for big enlargement
When you export this image, you will export: one image for each section you made when you sliced your image and an HTML page containing the code for this image. To export your image and code, follow these steps:

  1. Save your document before you start.
  2. Begin exporting using this progression:
    File Export...
  3. Make sure the correct specifications are selected for your project. Most importantly, you want to make sure that "HTML and Images" is selected, so that Fireworks exports both the HTML code and the images for your web page.

Once you've got the settings the way you want them, click "Export" and you're done!

See also: Fireworks: Exporting images and code

Once you have exported your images and code, you are done with Fireworks. You can look at the page and code you've exported with a web browser. Check out the page we made for this example. We just have one step left to do in Dreamweaver, and we're all done! Whoo!

Previous
Next
Tutorial