Topics in Desktop Graphics - (CPTR240) - Lectures

Macromedia FIREWORKS MX (2004)

- Lecture 03 - Ver. 1.1
Importing

Arranged and adapted by: David Siguelnitzky -

Creating Macromedia Fireworks MX documents from HTML

Some web designers face a challenge when they inherit a website. While they have the end-product—the HTML files and associated images—they don't have access to the original source files from which that content was generated. And when it's time to maintain or update the site, they must laboriously rebuild the source files.

Macromedia Fireworks MX offers a solution: the ability to reconstitute (or import) HTML tables, so that you can create new PNG source files for the content. Once in Fireworks MX, web content can be modified in any number of ways. You can modify graphics, change a page's layout, alter links to URLs, and work with interactive elements like behaviors, buttons, and pop-up menus. The ability to reconstitute HTML tables in Fireworks MX also enables you to do the following:

Modify the layout of a hard-to-format HTML table

Combine the content from two or more pages into a single document

Quickly and easily split out the tables from a single web page into multiple pages

By completing this tutorial, you will get hands-on experience reconstituting HTML tables by opening and importing various types of web content in Fireworks.

To complete the tutorial, you'll need the following source files:

Download the source files (1MB)

When the file decompresses, a folder named import_html is created on your system.

Identify web content that Fireworks can import

Fireworks can import web content as long as it resides within a properly-formatted HTML table. The file must contain valid opening and closing <BODY> and <TABLE> tags.

Fireworks can reconstitute HTML tables from files of the following types:

HTML—Hypertext Markup Language

XHTML—Extensible Hypertext Markup Language

SHTML—HTML that contains a server-side include (SSI)

CFM or CFML—Cold Fusion Markup Language

ASP—Active Server Pages

JSP—Java Server Pages

PHP, PHP3, or PHP4—PHP Hypertext Preprocessor

DWT—Dreamweaver template

Fireworks requires table code for import from these formats because it generates content in table form when exporting to HTML format.

If a web page contains more than one HTML table, you can open or import the first table in the file, or open all tables in the file. If you choose to open all tables, Fireworks opens them as separate documents. Details of these procedures are covered later in the tutorial.

Understand the limitations

Although Fireworks can open and import a wide variety of web content, it would be impossible to anticipate and interpret every style and type of code that exists. If code isn't formatted using industry standards or Fireworks can't recognize a scripting function, it will be unable to import the file successfully.

In some cases, Fireworks will display a message informing you that the file doesn't use valid code. In other cases, Fireworks will open the file anyway but its content may not appear exactly as it did in your browser. In this case, you can often make the necessary adjustments within Fireworks to make the file appear and behave as it did before.

In general, anything that you can create in Fireworks—such as sliced table graphics, navigation bars and pop-up menus—you can import, as long as the code used is generic enough that it can be recognized.

The following sections cover the types of web content that Fireworks can import, as well as limitations for each.

Behaviors

In Fireworks, behaviors are bundles of JavaScript code that enable you to add interactivity to your web pages. A behavior consists of an event and an action triggered by that event.

You can import any behavior that Fireworks is capable of exporting, including some behaviors it shares with Macromedia Dreamweaver MX. Behaviors must occur in between the <BODY> tags of the HTML file you wish to import.

Custom scripting

If your file contains custom scripting, Fireworks will still open the file, but the slices containing the script will import as HTML slices. Any script (and code such as form data) in HTML slices is preserved upon re-export to HTML, as long as it exists within <TD> tags in the table before you bring it into Fireworks. Fireworks cannot import custom scripting from the <HEAD> section of a file; it only imports content that resides inside HTML tables within the <BODY> section.

Buttons and rollovers

If a file contains Fireworks or Dreamweaver buttons or rollovers, Fireworks imports the appropriate graphics and the behaviors associated with them. The states for buttons import as graphic objects onto separate frames; they won't import as Fireworks button symbols.

Sometimes the target image and swap image for a disjoint rollover will import onto the wrong frames. If you notice this to be the case, temporarily hide slices, select the target image on the canvas, and drag the selection indicator (the small square beside the frame name) in the Frames panel to the correct frame. Do the same for the swap image.

Pop-up menus

Fireworks can import pop-up menu code as well. Fireworks provides full support for HTML-based pop-up menus.

Image-based pop-up menus, however, are converted to HTML-based menus upon import.

Hotspots and image maps

