Accessibility

Fireworks Article

 

Modifying HTML Output with HTML Styles in Fireworks

Trevor McCauley

Adobe

Many people think of Fireworks as simply another image editing application. In a way, they are correct. But Fireworks is capable of more than just handling images. Fireworks is all about images on the web. That means Fireworks can handle not only developing web-based graphics but also generating the necessary HTML/CSS code to present those graphics.

Given the nature of Fireworks and its use of slices to divide images, it's not uncommon for the HTML it creates to require a table-based layout. A few years ago this was the de facto standard. Everyone loved tables. Today things have changed. Good web design makes less and less use of tables and more use of cascading style sheets (CSS) for rendering layout. Luckily, Fireworks is flexible enough to be able to meet the needs of today's web design requirements by using alternate HTML styles—templates that define the HTML that Fireworks exports.

This article explores the use of HTML styles within Fireworks. It covers how you can modify existing styles to suit your needs better as well as gives steps you can take to develop your own. By creating your own HTML styles for Fireworks, you can make sure that Fireworks generates the HTML you desire—the kind that's better suited for today's standards.

Requirements

To complete this tutorial, install the following software and files:

Fireworks 8

Sample files:

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.)

File export options in Fireworks

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).

Source options for the CSS Layers export

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.

Modifying an Existing HTML Style

Each HTML style used by Fireworks creates HTML based off of an HTT or XTT template file. These files are actually Fireworks JavaScript files that are executed during export to dynamically generate HTML for your document. They can be found in the HTML Code folder within your Fireworks installation folder:

(Windows) C:\Program Files\Macromedia\Fireworks 8\Configuration\HTML Code

(Mac OS) Hard Drive:Applications:Macromedia:Fireworks 8:Configuration:HTML Code

Note: The HTML Code folder exists only at the application level in the installation folder, not in the user-level folders. You need administrator-level privileges to access this folder.

Inside the HTML Code folder, you should be able to recognize the HTT files used to export for CSS Layers, Director, and even the Dreamweaver Library. Those associated with HTML styles for an HTML and Images export have their own folders. Within each of those folders is a single SLICES.XTT file used to generate HTML or XHTML for that style. You can open these files in any text editor to change how they export HTML from Fireworks.

The basic HTML export from Fireworks is a table-based layout aligned on the left edge of the page. It's common for people to prefer that this table be centered within the page. By editing the SLICES.XTT file of an existing HTML style, you can easily modify this behavior. You don't even need to know much about Fireworks JavaScript; you only need to be able to recognize some of the HTML elements being used in the script and modify them as needed.

The following steps show you how to edit the Generic HTML style so that you can center the tables upon export:

  1. Find the SLICES.XTT file for the Generic HTML style installed with Fireworks and duplicate it to make a backup.

    Note: Keep this backup in a safe place in case you need to restore the Generic style to its original form.

  2. Using a text editor, open the original SLICES.XTT.

  3. Search for the string "<table". This will give you the location of the script that creates the table tag for your HTML output. It is this tag you will want to modify so that it can be centered. You should find the following script:

    WRITE_HTML("<table ");
if( exportDoc.tableAlignment != "left" ) {
   WRITE_HTML("align=\"", exportDoc.tableAlignment, "\" ");
}

    Here the table tag is being created and the alignment is applied if the tableAlignment property in the exportDoc object is not "left". Coming from Fireworks, however, the exportDoc.tableAlignment value will always be equal to "left". It is only different when roundtrip editing from Dreamweaver (assuming that table alignment was changed there). Because that is not a concern here, you can ignore and simply delete that statement.

  4. Encase the entire if condition for tableAlignment in a block comment to prevent it from being run.

  5. Inside the WRITE_HTML command defining the table tag, add an alignment of "center". The code should now resemble the following: 

    WRITE_HTML("<table align=\"center\" ");
/* if( exportDoc.tableAlignment != "left" ) {
   WRITE_HTML("align=\"", exportDoc.tableAlignment, "\" ");
} */
  6. Save SLICES.XTT.

