SAVING + EXPORTING

Saving a Fireworks file and exporting it are two different things.

The default file format for Fireworks documents is png. PNG (Portabel Network Graphic) files can be opened in either Photoshop or Fireworks. When putting together a web site, it's a good idea to create a “png” folder for all your Fireworks documents. You will use them to make changes and corrections. You can use a png file in Dreamweaver, but most browsers don’t support them at this time.

When you have something you like and are finished, you must export the file in order for it to be available to use in Dreamweaver. Exporting allows you to optimize it by choosing a file format (gif or jpg) that's compatible with the web.

The most important thing is how it will look—you can preview the file by checking "preview" at the top of the document window. At the bottom left of the document window is an estimate of how long it will take a browser to load the image with a 56.6 bps internet connection.

Determining which format to choose is relatively simple in Fireworks. If you aren't sure whether you want a gif or a jpg, you can use the Export Wizard feature under the File menu.

After answering the questions in several dialog boxes (like any required file size, and where the image will be used) you are brought to the export preview dialog box. Or you can open the export preview window directly from the File menu.

If you’re exporting a file with frames, the export wizard asks you different questions.

When you click “exit,” the export preview dialog box opens.

There are lots of choices to make here, but if you got here using the export wizard, the optimum format options are already selected for you.

At the bottom of the right panel you have several tools that allow you to move to different parts of the image, crop it, and zoom in and out. Determine how many versions you want to see in the field to the right of the tools. Choose a different file format for each one so you can compare the quality.

Once you’ve decided how you want it exported, move to the left side of the panel and make your choices. Then click "export" or return or enter.

NOTE: If you've created something you want to bring into Photoshop, you can choose that from the format options, as well as the swf format for exporting something to use in Flash (although you will loose some features, like stuff created with the effects palettes).

Once you’ve determined your file format and exit the export preview dialog box, you are presented with the export dialog box. Or choose "export" from the File menu if you used the optimize panel.

Files that are just about images and text can be exported as "image only" files. The suffix at the end of the file name reveals it's format (i.e. gif or jpg).

Files that contain more than one frame, slices and/or hotspots should be exported as "HTML and Images.” This creates the HTML code that's used in Dreamweaver.

Make sure the slices are saved to a separate folder from the HTM file: Fireworks creates multiple slices for nav bars, rollovers, and buttons. You don't want to confuse those slices with the actual code that you will import to Dreamweaver. Therefore, it's 'way smarter to put the slices in a separate folder so all these small files don't clutter up your main image folder. It’s also smart to create a separate folder for each set of slices you create.

When exporting a file with slices, hotspots, and/or frames, put them in a subfolder; as you can see here, there are 218 separate files that make up the banner at the top of this page.

To bring an plain image into Dreamweaver you’ll use the “insert image” icon—it looks like a tree.

If you’re bringing in a nav bar or disjoint rollover file you need to use the "navigation bar" or “insert Fireworks HTML” icon.

Navigate your way to the HTM file you exported and select it. This reassembles your slices into a real image using a table, along with importing the code that makes the rollovers work.

(By the way, I'd never check "delete file after insertion" in Dreamweaver just in case you need to modify it at a later date or use it again.)

That about sums it up!

Obviously, this is no where near complete, but it should answer most of your questions. Ask me specific questions or use the Help men for anything that’s not covered here.