Although Fireworks can import HTML files that contain image maps with hotspots, unexpected results may occur, particularly if a hotspot overlaps a slice, or if a hotspot triggers a swap image behavior.

If a hotspot and a slice overlap, a new hotspot is generated for each slice it overlaps. These hotspots appear stacked one on top of the other, so they may be hard to see. To restore the hotspot, delete all but one of them and rename it in the Property inspector.

If a hotspot triggers a swap image behavior, additional frames are created that contain the same hotspot image as the one on the first frame of the file.

Table cell properties

Table cells that contain text or code are imported into Fireworks as HTML slices. Cells that contain images are imported as images. Only HTML slices will retain their cell attributes upon import and export. Attributes for cells that contain images are discarded.

In addition, Fireworks does not accept width or height percentages in tables or tables cells. Width and height of table cells is determined solely by the size of the images in the table.

If the table contains an entire row or column of HTML slices, Fireworks assigns a default width or height (whichever is appropriate) of 25 pixels.

Nested tables

Fireworks reconstitutes nested tables as a single document. Be aware that this can create unexpected results, especially if the tables contain interactivity that causes something to change in another table, as a disjointed rollover does, for example.

Note: When you re-export the HTML, Fireworks will export the content as a single table by default unless you set the Space With option in the HTML Setup dialog box to Nested Tables. See Fireworks Help for more information.

Animation

If the HTML file you export contains an animated GIF file, only the first frame of the animated GIF will import.

If the HTML file contains embedded media file such as a Macromedia Flash SWF, the link to that file will be preserved as code in an HTML slice. You won't be able to view the SWF in Fireworks, but it will still be linked to the HTML file upon export.

Create a new Fireworks document from an existing web page

Now that you've learned the types of web content that Fireworks can import, you're ready to try out the feature. First you'll preview the file that you'll be working with.

1. On your hard disk, navigate to the import_html folder you downloaded at the beginning of the tutorial. Open the Start folder, and then the single_table folder. Drag the file named navbar.htm into an open browser window.

A navigation bar appears for Global Car Rentals, a fictional company. You'll use this navigation bar to practice opening and modifying an HTML file in Fireworks.

2. Move the pointer over the elements on the page. Each button in the navigation bar highlights when you roll over it. Test the Vehicles button by clicking it. Most of the buttons link to pages on http://www.macromedia.com/support/fireworks/tutorial_index.html like this one does. If this were a real website, these buttons would link to the appropriate pages within the site.

Note: Clicking the Home button causes a "File not found" message to appear because it links to a file that you haven't created yet.

3. Click your browser's Back button to return to the Global web page, and close the browser window when you are finished viewing the file.

4. In Fireworks, choose File > Open, and navigate to the import_html/Start/single_table folder.

5. Choose the navbar.htm file and click Open. The file opens in Fireworks

Notice the filename at the top of the document window. Although the titlebar displays navbar.htm as the filename, the document displayed in the document window is actually a PNG file. If you were to save the file at this point, the Save As dialog box would display a filename with a .png extension. This is intentional: Fireworks provides this feature so that you can make changes to the document in Fireworks as if it's your working file, or source file, while protecting your original document. To save over the original file, you must export it as HTML. The procedures for exporting HTML are covered later in the tutorial.

6. Look at the Layers panel. If the Layers panel is not open, choose Window > Layers.

All graphic elements and slices required for the web page are shown in the Layers panel.

7. Click some of the slices, either in the document window or in the Layers panel.

The slices covering the buttons in the navigation bar have URLs associated with them, which are displayed in the Property inspector. If the Property inspector isn't visible, choose Window > Properties.

8. Look at the Frames panel. If the Frames panel is not open, choose Window > Frames.

A new frame is created for each button state.

9. Click each frame to view the frame's contents.

In the document window, different graphics for the buttons in the navigation bar appear in each frame. The original web page had three-state buttons, but notice how four frames were created when you opened the page. Fireworks always creates four frames for imported buttons, even if the original buttons contained fewer button states.

10. Choose File > Save (the Save As dialog box opens)

11. Change the filename to global.png.

12. Navigate to the import_html folder on your system where you downloaded the tutorial source files. Open the Export/single_table folder, and click Save.

Fireworks saves the PNG file in the location you specified.

Source: David Jacowitz and Gary White - Macromedia FIREWORKS MX (2004) - http://www.macromedia.com/support/fireworks/tutorial_index.html

Return to Courses | Course Content