Macromedia Studio MX Bible

You can add a significant wow factor to your site by using Dynamic HTML (DHTML). Generally, this involves using Layers created in a Web page through the use of CSS positioning of <div> tags. If your project's graphics are designed in Fireworks MX, why not use Fireworks to generate some of the code you'll need to implement the elements later?

CSS layers are some of Firework's useful exports. Fireworks takes elements from slices, layers, or frames and exports them as individual layers in an HTML page. You can use the page in Dreamweaver MX.

The following steps demontrate how you use Fireworks MX to save time and effort in Dreamweaver by exporting those puzzle pieces as images used in prebuilt CSS Layers:

1. Open the file  puzzle_card.png from the Bonus Tutorials\puzzle folder.

2. Set the Canvas color for the file to Transparent (Modify® Canvas® Canvas Color) and save.

3. Click the Preview Tab. Set the optimization of the file to use GIF at 16 colors, and choose the Alpha Transparency option from the Transparency menu.

4. Click back to Original and choose File® Export.

5. In the Export dialog box, navigate to your current site folder, and from the Save As menu, choose Save as type® CSS Layers. In the Source menu, choose Fireworks Frames. Enable the Put Images in SubFolder option so that Fireworks will add an Images folder. Click OK to complete the export.

6. Save the file and close it. Be sure to complete the programming of the DHTML puzzle in Dreamweaver MX.

 Dreamweaver MX   See Chapter 44 to program your puzzle pieces using the Drag Layer behavior in Dreamweaver MX.