Now when you export HTML and Images from Fireworks using the Generic style, your table will be created with its align attribute set to "center," effectively centering the table.

Try this yourself using company.png and exporting it with the modified Generic style. You can find company.png in the sample download file (Source Files/company.png). The top of Figure 3 shows the exported output as left-aligned; the bottom shows it centered.

Left-aligned (top) and centered (bottom) export output

Figure 3. Left-aligned (top) and centered (bottom) export output

Even though you can made this adjustment to the exported output, it does not resolve the fact that you're still stuck with this archaic form of HTML that uses tables for layout purposes. In fact, even the align attribute used to center the table in Figure 3 is deprecated (a CSS style should center the table instead).

What this example does do, however, is show you how flexible the HTML styles in Fireworks really are. A simple text edit can completely change the HTML output that Fireworks generates during export. But instead of tweaking the HTML styles provided by Fireworks, go ahead and make your own.

Creating a New Style

Fireworks recognizes HTML styles by reading the folders in the HTML Code folder during launch and looking for any SLICES.HTT or SLICES.XTT template files there. When it finds them, Fireworks makes a new HTML style available in the HTML Setup dialog box, identifying the style with the name of the folder that contains the template file.

Using the following steps, you can create a new HTML style for Fireworks:

  1. Navigate to the HTML Code folder for your Fireworks installation.
  2. Create a new folder named My First Style.
  3. Inside the new My First Style folder, create a new text file called SLICES.HTT.
  4. Restart Fireworks.

Fireworks will now recognize the new HTML style called My First Style. See it appear as an optional HTML style when you open the HTML Setup dialog box (see Figure 4) by selecting File > HTML Setup.

Customized HTML style appearing in the HTML Setup dialog box

Figure 4. Customized HTML style appearing in the HTML Setup dialog box

You may notice that the My First Style style is available only as HTML, not XHTML. This is because you used the .htt extension for the template file. Using XTT provides the style as both HTML and XHTML—just like the styles that come with Fireworks. The difference between selecting HTML and XHTML is just a variable that's accessible within the template script (exportDoc.xhtmlFormat). Despite the appearance that they are two different styles, the same template file is used for both HTML and XHTML versions of the export.

Similarly, most all the options in the HTML Setup dialog box relate to variables that are accessible to the template script during export—something I will cover later on in a little more detail. I like to use HTT because it doesn't flood the style list with duplicate styles. Besides, chances are good that I'm creating the style with XHTML-compliant HTML in mind anyway.

Using WRITE_HTML

Once you create your template file, you can define your style and write the code that's required to create the HTML you want when exporting in Fireworks. The command that drives this process—as you saw when editing the Generic style—is WRITE_HTML. This command accepts a string (actually, any number of comma-separated strings) that will be written to the HTML file being exported.

Start right away with a simple export script for the new SLICES.HTT file used for the My First Style style:

  1. Open SLICES.HTT.

  2. Add the following script:

    WRITE_HTML("Hello World!");
  3. Save SLICES.HTT.
  4. Create a new document in Fireworks.
  5. Export the document using HTML and Images with the My First Style HTML Style.

Find the HTML file created during export and open it. You should find that the HTML file contains the text "Hello World!" The WRITE_HTML command inserted it when the template file was executed during export. It is what's used to create all HTML code and content in the exported HTML.

Note: There is a command similar to WRITE_HTML called WRITE_EXTERNAL_CSS that writes to a CSS file. However, it is used only in external style sheets for CSS pop-up menus.

HTML Export Objects

Simply writing to an HTML file won't give you the complete results you want. You'll also need information regarding your slice layout and possibly any other options set in the HTML Setup dialog box, or even the document itself, to be able to create HTML that works with the imagery being exported with Fireworks.

You can find most of that information in the various HTML export objects available only to HTML style scripts during export:

Note: The exportDoc and slices objects are not capitalized.

