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.

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.

Page 3 of 6

Previous Page

Next Page