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,
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
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
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.
you can convert the Dreamweaver page with imported
Fireworks HTML into a DreamWeaver template if you
wish, and use the template throughout your site.
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
DreamWeaver - Importing Fireworks HTML. Import your
Fireworks HTML files into DreamWeaver, using the steps below.
Importing & Editing
- 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
- 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