The first four objects—BehaviorInfo, BehaviorsList, ImageMap, and ImagemapList—are for slice behaviors and image maps, which is something that's beyond the scope of this article. Nevertheless, they are important when you are dealing with those kinds of things. My focus here is on the exportDoc object and the objects related to slices: slices and SliceInfo. They provide the basic information needed to handle a Fireworks export.

The exportDoc object contains properties relevant to the export as a whole. It provides information such as the document's background color, the folder location of the export and under what name, as well as the name of the HTML style being used. Find out more about exportDoc in Fireworks 8 Help or the Fireworks 8 LiveDocs (Extending Fireworks > The Fireworks Object Model > HTML Export Objects > exportDoc Object).

Here is an example using the exportDoc object:

// Get the file name of the exported document
// and write it to the HTML file
WRITE_HTML("Exported to: "+ exportDoc.filename);

The slices object provides general information regarding slices. Its properties include information on things like the number of rows and columns in the table that the slices within the document define, and the folder location into which images defined by slices are saved. The slices object also acts as a two-dimensional array of SliceInfo objects. Find out more about slices in Fireworks 8 Help or the Fireworks 8 LiveDocs (Extending Fireworks > The Fireworks Object Model > HTML Export Objects > slices Object).

SliceInfo objects are accessible from the slices object and provide information regarding the cells of the slices table. Such information includes alt text and cell or image sizes. SliceInfo objects are provided for every cell in the slices table, whether or not a slice explicitly defines it. Multiple SliceInfo objects may be used to represent a single slice if it spans multiple cells. Find out more about SliceInfo in Fireworks 8 Help or the Fireworks 8 LiveDocs (Extending Fireworks > The Fireworks Object Model > HTML Export Objects > SliceInfo Object).

Here is an example using the slices and SliceInfo objects:

// Loop through each SliceInfo object in the slices object
// and write its cell width and height to the HTML file
var row, col, slice;
for (row=0; row<slices.numRows; row++) {
   for (col=0; col<slices.numColumns; col++) {
      slice = slices[row][col]; 
      WRITE_HTML("Cell: ");
      WRITE_HTML(slice.cellWidth + "x" + slice.cellHeight);
      WRITE_HTML("<br />\n");
   }
}

Going through the slices object and obtaining information about the table structure is the grounds for making HTML that relates to the images Fireworks creates during export.

Reading the Table Structure

When you add slices to a Fireworks document, you are dividing your image into small, rectangular sections that are exported as separate image files. You are also defining a grid, or table, that defines the layout of these sections. Consider the sliced document shown in Figure 5. It consists of one slice that, although it may not be immediately apparent, divides the document into nine different cells in a 3 x 3 table (see Figure 6).

Fireworks document with a single slice

Figure 5. Fireworks document with a single slice

Table cells of a document with a single slice

Figure 6. Table cells of a document with a single slice

Optimized Tables

The Fireworks slice guides, although helpful in showing how an image is sliced up, do not completely convey all the table's details because Fireworks automatically optimizes the layout by joining adjacent cells. It is this optimized version that the slice guides reflect. When you don't consider those optimizations, you have a direct correlation of table cells with the SliceInfo objects in the slices object.

This can easily be translated into HTML in an HTML style. Try it for yourself. Create a new style called Table Structure and then use the following script in the SLICES.HTT file:

// Loop through each SliceInfo object generating a table
// writing the row and column into each cell
WRITE_HTML("<table>\n");
var row, col;
for (row=0; row<slices.numRows; row++) { 
   WRITE_HTML("\t<tr>\n");
   for (col=0; col<slices.numColumns; col++) { 
      WRITE_HTML("\t\t<td>slices["+row+"]["+col+"]</td>\n");
   } 
   WRITE_HTML("\t</tr>\n");
}
WRITE_HTML("</table>\n");

Export the sample buildings.png file in the sample download (Source Files/buildings.png) using this style. The output yields the following HTML:

<table>
   <tr>
      <td>slices[0][0]</td>
      <td>slices[0][1]</td>
      <td>slices[0][2]</td>
   </tr>
   <tr>
      <td>slices[1][0]</td>
      <td>slices[1][1]</td>
      <td>slices[1][2]</td>
   </tr>
   <tr>
      <td>slices[2][0]</td>
      <td>slices[2][1]</td>
      <td>slices[2][2]</td>
   </tr>
