(1) (2)
With the release of Macromedia Dreamweaver/Fireworks
4 Studio, Web designers have the tools to work more efficiently
than ever before. It is easier to interchange files between the
two programs than ever before. These interchangeable files can
include links, image maps, table slices, and more. The advantages
of these two programs working symbiotically are many. You can
create graphics with image maps, slices and tables in Fireworks,
then export them to Dreamweaver. In Dreamweaver, you can then
check the download time and if the graphics are too large or
don't fit on your page the way you envisioned, you can edit the
graphic in Fireworks, optimize it, crop it, etc. When you save
it, it goes right back into Dreamweaver.
Tutorial 1 - Importing
a Sliced Image into Dreamweaver
I created this image in Fireworks. It's a title graphic for my new 'Extreme
Sports' business I'm thinking of starting. The file consists of 4 photos, and
some text elements. For this project I sliced it into 5 parts and exported
it as html and images.
 |
|
Sliced title image
|
To insert the html and image slices into an existing
Dreamweaver document, you place an insertion point where you
wish the html table to appear. Now click the 'Insert Fireworks
HTML' icon in the toolbar, pick the .html document and hit OK.
The table and graphics drop into your Dreamweaver document. Below
is the outcome.
Another way to import such documents are to do
an - Edit - Copy HTML Code, follow the wizard, then go into Dreamweaver,
place the insertion point and go - Edit - Paste. A third way
is to go - File - Export - in Fireworks, choose - HTML and Images
- select - Copy to Clipboard and save. Then go into Dreamweaver,
place the insertion point in Dreamweaver and go - Edit - Paste.
Editing Fireworks Table
Now that my header has been added to my Web page I decide to make some fast
changes. I want to change the color and size of the letter 'X' in 'Xtreme'
and rearrange my image slices. I select the table containing my graphics
and click the 'Edit' button in the 'Property Bar.'
 |
|
Editing tables/images in Dreamweaver and Fireworks
|
(1) (2)