Workshop Mission Services Portfolio Content Contact
  bookmark me  
Home > Content

(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)

 

1.818.509.2649