</table>

Here is how the browser renders the code:

slices[0][0] slices[0][1] slices[0][2]
slices[1][0] slices[1][1] slices[1][2]
slices[2][0] slices[2][1] slices[2][2]

Despite the first row being depicted as one slice with slice guides in Fireworks (see Figure 5), it is provided as three separate cells (SliceInfo objects) in the slices object. This reflects the actual table structure determined by Fireworks.

To obtain a table using the combined slices, you can use the rowSpan, columnSpan, and skipCell properties of the SliceInfo object. The rowSpan and columnSpan properties, as you can probably guess, relate directly to the rowspan and colspan properties of a regular HTML table. They indicate that the current slice occupies more than one cell. When that happens, those other cells are marked as redundant and skipCell is marked as true. This indicates that the cell should be skipped because it's part of another slice.

The following code shows how they can be used to create HTML that mirrors the slicing being depicted by the slice guides in Fireworks:

WRITE_HTML("<table>\n");
var row, col, slice;
var rowspan, colspan;
for (row=0; row<slices.numRows; row++) { 
   WRITE_HTML("\t<tr>\n");
   for (col=0; col<slices.numColumns; col++) {
      slice = slices[row][col];
      // skip cells part of other slices
      if (slice.skipCell) continue;
      // obtain rowspan and colspan
      rowspan = slice.rowSpan > 1 ? " rowspan=\""+slice.rowSpan+"\"" : ""; 
      colspan = slice.columnSpan > 1 ? " colspan=\""+slice.columnSpan+"\"" : ""; 
      WRITE_HTML("\t\t<td"+rowspan+colspan+">slices["+row+"]["+col+"]</td>\n");
   } 
   WRITE_HTML("\t</tr>\n");
}
WRITE_HTML("</table>\n");

This code exports the following table for the same file:

<table>
   <tr>
      <td colspan="3">slices[0][0]</td>
   </tr>
   <tr>
      <td rowspan="2">slices[1][0]</td>
      <td>slices[1][1]</td>
      <td rowspan="2">slices[1][2]</td>
   </tr>
   <tr>
      <td>slices[2][1]</td>
   </tr>
</table>

Here is how the browser renders the code:

slices[0][0]
slices[1][0] slices[1][1] slices[1][2]
slices[2][1]

It relates directly to the slice guide divisions within Fireworks.

HTML with Images

Creating a table with the appropriate rowspan and colspan attributes in place is more desirable because it matches the images that Fireworks creates with the HTML during export—and chances are good you'll want to include the images in your HTML.

Including images isn't that difficult. Simply use WRITE_HTML to create an image tag and link in the image path. That image path, however, isn't provided to you as directly as something like rowspan. It's actually scattered about in three parts between the slices object and the SliceInfo object. Together using slices.imagesDirPath, SliceInfo.getFrameFileName, and SliceInfo.imageSuffix, you have yourself a full image path to be used in the src attribute of the img tag.

But it doesn't stop there. In addition to generating HTML, HTML style template files let Fireworks know whether it's even OK to export image files too. You may have noticed that these template scripts have not exported any images along with the HTML. This is because those scripts have not given Fireworks the go-ahead to do so. A script does this by simply making the last value in the script be the string "ok". This can be the return call of a function, a variable placed in the script with the value "ok", or simply the string "ok" placed on the last line of the script. When Fireworks reads that last value in the script and sees that it's "ok", it continues with the export process, exporting the images after the HTML file is created. Without that "ok", no images are created.

Plugging this new information into the previous script, along with some width and height properties for the images, you get the following:

