Courses Home

Dreamweaver Home

Macromedia

DW Workspace

Defining a Site

Creating Links

Sample Web Site

Fireworks Imports

Web Searches-Title

Web4students

Lab Assignment

Common Graphics

Adventure Travel

Fireworks File

adventure5.htm

DreamWeaver/ Web Graphics Introduction

Importing & Editing Fireworks Objects in DreamWeaver

Dreamweaver and Fireworks have integrated features which permit you to create web design "pages" with common graphics and HTML "slices."   We have created demonstration files using the Adventure Travel exercises from Aho, Macromedia Studio MX 2004 Step-by-Step, Course Technology, ISBN 0-619-18390-X. 

First, create an HTML page In Fireworks with graphics, buttons, and reserved areas for inserting text or links.  For a complete page where you do all the editing in Fireworks and reserve no HTML Slices for text, see the file adventure5-rjk.png.

Then, slice the Fireworks page, creating your graphics slices and HTML slices where you will later add copy in Dreamweaver.  To learn how to reserve HTML Slices in your Fireworks production page, see our Fireworks Export Page tutorial.  Use the Slice Tool or the Polygon Slice tool.  After you create the slice, use the Properties Inspector in Fireworks to convert the Slice "Type" to HTML.

Reserve a "clean" area for your HTML slice.  We found it was best to remove the grey circle from the Fireworks production copy and use the Slice tool, not the Polygon slice tool, to make an HTML slice.

Save the Production Copy as a .png file before exporting.  You may need to modify and re-export this "Fireworks template page" later.

Now you're ready to export the sliced page from Fireworks as an HTML document. Instructions on how to do this can be found at the Fireworks export page.

Then, import the Fireworks HTML documents into DreamWeaver. The instructions for importing Fireworks HTML to DreamWeaver are found below on this page.

We copied the entire Adventure Travel folder and renamed the folder "adventure_travel" 

Place all the Fireworks .png pages you wish to export in the adventure_travel folder.  That way, you can easily create the button links by typing "biking.htm" in the Fireworks link box on the Button's properties inspector, as described on Fireworks page 76.  Note the phrase "("you may need to ask your instructor for the complete path name)."  If you put the adventure5-rjk.png file into the adventure_travel folder with all the other htm files, e.g., biking.htm, then the link path for the button in Fireworks will be simply "biking.htm" -- because you are in the same folder.  You should understand this from learning about links in your HTML course. 

Save the exported Fireworks document with its new name, "adventure5.htm" into the same adventure_travel folder as the other HTML files.  This will assure that all the button links will work.

Take a look at the completed file, adventure5.htm.  Notice the HTML slice.  We edited the text to add the Impact header and the Verdana text in Dreamweaver, after we exported.  You could add a background grey color or other features within the HTML slice in Dreamweaver if you wished. 

The HTML slice is fully editable in Dreamweaver -- that's the beauty of designing in Fireworks and reserving HTML slices for text that you add using Dreamweaver once you have exported the production .png file from Fireworks. 

Thereafter, you can convert the Dreamweaver page with imported Fireworks HTML into a DreamWeaver template if you wish, and use the template throughout your site.

Fireworks. After you create your basic page designs in Fireworks (including common graphics, logos, picture place-holders and HTML place holders [HTML Slices]) you export your Fireworks graphic (a .png file) to create associated html files and tables.

DreamWeaver - Importing Fireworks HTML. Import your Fireworks HTML files into DreamWeaver, using the steps below.

Importing & Editing Fireworks Objects

• To import Fireworks objects & pages:
  • Open new html document or the document in which you would like to place the objects.
  • Select insert ~ image objects ~ Fireworks HTML.
  • Browse to find file you exported from Fireworks -- the HTML equivalent.
  • Do NOT check delete file after insertion.
• To edit Fireworks options after importing.
  • Select object to be edited in your Dreamweaver page.
  • Choose the edit in fireworks button in the Property Inspector.
  • Edit graphic in Fireworks.
  • Re-export whole document or individual slice.
    

Adapted from and with grateful acknowledgement to Prof. Krista Perry, Macromedia Studio MX Workshop, Radford University, May, 2004