Exporting to HTML

Export Options

From the Menu Bar select FILE/EXPORT and your document will be saved as an HTML file and your graphics will be optimized according to your slice settings.

The Export dialog box will appear on your screen. If you click on the SAVE AS TYPE drop down menu you will see a listing of your output options as shown below.

For web design purposes well will select HTML and IMAGES. Then select the OPTIONS button on the dialog box as shown below.

Modifying HTML Properties
Once you click on the Options button you’re presented with a dialog box that allows you to modify some of the properties of your HTML document. See below.

The HTML Style drop down gives you the option of creating an HTML file tailored towards a particular editing program. If you choose “Dreamweaver 3”, for example, Fireworks MX® 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 HTML.

You’ll want to stick with the default file EXTENSION of HTM not HTML. The reason for this is to allow you to always know what your file extensions are without having to guess. You can do the same with HTML but HTM is one less character to type.

Also be sure to select the box for LOWERCASE FILE NAME. NEVER USE UPPER CASE LETTERS for your file names. Unix servers interpret upper and lower case letters as different characters. This can cause you numerous problems for trying to remember which characters are upper case and which are lower case in your file names.

Table Tab
Selecting the TABLE TAB lets you choose the way that Fireworks MX® lays your tables out. Check the options in the SPACE WITH drop down menu. If you choose NESTED TABLES you will end up with Tables with-in Tables if your content is somewhat complex. This adds a small amount of extra HTML code to your document. But the benefits you gain from the nested tables is well worth the trade-off. If you choose the SINGLE TABLE option you run the risk of having your content display improperly because Table pixel and width settings are notoriously unreliable when handled by a variety of different browsers. For this reason you probably wouldn't choose this option. You can add a 1-pixel transparent shim to your table, which will make absolutely certain that, no matter what the users browser and display settings are, your page will display the way you intended it to. But if you need to make changes to your HTML code after it is exported it will be almost impossible without having to go back to Fireworks MX® to make the changes. This is a major inconvenience and not recommended.

Document Specific Tab
If for some reason you have a table that has empty cells you can set its color and contents options at the bottom of the dialog box.
“Document Specific” is the last tab in the HTML Setup dialog box. By default Fireworks MX® uses the document’s name or “base name” and follows that with the row number and column number of the individual graphics that are exported. You can change this by way of the multiple drop down menus so the base name is followed by 5 or more letter or number combinations of your choosing. Check your options by selecting the menus and choosing the one that best suits your needs.


Selecting “Multiple Nav Bar HTML Pages” will export multiple HTML documents for use in documents without frames.

Alternative method of Capturing the HTML Code
A fast way to export Fireworks MX®-generated HTML is to copy it to the Clipboard.

Copying HTML code in Fireworks MX® can be accomplished in either of two ways. You can use the Copy HTML Code command, or you can choose Copy to Clipboard as an option in the Export dialog box. Doing so will copy the Fireworks MX® HTML to the Clipboard and generate the associated image files in the location you specify. You’ll later paste this HTML into a document in your preferred HTML editor.

Although copying to the Clipboard is a fast way to get Fireworks MX® HTML into other applications, it is not ideal in every situation. Copying HTML to the Clipboard has the following disadvantages:

• You don’t have the option to save images into a sub folder.They must reside in the same folder as the HTML file where you paste the copied HTML. An exception is HTML copied to Macromedia Dreamweaver.
• Any links or paths used in Fireworks MX® pop-up menus will map to your hard drive. HTML copied to Dreamweaver is an exception.
• If you use an HTML editor other than Dreamweaver or Microsoft FrontPage, JavaScript code associated with buttons, behaviors, and rollover images is copied but may not function correctly.
• If these issues pose a problem for you, use the Export HTML option instead of copying HTML to the Clipboard.

Before you copy HTML code, be sure that you’ve selected the appropriate HTML style and chosen Include HTML Comments from the General tab of the HTML Setup dialog box. For more information, see Setting HTML export options.

To copy Fireworks MX® HTML using the Copy HTML Code option:
Do one of the following:

1. Choose EDIT/COPY HTML CODE.
   
2. Click the Quick Export button and choose Copy HTML Code from the pop-up menu.
   
3. Follow the wizard as it guides you through the settings for exporting your HTML and images.
   
4. When prompted, specify a desired folder as the destination for the exported images. This must be the location where your HTML file will reside.
   
   If you plan to paste the HTML code into Macromedia Dreamweaver, it does not matter where you export the images, as long as they reside in the same Dreamweaver site as the HTML file into which you will paste your code.
   
5. The wizard exports the images to the specified destination and copies the HTML code to the Clipboard.

To copy Fireworks MX® HTML using the Export dialog box:

1. Choose FILE/EXPORT.
   
   Optionally, if you are exporting to Dreamweaver, click the Quick Export button and choose Copy HTML to Clipboard from the Dreamweaver submenu.
   
2. In the Export dialog box, specify a folder as the destination for the exported images. This must be the same location where your HTML file will reside.
   
   If you plan to paste the HTML code into Macromedia Dreamweaver, it does not matter where you export the images, as long as they reside in the same Dreamweaver site as the HTML file into which you will paste your code.
   
3. Choose HTML and Images from the Save as Type pop-up menu.
   
4. Choose Copy to Clipboard from the HTML pop-up menu.
   If your document contains slices, choose Export Slices from the Slices pop-up menu.
   Click the Options button, choose your HTML editor from the HTML Setup dialog box, and click OK.
   
5. Click Save in the Export dialog box.
   To paste HTML copied from Fireworks MX® into an HTML document:
   In your HTML editor, open an existing HTML document or create a new one. Save the document to the same location in which you exported your images.
   
   Saving the HTML file to the same location as the exported images is not necessary if you use Macromedia Dreamweaver. As long as you export the images from Fireworks MX® to a Dreamweaver site, and save the HTML file to a location somewhere within that site, Dreamweaver automatically resolves the paths to the associated images.
   
6. View the HTML code, and place the insertion point in the desired location between the <BODY> tags.
   
   HTML code copied from Fireworks MX® does not include the opening or closing <HTML> and <BODY> tags.
   
7. Paste the HTML code. When pasting code into HTML editors, it is important to keep images and HTML files in the correct location, or links could be broken. If possible when you copy to the Clipboard, make sure images are exported to the final location where they will reside on the website. Fireworks MX® uses document-relative URLs, so if the HTML or images are moved, the URL links are broken.