WRITE_HTML("<table>\n");
var row, col, slice;
var rowspan, colspan, imagepath;
for (row=0; row<slices.numRows; row++) { 
   WRITE_HTML("\t<tr>\n");
   for (col=0; col<slices.numColumns; col++) { 
      slice = slices[row][col];
      if (slice.skipCell) continue;
      rowspan = slice.rowSpan > 1 ? " rowspan=\""+slice.rowSpan+"\"" : ""; 
      colspan = slice.columnSpan > 1 ? " colspan=\""+slice.columnSpan+"\"" : ""; 
      WRITE_HTML("\t\t<td"+rowspan+colspan+">"); 
      // generate image path
      imagepath = slices.imagesDirPath + slice.getFrameFileName(0) + slice.imageSuffix; 
      WRITE_HTML("<img src=\""+imagepath+"\""); 
      // add width and height attributes
      WRITE_HTML(" width=\""+slice.width+"\" height=\""+slice.height+"\"");
      WRITE_HTML(" alt=\"image\" />");
      WRITE_HTML("</td>\n");
   } 
   WRITE_HTML("\t</tr>\n");
}
WRITE_HTML("</table>\n");
// export images 
"ok";

This exports something along the lines of the following table:

<table>
   <tr>
      <td colspan="3"><img src="images/buildings_r1_c1.jpg" width="300" height="75" alt="image" /></td>  
   </tr>
   <tr>
      <td rowspan="2"><img src="images/buildings_r2_c1.jpg" width="75" height="225" alt="image" /></td>  
      <td><img src="images/center.jpg" width="150" height="150" alt="image" /></td>  
      <td rowspan="2"><img src="images/buildings_r2_c3.jpg" width="75" height="225" alt="image" /></td>    
   </tr>
   <tr>
      <td><img src="images/buildings_r3_c2.jpg" width="150" height="75" alt="image" /></td>  
   </tr>
</table>

Open this page in a browser and you'll see a table filled with your image's slices (see Figure 7).

Exporting the buildings.png sample file

Figure 7. Exporting the buildings.png sample file

I know what you're thinking. Why are tables still being used? Ultimately, that is not what we're after. But the previous scripts do illustrate how SliceInfo objects are presented in the slices object and how they relate to the layout as it exists within Fireworks. This is important to understand when developing styles of your own. If you actually want a table-based layout, you can make your own style in this manner, but you also might want to consider sticking with the HTML styles provided by Fireworks. Those styles have more features and are typically better suited for the job.

Otherwise when you make your own custom style, you'll want to remove the tables completely and take advantage of CSS for your layout, much like the CSS Layers export I mentioned earlier. The CSS Layers export uses absolutely positioned layers to position images instead of tables. Although that approach may be useful, you may wish to have other options for CSS output. Being able to select from among different, custom HTML styles provides this flexibility.

Example of a Simple CSS-Based HTML Style

The following example covers a very basic HTML style used to create a CSS-based layout when exported from Fireworks. It relies on the document having three slices, one for a header, one for a footer, and one acting as a repeating background for all content in between (see Figure 8).

Fireworks slice layout for simple CSS export

Figure 8. Fireworks slice layout for simple CSS export

Objectives

These are the objectives we're aiming for here:

Creating the HTML Style

First things first:

  1. Create a styles.htt file in a folder named Simple Fixed Width CSS in the Fireworks HTML Code folder.
  2. Restart Fireworks.
  3. Open styles.htt up in a text editor.

Fireworks now recognizes the new HTML style called Simple Fixed Width CSS.

Creating the Style with Images

The HTML for this layout will be extremely simple. The layout itself, after all, is extremely simple. It consists of only three images relating to three slices in a Fireworks document. The HTML for each image is just one div tag—three total for three images. Because we're using CSS, img tags won't even be necessary. The CSS will provide the images as backgrounds.

To know what div to assign backgrounds to, the divs will need to have either classes assigned to them or IDs—some kind of identifier that CSS can associate with the element. Because no slice in a Fireworks document can have the same name as another, it's fairly safe to assume that all slice names are unique and can be used as IDs for div tags. That provides the following structure of div tags:

<div id="slice1name"></div>
<div id="slice2name"></div>
<div id="slice3name"></div>

