DekGenius.com
Previous Section Next Section

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 figs/U2192.gif 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 figs/U2192.gif 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 figs/U2192.gif Lessons figs/U2192.gif Creating Slices from Fireworks' Help menu.

Figure 13-7. A sliced Fireworks image
figs/dwn_1307.gif

Export the sliced table from Fireworks using File figs/U2192.gif Export Preview (see Section 8.1.2.1 in Chapter 8), and insert it into Dreamweaver using Insert figs/U2192.gif Interactive Images figs/U2192.gif 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
figs/dwn_1308.gif

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 figs/U2192.gif 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
  1. Launch the Fireworks 4 application.

  2. In Fireworks, choose Help figs/U2192.gif Lessons figs/U2192.gif Creating Rollovers with Drag-and-drop Behaviors.

  3. 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.

  4. In Fireworks, set the export format to JPEG (or GIF) under File figs/U2192.gif Export Preview figs/U2192.gif Options. Using rollover effects with animated GIFs isn't advisable because browsers get confused about which frame of the animated GIF to display.

  5. Use Fireworks' Export dialog box (accessible via the Export button in the Export Preview dialog box or using File figs/U2192.gif 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.

  6. 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).

  7. Open the exported table in Dreamweaver's by using File figs/U2192.gif Open, or insert it into an existing document by using Insert figs/U2192.gif Interactive Images figs/U2192.gif Fireworks HTML or the Insert Fireworks HTML button in the Objects panel's Common category.

  8. 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 figs/U2192.gif Lessons figs/U2192.gif 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 figs/U2192.gif 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 figs/U2192.gif Optimize Image in Fireworks

Create a web photo album from a folder of images.

Commands figs/U2192.gif Web Photo Album

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

Edit figs/U2192.gif Preferences figs/U2192.gif File Types / Editors figs/U2192.gif Reload Modified Files

Save changes to the Dreamweaver HTML file when launching Fireworks.

Edit figs/U2192.gif Preferences figs/U2192.gif File Types / Editors figs/U2192.gif Save on Launch

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

Edit figs/U2192.gif Preferences figs/U2192.gif File Types / Editors figs/U2192.gif Editors

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

Insert figs/U2192.gif Interactive Images figs/U2192.gif Fireworks HTML (or use the Insert Fireworks HTML button in the Objects panel)

Paste HTML from the clipboard.

Edit figs/U2192.gif Paste HTML

Activate Design Notes to enable integration between Dreamweaver and Fireworks.

Site figs/U2192.gif Define Sites figs/U2192.gif Edit figs/U2192.gif Design Notes figs/U2192.gif 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 figs/U2192.gif Welcome

Create sliced tables in Fireworks.

Help figs/U2192.gif Lessons figs/U2192.gif Creating Slices

Insert figs/U2192.gif Slice

Create rollover effects in Fireworks.

Help figs/U2192.gif Lessons figs/U2192.gif Creating Rollovers with Drag-and-drop Behaviors

Create pop-up menus in Fireworks.

Help figs/U2192.gif Lessons figs/U2192.gif Creating a Pop-up Menu; Insert figs/U2192.gif Pop-up Menu

Create a link in Fireworks.

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

Create an image map in Fireworks and set its properties.

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

Apply Behaviors in Fireworks.

Window figs/U2192.gif Behaviors

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

File figs/U2192.gif HTML Setup figs/U2192.gif General

Configure table export settings.

File figs/U2192.gif HTML Setup figs/U2192.gif Table

Configure slice export settings.

File figs/U2192.gif HTML Setup figs/U2192.gif Document Specific

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

File figs/U2192.gif Export Preview figs/U2192.gif Options figs/U2192.gif Format

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

File figs/U2192.gif Export figs/U2192.gif Save As Type: HTML and Images

Export in Dreamweaver Library format.

File figs/U2192.gif Export figs/U2192.gif Save As Type: Dreamweaver Library (.lbi)

Export CSS Layers.

File figs/U2192.gif Export figs/U2192.gif Save As Type: CSS Layers (.htm)

Use PNG format when launching Fireworks from an external application.

Edit figs/U2192.gif Preferences figs/U2192.gif Launch and Edit

Copy HTML code to clipboard.

Edit figs/U2192.gif Copy HTML Code

Update HTML code even when Dreamweaver is not running.

File figs/U2192.gif Update HTML

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

    Previous Section Next Section