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).
Getting started
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.
Identify the issue
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."
Common user errors
After you export: other areas to consider
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.
Start with the PNG file
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).
- Until fully familiar with Fireworks HTML code and how it works, we strongly recommend exporting to the same folder as the final HTML page that you intend to insert Fireworks objects into. There is path information in the various JavaScript portion of the file that Dreamweaver or other HTML editors will NOT update when it is inserted into an HTML page, and problems can occur because of an incorrect path.
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.
Continue with the HTML file:
After you export your Fireworks HTML, it's a good idea to check it out and see what you've got. Open your browser and then choose File > Open to open a dialog that allows you to browse your hard drive and locate the exported Fireworks HTML. Select the file and click Open and then click OK. Test all the JavaScript actions, view the animations and check the status bar to see if links and status bar messages are working properly. Also check your Alt tags. If you don't see any problems, then Fireworks has done it's job. Try opening the HTML file in your HTML editor. Test in the browser from there.
- 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).
- Look for any JavaScript functions that may be duplicated on your page. Netscape generally ignores any behaviors whose functions that are duplicated.
- 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.
- If you get a JavaScript error when you insert into your page, look for any misplaced tags, such as META tags which should be in the <head> of the document.
Additional information
Look at the Fireworks Support Center and the Developer and Design Center for current updates and issues.
Sign in to your account