These tags are easily created in a loop going through the slices. Unlike other loops you've seen so far, this loop will want to ignore all automatic slices. This style concerns itself only with user-created slices. For that, the isUndefined property in each SliceInfo object can be checked. If true, the slice is an automatic slice and can be ignored:

var row, col, slice;
for (row=0; row<slices.numRows; row++) {
   for (col=0; col<slices.numColumns; col++) {

      slice = slices[row][col];
      if (slice.skipCell || slice.isUndefined) continue;
      WRITE_HTML('\t<div id="' + slice.getFrameFileName(0) + '"></div>\n');  
   }
}

Note: Single quotes are used in the previous script to make the inclusion of double quotes in strings a little easier.

Creating the CSS to format these div tags that make up the layout is slightly more complicated. The CSS will be used to set the following properties:

Most of these are pretty straightforward. The margin property is consistent for each slice and the width property can be obtained directly from the SliceInfo object. The background-image property is a little more complicated because it contains the image path that will have to be resolved manually from the properties that make it up, but that's nothing that hasn't been done before. The background-repeat and height properties, however, are a little more troublesome.

The background-repeat and height properties have separate values for the middle slice because the middle slice does not have a set height and its background repeats vertically. The other slices—the header and footer—do not repeat their backgrounds and have a height based on their imagery. What you need is some way of identifying the slice so that the appropriate styles can be applied. Given that there are only three slices for this layout, you can use a simple counter in the export script to do this. For each slice, increment the counter by 1. When its value reaches 2, you'll know that the current slice is the middle one.

The style sheet being created for this layout contains one other addition. Aside from creating styles for each slice, it creates a style that defines the background for the entire HTML page so that the images can blend with the document background. This color is based on the backgroundColor property of the exportDoc object. Its value reflects the background color used in Fireworks. That, in combination with the loop to set styles for the slices, gives you the following script:

WRITE_HTML('<style type="text/css">\n');
WRITE_HTML('\tbody { background-color:#' + exportDoc.backgroundColor + '; }\n');

var row, col, slice;
var imagepath, slicecount = 1;
for (row=0; row<slices.numRows; row++) {
   for (col=0; col<slices.numColumns; col++) {
      
      slice = slices[row][col];
      if (slice.skipCell || slice.isUndefined) continue;
      
      imagepath = slices.imagesDirPath + slice.getFrameFileName(0) + slice.imageSuffix;
      WRITE_HTML('\t#' + slice.getFrameFileName(0) + ' {');
      WRITE_HTML(' background-image:url(' + imagepath + ');');
      WRITE_HTML(' margin:0 auto;');
      WRITE_HTML(' width:' + slice.width + 'px;');
      if (slicecount == 2){
         WRITE_HTML(' min-height:200px;');
      }else{
         WRITE_HTML(' height:' + slice.height + 'px;');
      }
      WRITE_HTML(' }\n');
      
      slicecount++;
   }
}
WRITE_HTML('</style>\n');

Notice that the variable slicecount is used to isolate the center slice. The style associated with that slice repeats its background along y axis and has a min-height value set to 200px.

Note: Microsoft Internet Explorer 6 and earlier does not support the CSS property min-height.

Creating a Dreamweaver Image Object

The last step, as indicated by the objectives, is making sure that the HTML exported by Fireworks can be imported into Dreamweaver as an image object. For this to work, all you need is an HTML comment that allows Dreamweaver to recognize the HTML as being such an object. That comment can take a number of forms but has three requirements:

Here's an example of this:

<!--Fireworks Dreamweaver target.-->

It is not uncommon to include the date with this as well. In the style script, it can be added using the following:

WRITE_HTML('<!--Fireworks Dreamweaver target. Created ' + new Date() + '-->\n');

When HTML with this comment is imported into Dreamweaver (Insert > Image Objects > Fireworks HTML), Dreamweaver reads this file and places the HTML in the current Dreamweaver document as needed. Code such as CSS located in the head of the imported HTML goes in the head tag of the Dreamweaver document and code in the body goes in the body tag.

