Slicing/Exporting/Web Templates in Fireworks - Part 2

In the first part of this tutorial, I explained how to slice images in Fireworks for the purpose of creating a web template. This part will explain Exporting. This is an important part of the process, and though it isn't difficult, there are a few things you need to be aware of.

I prefer to use the Export Wizard when I'm exporting for html. The main reason being I can preview what the image is going to look like depending upon the format I choose. I usually export everything as a GIF if I can, unless it's a photograph. I do this mainly because GIF's are typically smaller (file size speaking) than JPEG's. Also JPEG's can look terrible if the image contains any text - unless you export them at the highest JPEG settings possible but that can create rather huge files. As you can see from the preview below the GIF file size is about half that of the JPEG. 10.72K compared to 20.29K

I've also found, from experience, that many images containing gradients can be exported as GIF's if I select "Adaptive" for the Palette category and increase the "Dither" rate to 100%. I've noticed that there's not a real noticeable difference between a standard JPEG and a GIF image exported with these settings. (Notice the slight differences in the preview windows below.) Of course, every image is different and you may need to try different formats. The main goal is to select an image format that is going to give you both a good quality image and a reasonably small file size.

Web Safe Colors

Back in the olden days it was considered a good practice to choose only "web safe" colors. This was back when computer monitors could only support 256 colors. The Windows and Mac operating systems also reserved about 40 colors specific to their own system. This left 216 "cross-platform" safe colors. However, today's monitors can display millions of different colors so it really isn't necessary to only work within the "web safe" color spectrum. Still, it's good practice to take a look at your designs on different monitors. Even if colors look great on your computer they may look like mud on another! Believe it or not there are people still viewing the web on Windows 95 machines with prehistoric monitors, however I don't think it's necessary to design for the "retro" computer guy with the ancient computer set up. Design for your audience - that's the best rule to live by!

Exporting for HTML

Click the Export button.

Important things to check if exporting for html:

1. Make sure "HTML and Images" are selected for the Export drop down.
2. Make sure "Export HTML File" is selected for the HTML drop down.
3. Make sure "Export Slices" is also selected
4. If there are areas where you didn't draw slices but would like them to export, check the box next to: "Include areas without slices"
5. If this were a document with more than 1 page (new to CS3) and you want all pages to export, Uncheck next to "Current page only".
6. If you would like to place the images into a separate folder, click the browse button, and select the folder you would like them exported to.

Before you go ahead and save this file for exporting, click on the Options... button.

Under the General tab we can select what type of HTML we want Fireworks to produce depending upon our needs. I usually choose Dreamweaver XHTML because I use Dreamweaver and XHTML is the standard for today.

The Table tab under HTML Setup will allow you to specify what you want Fireworks to do with empty table cells. I've had the best luck choosing the below options when I export.

Click OK and Save and you're good to go!

Below is the folder that I exported to on my computer. As you can see Fireworks placed all the images in the image folder I created and the HTM file. I can now edit the HTML, open it up in Dreamweaver, or import it as Fireworks HTML inside of Dreamweaver and add my content.

Part One