We’re now ready to export our graphic for the web.  We’ll be looking at the intricacies of export and optimization in a later unit so, for the time being, a simple export will suffice. Deselect the Slice Objects in your Document Window and select "File/Export…" from the Menu. A standard dialog export box will appear giving you a range of options for the naming and location of your files.

(Figure 12.12)

As stated previously the default name for your graphics is based on the name of your original work file.  If you want to change it you can type an alternate name in the "Base Name" field.  Select "Use Slice Objects" from the Slicing drop down menu. This particular menu gives us the option of not slicing up our graphic, slicing with Slice Objects, slicing along guides, or slicing up the content of the current frame.  If we choose to slice along guides Fireworks will ignore any behaviors or slice object information in our document when it is exported.

In the HTML section of the Export dialog box we can choose the various settings for the HTML files that Fireworks creates. Create a new folder and call it "map" and {Double Click}on it to open it.  The Style drop down gives you the option of either not creating an HTML file at all or creating an HTML document tailored towards a particular editing program.  If you choose "Dreamweaver 3", for example, Fireworks will insert codes into the HTML document that are unique to that particular program. Choosing Generic from the list will keep the code as clean as it can possibly be. Choose "Dreamweaver 3."

The Location drop down menu allows you to pick a location for your HTML file in relation to the graphic files that are created.  If you choose "Same Directory" your HTML file will be placed in the same folder as the graphic files.  If you choose "One Level Up" your HTML file will be placed in a folder one level up from the folder in which the graphics are placed.  The standard procedure for web design seems to be to locate your graphics in a folder called "images" and your HTML file one level above it.  If this is your wish you can choose "Custom" to place your file and navigate your way to a desired folder by way of the dialog box that appears.  For this example we’ll place our HTML file in the same directory as the graphics so choose "Same Directory".