With that in mind, place the CSS code for this Fireworks HTML style in the head of the exported HTML and put the layout with the div tags in the body. Put it all together and you get the following complete HTML style script:

WRITE_HTML('<html>\n<head>\n');

// Dreamweaver import
WRITE_HTML('<!--Fireworks Dreamweaver target. Created ' + new Date() + '-->\n');

// CSS Styles
WRITE_HTML('<style type="text/css">\n');
WRITE_HTML('\tbody { background-color:#' + exportDoc.backgroundColor + '; }\n');

var row, col, slice;
var imagepath, slicecount = 1;
for (row=0; row<slices.numRows; row++) {
   for (col=0; col<slices.numColumns; col++) {
      
      slice = slices[row][col];
      if (slice.skipCell || slice.isUndefined) continue;
      
      imagepath = slices.imagesDirPath + slice.getFrameFileName(0) + slice.imageSuffix;
      WRITE_HTML('\t#' + slice.getFrameFileName(0) + ' {');
      WRITE_HTML(' background-image:url(' + imagepath + ');');
      WRITE_HTML(' margin:0 auto;');
      WRITE_HTML(' width:' + slice.width + 'px;');
      if (slicecount == 2){
         WRITE_HTML(' min-height:200px;');
      }else{
         WRITE_HTML(' height:' + slice.height + 'px;');
      }
      WRITE_HTML(' }\n');
      
      slicecount++;
   }
}
WRITE_HTML('</style>\n');
WRITE_HTML('</head>\n<body>\n');

// Layout HTML
for (row=0; row<slices.numRows; row++) {
   for (col=0; col<slices.numColumns; col++) {

      slice = slices[row][col];
      if (slice.skipCell || slice.isUndefined) continue;
      WRITE_HTML('\t<div id="' + slice.getFrameFileName(0) + '"></div>\n');
   }
}
WRITE_HTML('</body>\n</html>\n');

// Export image files
"ok";

Save this script as your SLICES.HTT file and export company_css.png using it as an HTML style. You can find company_css.png in the sample download (Source Files/company_css.png).

You should get the following CSS-based HTML page (see Figure 9), ready for importing into Dreamweaver.

Exporting company_css.png

Figure 9. Exporting company_css.png

Now whenever you need to create a site that fits this basic layout, you can design it in Fireworks, export it, and then have the HTML and style sheet already complete for when you bring it into Dreamweaver to add content to it.

Where to Go from Here

Now you know enough to make your own custom HTML styles for Fireworks. In doing so, you'll be able to make styles that break from the use of tables for layout and generate HTML (or XHTML) that conforms more to today's standards and your design style.

Bear in mind that this article did not cover image maps or behaviors—this includes pop-up menus (CSS or otherwise). To include those with your Fireworks export, you need to code them within the style. Instead of doing this from scratch, use the code provided with the styles that came installed with Fireworks (Dreamweaver, FrontPage, Generic, or GoLive).

You may find it restrictive that exporting with HTML styles always produces images based on slices. The CSS Layers export gets around this by allowing you to export as slices, layers, or frames—something which is not an option when exporting as HTML and Images (necessary when using HTML styles). However, you can overcome this limitation by creating styles that simply do not export images at all. By removing the "ok" string at the end of a script, you can export the HTML only, relying on images exported beforehand as either layers or frames, or any other means for that matter. Just be sure to reference your images correctly.

Here are some other tips:

All you need is a little time and some simple programming and you'll have Fireworks producing the kind of table-less HTML you've always wanted using your own custom HTML styles.

For more information about CSS styles, visit the CSS Topic Page in the Developer Center.

About the author

Trevor McCauley is a quality engineer at Adobe Systems who works heavily with Flash and Fireworks. Prior to working at Adobe, he worked as a developer for a production company creating various kinds of multimedia and web-based content. In his free time, Trevor develops Flash and Fireworks content for his personal site, senocular.com, and moderates forums on popular Flash-related sites such as Kirupa.com, ActionScript.org, FlashKit.com, and UltraShock.com.