• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Preparing a New Site > Importing Fireworks HTML into Dreamweaver

Importing Fireworks HTML into Dreamweaver

The Exporting process in Fireworks allows you to export and save optimized images and HTML files to a designated location (often a folder). You can then import the HTML file in Dreamweaver.

Dreamweaver has two ways to import Fireworks HTML. First, you can open the Fireworks HTML document directly in Dreamweaver and start editing. It's located in the Files panel, called template.html.

The other approach Dreamweaver offers—which is more flexible—is to insert Fireworks-generated HTML code, with associated images, slices, and JavaScript, into an open document. Dreamweaver detects and resolves conflicts (for example, both the Fireworks and Dreamweaver HTML files will have their own <html>, <head>, and <body> tags), and inserts the appropriate code from the Fireworks file into the location of the insertion point in Dreamweaver.

If necessary, open jadevalley_template.html.

You'll use the second approach mentioned in the preceding paragraphs and import the Fireworks HTML file into the file you just created and titled.

Put the cursor on the top left corner of the page.

Before importing Fireworks HTML into Dreamweaver, always position the insertion point in the document where you want the imported content to start.

Choose Insert > Image Objects > Fireworks HTML.

You can also use the Insert bar to insert Fireworks HTML into a HTML page in Dreamweaver: In the Common category of the Insert bar, choose Images > Fireworks HTML.

Both methods will bring up the Insert Fireworks HTML dialog.

In the Insert Fireworks HTML dialog, click Browse to select template.html and click Open. Do not check the Delete File After Insertion option.

You named the HTML file template.html upon exporting the whole-page design from Fireworks, and this is the file that you will use to import into Dreamweaver.

If you select the “Delete file after insertion” option, the original Fireworks HTML file will be moved to the Recycle Bin (Windows) or Trash (Macintosh) when the process is complete. Use this option only when you are certain that you no longer need the Fireworks HTML file after inserting it in Dreamweaver. If you do delete the file and later discover you need it after all, you can always re-export it from Fireworks.

Click OK to insert the Fireworks HTML code.

This command enables Dreamweaver to insert the Fireworks HTML code, complete with its associated images, slices, and JavaScript into the document in Dreamweaver.

Press F12 to preview the page in a browser. If Dreamweaver prompts to save, click Yes (Windows) or Save (Macintosh).

Take a few moments to review the page in the browser. It should be identical to the exported Fireworks HTML, with the Jade Valley logo and a partially functional navigation bar (the buttons change when rolled over, but nothing happens when you click them).

Save jadevalley_template.html.

You've finished the inserting Fireworks HTML process. Now you can start reconstructing the original design and dropping in placeholders.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint