This TechNote provides a standard process for troubleshooting images and HTML files that originated in Fireworks. The overall intent of this TechNote is not to provide answers to specific issues, but to help users understand where their code has gone wrong. If you are troubleshooting pages that contain Pop-up menus look at Troubleshooting Pop-up Menus from Fireworks (TechNote 18538).
To troubleshoot the outcome of a Fireworks export, a user will need access to the following things:
- The original Fireworks PNG file from which the files were exported.
Most troubleshooting begins by opening the source file, the PNG file created in Fireworks. This is not the HTML file exported and published on the Internet. Rather, it is the original file created in Fireworks. Although the code will not be read here, this is the place to check the settings that mandate how the code is exported from Fireworks.
- The HTML and images exported from Fireworks.
Note: New to Fireworks MX, if a PNG file cannot be located, a new one can be generated in Fireworks MX by using the Reconstitute Table feature in the File menu. This feature will create a new PNG file out of HTML code that contains a table. This feature will not recreate the editable text and vectors that were available to you in the original PNG file, so it is important to save and keep your original Fireworks source PNG files. See the tutorial Creating Macromedia Fireworks MX documents from HTML for more information on this new feature.
When troubleshooting any problem, it is important to isolate the problem. The following questions will help you identify the parameters of the issue:
- What is the problem?
Does the problem impair performance or appearance? Does it act differently than you would expect?
- Where am I seeing the problem?
Identify whether the issue is present in the browser or in Fireworks. If in the browser, does it appear in all browsers or in only one?
- When does the problem occur?
Does the issue occur when you are in Fireworks and are previewing? Does it happen only when previewing in the browser from within Dreamweaver? Does it only occur after you've exported the HTML and have merely opened it in the browser? Determine exactly the point at which you observed the problem so you can eliminate the need to repeat steps in the future.
- How did I get here?
This is one of the hardest questions to answer, especially if you are a creative type and have performed many steps and undos to get to your current preview or export operation. If you can identify the steps leading up to the observed problem, you will most likely be able to identify the cause of the problem.
Once you have answered the questions above, try using those answers to describe the problem you are going to troubleshoot. The following paragraph is an example of the result of the above questions:
"In Internet Explorer, when viewing my exported HTML file, some of my exported images appear distorted in their table cells, others are from other slice areas. This happened after I opened the HTML Setup and changed my file naming settings for slices and then exported to a folder where I already had some images saved."
Attaching CSS tags inappropriately, or placing the CSS tags incorrectly in a table created in Fireworks can cause tables to look broken.
Exporting to a location in your site and maintaining document relative links
Verifying that site definitions are viable.
Before you export your file you should always preview it in a browser by choosing File > Preview in Browser. Doing this creates a temporary HTML file on your system, the location of which will vary by operating system and version. Since Fireworks is not site aware, any document relative or scite root relative URL links will not work properly until you have exported the file to the correct site directory. The image and rollover links will work however. If anything does not display correctly, focus your attention on this section of this TechNote for suggestions.
Check the slices, hotspots and buttons in the PNG file
If your file uses a button, a slice or a hotspot, then you will end up with at least one HTML file and at least one exported image file. Each slice or button will be a separate image, and will generate a separate table cell in the resulting HTML table.
- Make sure slices do not overlap each other or overlap buttons on the Fireworks canvas. Overlapping slices will increase the number of exported images and may prevent your behaviors from working. See Overview of slices and slice issues (TechNote 15903) for more information.
- Hotspots that have behaviors attached to them must be on top of any slices that share the same canvas space or their behaviors will not work. Check the Web Layer's layer stack to see if you have any problems of this kind, and reorder the hotspots to the top if necessary.
- If your file has any HTML slices, preview in a browser before exporting and adjust the contents of such slices so that they don't break your table apart. Content in HTML slices might cause the Fireworks HTML table to be expanded in such a way as to leave gaps between the images. Remember that Fireworks does not display the contents of an HTML text slice, so previewing in a browser is the most dependable way of judging how the contents of that slice will act.
Check the HTML Setup for the PNG file if you are exporting HTML
The HTML Setup dialog box is available by choosing File > HTML Setup.
- HTML tables can be exported using spacers or nesting to maintain table size and shape. If your table acts unpredictably in the browser, you may want to choose to use either spacers or nesting. Sometimes no form of table control is needed, and if your table is too complex, Fireworks will automatically space the table with spacers.
Note: If you export using the Nested Tables- No Spacers option and your slice arrangement causes the tables to nest more than 8 deep, Fireworks will default to using a 1-Pixel Transparent Spacer setting for your table.
- File naming selections in the Document Specific tab of the HTML Setup can cause exported images to overwrite each other. See How to use HTML Setup in Fireworks (TechNote 16182). Also verify here that the appropriate HTML style is used (Dreamweaver for Dreamweaver HTML, FrontPage for FrontPage HTML, etc.).
Check the export settings for the PNG file
When done with your file, you will have to export to get your finished files. The PNG file you save is the always-editable Fireworks source file, but the exported files are what will actually be used in the browser.
- Check the optimize settings of the document and of each slice to make sure the appropriate options were exported. See Exporting and saving files (Fireworks Article). Bear in mind that TIFF, PICT and BMP files will not display in browsers, and PNG files have only limited support in some browsers.
- If your file has slices, make sure you choose to export HTML and images, and verify that you are choosing to export slices. SeeOverview of slices and slice issues (TechNote 15903).
Note: Because Fireworks is not "site aware" it exports HTML that will contain document relative paths to any images it exports. If site root relative paths are desired, changes will have to be made in the HTML to reflect that style. This TechNote does not address issues specific to using site root relative paths.
- Browsers and servers can be very picky about file and path names. Never use space characters or any high ASCII characters in the path of file names. Some servers do not recognize uppercase characters, and though you are testing locally, now is the right time make sure this is not an issue. Look at Server issues (TechNote 14832).
Note: Since slice names are used to create the file names for images, you are prevented in Fireworks from naming a slice in a way that will cause problems.
- Most HTML editors do not change the code of HTML files opened in that application. There could be some reason such as site definition settings that could cause problems. Rebuild the site cache, or create a new site, if problems arise.
- If you are exporting to a Dreamweaver site, See Inserting a Fireworks table into Dreamweaver (TechNote 15687).
- If you are using FrontPage see Exporting and inserting Fireworks HTML into FrontPage (TechNote 16633).
- Once you have inserted the Fireworks HTML into a Dreamweaver file, in the course of working with your file, you might inadvertantly place a CSS tag inside the Fireworks table. Look at the CSS code, where is the CSS tag in reference to the table tag? If the CSS tag is inside of the <td>tag and viewed in some versions of Netscape spaces can be added by the browser that may break-apart or dislocate cells.