Dreamweaver in a Nutshell-Dreamweaver in a Nutshell

13.3 Fireworks

Fireworks 4 (FW4) is bundled with DW4 in the Dreamweaver 4 Fireworks 4 Studio. This section covers integration between FW4 and DW4 (earlier versions of Fireworks offer more limited integration).

Fireworks isn't just a bitmap and vector graphics editing program—it can create interactivity, sliced image tables, links, and image maps. See Fireworks' Help Welcome option for tutorials and lessons on creating animations, rollover effects, and pop-up menus in Fireworks. Also see Macromedia's Using Fireworks manual and Chapter 12 in Macromedia's Using Dreamweaver manual.

13.3.1 Creating Tables in Fireworks

Layout tables can create an interface that defies the grid pattern typically associated with tables. Using Fireworks' slice feature, you can optimize each area of your page separately and then export it as a layout table. You can combine GIFs and JPEGs in the same table, or use animated GIFs for some slices while applying rollover effects to others.

When slicing your table, start with the complete image. Segment it into as simple a grid as possible, and block out the areas that will become rollover images and animated GIFs. To slice the image in Fireworks, use the Slice tool to draw the slice area on the image. (You can also select an object with Fireworks' pointer tool or select an area with its marquee tool, and then choose Insert Slice.)

Figure 13-7 shows what a sliced image might look like in Fireworks. For more tips on using slices to create tables and optimize images, choose Help Lessons Creating Slices from Fireworks' Help menu.

Figure 13-7. A sliced Fireworks image

Export the sliced table from Fireworks using File Export Preview (see Section 8.1.2.1 in Chapter 8), and insert it into Dreamweaver using Insert Interactive Images Fireworks HTML or the Insert Fireworks HTML button in the Objects panel's Common category (see Chapter 5). Changes made to the layout table in Dreamweaver are automatically reflected inside Fireworks (and vice versa). Figure 13-8 shows what the table might look like after being imported into Dreamweaver and turned into a template.

Figure 13-8. A sliced table with editable template regions

If you are not using Fireworks, manually cut the image and save each slice as a separate file. Create a table within Dreamweaver and use Insert Image to place each slice in a table cell. Resize the cells, if necessary, and set the border, cell padding, and cell spacing attributes to zero to create a seamless layout. Furthermore, you should ensure that images are aligned in the top-left corner of the cells using the horizontal and vertical alignment attributes. Place transparent spacer images at the right and bottom of the table to prevent columns containing text from expanding without limits.

13.3.2 Creating Rollovers Using Fireworks

You can create rollover effects in Fireworks and then import them into Dreamweaver as outlined in Section 13.3.2.1.

13.3.2.1 Procedure 4

Launch the Fireworks 4 application.
In Fireworks, choose Help Lessons Creating Rollovers with Drag-and-drop Behaviors.
The Fireworks lesson walks you through creating two kinds of rollovers. First you'll create a rollover effect that replaces the image being rolled over. Then you'll create a disjoint rollover, in which rolling over one image causes a text label to appear elsewhere (similar to a tool tip). When you finish the tutorial lesson, continue with Step 4.
In Fireworks, set the export format to JPEG (or GIF) under File Export Preview Options. Using rollover effects with animated GIFs isn't advisable because browsers get confused about which frame of the animated GIF to display.
Use Fireworks' Export dialog box (accessible via the Export button in the Export Preview dialog box or using File Export) to export your work. Set the Save As Type option to HTML and Images; set the HTML option to Export HTML File; set the Slices option to Export Slices; enable the Put Images In Subfolder option (new in Fireworks 4) to export the slice files to the chosen folder.
In Fireworks, while still in the Export dialog box, choose a filename for your HTML file and click the Save button to export the table and images (see Section 8.1.2.1 in Chapter 8 for details).
Open the exported table in Dreamweaver's by using File Open, or insert it into an existing document by using Insert Interactive Images Fireworks HTML or the Insert Fireworks HTML button in the Objects panel's Common category.
All necessary behaviors and assets are transferred to your Dreamweaver document, and your rollover effect can be previewed in a browser (F12).

13.3.3 Dreamweaver and Fireworks Integration

We've seen how to import HTML tables and rollover effects from Fireworks into Dreamweaver. Similarly, you can create a pop-up menu in Fireworks and import it into Dreamweaver. (In Fireworks, choose Help Lessons Creating a Pop-up Menu for details.)

Dreamweaver and Fireworks use Design Notes to ensure that changes made in one program are accessible in the other. Table 13-1 lists the commands in Dreamweaver that require or enable integration with Fireworks.

Table 13-1. Fireworks-related operations in Dreamweaver

Description

Dreamweaver operation

Insert .png, .gif, and .jpg files created in Fireworks (or another program).

Insert Image

Edit the original source image (.png file) used by Fireworks and recreate the .gif or .jpg file.

Double-click the image in Dreamweaver's Document window

Optimize the web palette and format of an image.

Commands Optimize Image in Fireworks

Create a web photo album from a folder of images.

Commands Web Photo Album

Reload an image in Dreamweaver when it is modified in Fireworks.

Edit Preferences File Types / Editors Reload Modified Files

Save changes to the Dreamweaver HTML file when launching Fireworks.

Edit Preferences File Types / Editors Save on Launch

Configure Fireworks as the primary graphics editor for .png, .gif, and .jpg files.

Edit Preferences File Types / Editors Editors

Import tables, rollover effects, image maps, and pop-up menus created in Fireworks into Dreamweaver.

Insert Interactive Images Fireworks HTML (or use the Insert Fireworks HTML button in the Objects panel)

Paste HTML from the clipboard.

Edit Paste HTML

Activate Design Notes to enable integration between Dreamweaver and Fireworks.

Site Define Sites Edit Design Notes Maintain Design Notes

There are several ways to launch Fireworks from within Dreamweaver to edit an image, assuming that Fireworks is set as the primary graphics editor. In most cases, editing a .gif or .jpg image will open the original .png file if the image was created in Fireworks:

Double-click the image in Dreamweaver's Document window. (If you double-click a .gif or .jpg file in the Site window, it opens the .gif or .jpg file in Fireworks, but does not open the original .png file.)
Select the image in the Document window and click the Edit button in the Property inspector.
Right-click (Windows) or Ctrl-click (Macintosh) on the image in the Document window or the image's filename in the Site window and choose Edit With Fireworks 4 from the contextual menu.

Table 13-2 lists options in Fireworks (not Dreamweaver) that impact on the integration of the two programs.

Table 13-2. Relevant operations in Fireworks

Description

Fireworks operation

Introduction to Fireworks.

Help Welcome

Create sliced tables in Fireworks.

Help Lessons Creating Slices

Insert Slice

Create rollover effects in Fireworks.

Help Lessons Creating Rollovers with Drag-and-drop Behaviors

Create pop-up menus in Fireworks.

Help Lessons Creating a Pop-up Menu; Insert Pop-up Menu

Create a link in Fireworks.

Highlight text, then use Insert Slice. Add URL using Object panel (Window Object)

Create an image map in Fireworks and set its properties.

Use the Insert Hotspot command to create an image map. Use the Object panel (Window Object) to enhance it and add URLs

Apply Behaviors in Fireworks.

Window Behaviors

Configure the HTML export style, file extension, and format.

File HTML Setup General

Configure table export settings.

File HTML Setup Table

Configure slice export settings.

File HTML Setup Document Specific

Set the file export format, such as GIF, JPEG, or animated GIF.

File Export Preview Options Format

Export HTML links, tables, rollover effects, pop-up menus, or image maps.

File Export Save As Type: HTML and Images

Export in Dreamweaver Library format.

File Export Save As Type: Dreamweaver Library (.lbi)

Export CSS Layers.

File Export Save As Type: CSS Layers (.htm)

Use PNG format when launching Fireworks from an external application.

Edit Preferences Launch and Edit

Copy HTML code to clipboard.

Edit Copy HTML Code

Update HTML code even when Dreamweaver is not running.

File Update HTML

The next chapter covers Dreamweaver behaviors that use layers to create animation and other effects.