1
Last updated on
Introductory note:The issue addressed in this TechNote pertains mainly to Macromedia Fireworks 1 and 2. The Export process in Fireworks, as well as Macromedia Dreamweaver's ability to to keep track of links in its site management feature, has improved in later product versions. In Additional information below you'll find links to resources for similar information for later product versions.
Fireworks to Dreamweaver integration
When exporting sliced graphics from Fireworks, you also have the option to generate an HTML page that contains the table information necessary to make all of the slices display as one integrated graphic. The Slice tool separates each slice into an individual image, and each image is placed into its corresponding table cell, similar to pieces in a puzzle. Understanding what pieces Fireworks creates with the Slice tool, and how the pieces fit together, will assist you in integrate the resulting files into your Web page.
How does the slice tool work?
The slice tool draws regions within the graphic, which will be exported as separate image files (slices) from Fireworks. Fireworks combines the separate image files back together by creating a table that inserts one of the images in each of the table's cells. The table tags reside in the HTML page that is created when the files are exported. The table is generated automatically by Fireworks (when you choose an HTML style in the Export dialog box).
Why do table cells contain broken icons rather than images after a copy and paste of the table tags?
In the Export dialog box (choose File > Export, then click the "Next" button in the Export Preview dialog box) there are two different elements that are being saved. The top of the dialog box allows you to browse to indicate where the image slices (the separate GIF or JPEG files) should be saved. The HTML location indicates where the HTML page will be saved. Make sure that this location contains the HTML page that the source code will ultimately be pasted into. The two pages must reside in the same directory before copying the table information;if they are in different folders, the paths will be broken and the images won't show up when you preview the page in a browser.
To illustrate the process, see the steps below:
|
|
This is how an image looks before using the slice tool: |
|
|
|
|
|
|
|
2 |
This is how the image looks after the slice tool has been used to designate the slice areas: |
|
3 |
When exporting the files from Fireworks, the resulting slices will be individual files: |
|
4 |
Fireworks will also create a table, which will have the table cell information necessary to fit all the separate slices back into their proper location: If you look at the source code, you'll notice that the table was created with more than three table cells. Fireworks automatically creates transparent GIFs (called Shims) that fill in the extra empty table cells that are created in order to make the table perfectly square, and to allow the table to display correctly in every browser configuration. The default export setting inserts the Shim slices in the extra top row and right column of table cells to ensure that the content you've designed doesn't get distorted in the browser. The default setting is recommended in order to get the most reliable table renderings in all browser configurations. To change this default, open the Document Properties by choosing File > Document Properties or by clicking Setup in the Export dialog box to access the slice options. Click the Table Shims pop-up menu to select either "No Shims,", "Shims from Image", or "Transparent Image"(the default). |
|
5 |
Along with the information in the table formatting, each table cell also contains the path to find the corresponding slice, so that the image will appear in the cell. This is an example of the lines of code in the table: In the example above, the three image slices are linked by a path highlighted in the matching color of the balloons. The paths in gray refer to the transparent Shims that Fireworks created. The path that links a slice to each cell is document relative to the HTML page that Fireworks creates. The paths in the code above indicate that the HTML page balloons.html lives a folder one level up from the folder called images. The path points the HTML page to look in a folder called images, where all the GIF files live. As long as the relationship is maintained between the slices and the HTML page, the links will be correct. If the HTML page is moved to a different folder, or if the slices are moved from the images folder, the paths will be broken and the images will not appear in the table cells. |
|
6 |
When exporting the files from Fireworks, it is critical that the HTML page created by Fireworks is exported into the same folder as the HTML page you will be pasting the table information into. In the example below, the local root folder is named MySite. Inside the MySite folder is the index.html page and a folder called images. Since the source code from the HTML page that Fireworks creates will be copied into the index.html page, the Export dialog box should be configured so that the slices will be saved in the images folder and the HTML page will be saved one level up, in the MySite folder. |
|
|
|
|
7 |
As long as both HTML files live in the same folder, the paths will not be broken, and the table cells will show up with the image slices inside. The page that the code is copied into from Fireworks will use the same path, because it is in the same location as the page that Fireworks created. After exporting the slices and HTML page from Fireworks, the site structure looks like this: The two HTML files, balloons.html and index.html are both located in the same folder. When the HTML source is copied from the balloons.html file into the index.html page, the paths will be correct, and the images will appear in the table cells. |
|
|
The Export section of the Fireworks. |
|
|
The Fireworks and Dreamweaver Integration section of the Dreamweaver. |
|
|
To upgrade your current version of Dreamweaver and Fireworks, visit the Macromedia On-line store. |
Sign in to your account