| 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 programit 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 w ithin 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. |
