A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Flex cookbook (share code)
- Adobe AIR cookbook (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Experts (ACE)
- Developer events
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
- MXNA (blog aggregator)
- Adobe blogs
Archives
ADC program
Additional resources
Fireworks Article
Modifying HTML Output with HTML Styles in Fireworks
Table of Contents
- Introduction
- Using HTML Styles
- Modifying an Existing HTML Style
- Creating a New Style
- Reading the Table Structure
- Example of a Simple CSS-Based HTML Style
Using HTML Styles
When you export a document in Fireworks (by choosing File > Export), you are presented with the Export dialog box, which asks for the export location and gives you access to all the options associated with exporting an image.
The Export pop-up menu at the bottom of the Export dialog box gives you various options for the format of your exported file, whether just images, a Dreamweaver library item, or some form of images along with HTML (see Figure 1). When an export generates HTML, you're dealing with two options: HTML and Images, and CSS Layers. (The Director export also exports to a form of HTML but you won't want to use that unless you are importing your images into Macromedia Director.)
Figure 1. File export options in Fireworks
The HTML and Images option is your primary means of exporting HTML from Fireworks. This exports your document's slices and creates the necessary HTML to contain them. The HTML that's generated is based off of an HTML style. In the Export dialog box, you can access different styles from the HTML Setup dialog box by clicking the Options button.
On the General tab of the HTML Setup dialog box, you can choose among various HTML styles, such as Dreamweaver, FrontPage, Generic, and GoLive—each of which generates some form of HTML-based table layout for your graphics. Other options available in this dialog box regulate how the selected style treats the HTML that's created. After you modify them to your liking, click OK to go back to the Export dialog box.
The CSS Layers option in the Export pop-up menu allows you to export HTML that places your images inside layers instead of tables. This acts much like an HTML style for the HTML and Images option but appears as its own export selection in Fireworks because of the different options associated with it. When you select CSS Layers, notice that the Export dialog box provides a new Source pop-up menu, which allows you to determine how to export your images (see Figure 2).
Figure 2. Source options for the CSS Layers export
With Export set to CSS Layers, you can choose to export your images as slices, frames, or layers. This differs from HTML and Images, which exports your images always as slices. Unfortunately, when you make your own custom HTML styles, you will be limited to the options available with an HTML and Images export because it is only with that type of export that custom HTML styles are available.
One interesting fact about Fireworks 8 is that the different HTML styles available in HTML and Images are virtually identical. The templates used to generate the Dreamweaver, FrontPage, Generic, and GoLive styles are the same—aside from a few comments inside them—so there's generally no point in changing from one to the other unless you decide to use one of your own custom variations.
