Like all native formats from major graphics programs, Photoshop's PSD format is proprietary and not suitable for viewing on the Web. Each file contains a great deal of non-graphical information, such as layer structure, color palettes, and typography details. Consequently, PSD files are typically many times larger than their Web counterparts — for example, one PSD file of a single image against a background is 578KB, whereas the same file in JPEG format, with light compression, is only 23KB. Clearly, for a Photoshop file to be used online, it has to undergo a significant conversion — a conversion Dreamweaver is quite able to handle.

When you insert a PSD file into Dreamweaver, the Image Preview dialog box appears, as shown in Figure 24-1. Designers choose the desired Web format and can further optimize the image to achieve the maximum quality with the minimum file size through a series of format-specific controls. For example, if you choose JPEG format, a slider control that affects the Quality (or compression) setting is available. Similarly, GIF format offers the ability to limit the number of colors.

All in all, the Image Preview is quite powerful and can even be used for comparative optimization with two or four preview panes. The dialog box consists of three tabbed panels:

Figure 24-1. Opening a Photoshop file in Dreamweaver automatically allows you to optimize the image for the Web.

To insert an image in Photoshop format into Dreamweaver, follow these steps:

After the graphic is inserted, the Property inspector identifies it as a Photoshop-derived image, displays the PSD source, and offers an Edit in Photoshop option, as shown in Figure 24-2, in addition to the standard image properties. To return to the Image Preview dialog box, click Edit Image Settings, also in the Property inspector and identified in Figure 24-2.

Figure 24-2. Photoshop images are easily identified in the Property inspector.

You'll also notice an overlaid symbol in the upper-left corner. This symbol indicates that this is a Photoshop Smart Object, which is covered in the upcoming section, "Updating a Photoshop Smart Object."

Many designers use their graphics program to create the layout and then use parts of the design in Dreamweaver. Although these individual elements could be saved as separate files and then inserted using the procedure outlined in the previous section, it's much faster to simply copy what you need from one program, Photoshop, and paste it into another, Dreamweaver.

The same conversion mechanism used for inserting a PSD file into Dreamweaver — the Image Preview dialog box — is used when copying and pasting an image.

To copy a selection from Photoshop to Dreamweaver, follow these steps:

The same Property inspector is used for converted PSD files and for those images pasted from Photoshop. Again, a Smart Object symbol is displayed on top of the image in the upper-left corner. Whether the images come from a Photoshop file or the Photoshop clipboard, they are inserted as Smart Object images and, as you'll see in the next section, this means you can easily modify the source and reapply your changes.

Any image originating from Photoshop — whether imported from a PSD file or copied and pasted — can be modified in Photoshop and easily updated in Dreamweaver. Because these Dreamweaver images keep track of their Photoshop source images, they are referred to as Smart Objects. As noted earlier, a Smart Object is identified by a symbol overlaid on the upper-left corner of the image; the symbol tells the sync status at a glance. When the Photoshop image is first inserted, the Smart Object is in-sync with the source and the symbol is completely green; if the source is changed, the symbol turns half-red. Tooltips further help clarify the sync status when you roll over the symbol. Out-of-sync Smart Objects can be updated and brought into sync with the click of the Update from Original button on the Property inspector, as shown in Figure 24-3.

Figure 24-3. Update Photoshop Smart Objects with the click of a Property inspector button.

Once the image has been inserted into Dreamweaver, there are two files you can modify: the original source graphic and the converted Web-compatible file. The process is different for changing each of the two file types; each procedure is detailed next.

To modify the source image from Photoshop via the Smart Object connection, follow these steps:

The updated image is optimized according to the previous conversion settings and inserted in the page. Smart Objects are smart enough to retain any scaling done in Dreamweaver, as well as the optimized settings.

If you resize a Smart Object image, a warning indicator is added to the sync symbol; you can resample the source for optimum rescaling by selecting the Update from Original option on the Property inspector.

If you don't have the source image available or you'd prefer to change the Web-compatible file, you'll need to send the image to Photoshop in a slightly different way.

To modify the Web-compatible image converted from Photoshop, follow these steps:

Naturally, any changes made to the Web-ready image will not be reflected in the original PSD file.

Although you can design the most beautiful, compelling image possible in your graphics program, if it's intended for the Internet, it must be viewed in a Web page. Not only must the graphic work in the context of the entire page, but you also have to take the file size of the Web graphic into account. All these factors mean that most, if not all, images require some degree of modification after they're included in a Web page. Dreamweaver's Optimize Image command facilitates this modification by opening the Export module of Fireworks right from within Dreamweaver — which has the same functionality as the Image Preview dialog box previously covered in this chapter — as shown in Figure 24-4.

Figure 24-4. You can optimize images from within Dreamweaver using the Fireworks interface, with or without Fireworks installed.

Fireworks saves its source files in an expanded PNG format to maintain full editability of the images. Graphics for the Web must be exported from Fireworks in GIF, JPEG, or standard PNG format. Dreamweaver's Optimize Image command can modify either the source file or the exported file. In most situations, better results are achieved by using the source file, especially when optimizing includes rescaling or resampling. Some situations, however, require that you leave the source file as-is and modify only the exported files. Suppose, for example, that one source file is used to generate several different export files, each with different backgrounds (or canvases, as they are called in Fireworks). In that case, you are better off modifying the specific exported file, rather than the general source image.

Dreamweaver enables you to choose which type of image you want to modify. When you first execute the Optimize Image or the Edit Image command, a Find Source dialog box appears (see Figure 24-5). If you want to locate and use the source file, click Use A PNG; to use the exported image that is inserted in Dreamweaver, click Use This File. If you opt for the source file — and the image was created in Fireworks — Dreamweaver reads the Design Note associated with the image to find the location of the source file and open it. If the image was created with an earlier version of Fireworks or the image has been moved, Dreamweaver asks you to locate the file with a standard Open File dialog box. By setting the Fireworks Source Files option, you can always open the same type of file: source or exported. Should you change your mind about how you like to work, open Fireworks and select Edit

Figure 24-5. Set the Find Source dialog box in Fireworks to use the source graphics image (PNG) or the exported image (GIF, JPEG, or PNG), or to prompt for each optimization.

To use the Optimize Image command, follow these steps:

Optimizing an image is great when all you need to do is tweak the file size or rescale the image. Other images require more detailed modification — such as when a client requests that the wording or order of a series of navigational buttons be changed. Dreamweaver enables you to specify Fireworks as your graphics editor. If you've done so, you can take advantage of Fireworks' capability to keep every element of your graphic always editable. Believe me, this is a major advantage.

In Dreamweaver, external editors can be set for any file format; you can even assign more than one editor to a file type. When installing the Adobe Creative Suite, Fireworks is preset as the primary external editor for GIF, JPEG, and PNG files. If you install Fireworks outside the Suite's setup, Dreamweaver Preferences handles the external editor assignment. To assign Fireworks to an existing file type, follow these steps:

Now, whenever you want to edit a graphic, select the image and click the Edit in Fireworks button in the Property inspector. You can also right-click (Control+click) the image and select Edit With Fireworks to start editing it. Fireworks starts up, if it's not already open. As with the Optimize Image command, if the inserted image is a GIF or a JPEG and not a PNG, Fireworks asks if you'd like to work with a separate source file, if that option in Fireworks Preferences is set. If you choose to do so, Fireworks automatically loads the source file.

Figure 24-6. Define Fireworks as your external editor for GIF, JPEG, and PNG files to enable the back-and-forth interaction between Dreamweaver and Fireworks.

When the image opens in Fireworks, the document window indicates that the image is being edited from Dreamweaver in Fireworks, as shown in Figure 24-7. A Done button is also available in the Document window for completing the operation after you've made the alterations to your file in Fireworks. Alternatively, you can choose File

Figure 24-7. Fireworks optimizes a modified image with the prior settings and returns to Dreamweaver when you're done.

As discussed in Chapter 8, when designing a page, you can defer the task of inserting final artwork by using image placeholders instead of actual images; then, at the appropriate time, you can replace these image placeholders with the actual images. Working this way can facilitate smooth, trouble-free interaction between your Web site design and graphics departments.

To use Fireworks to replace your Dreamweaver image placeholders, follow these steps:

After you've used this procedure to replace a Dreamweaver image placeholder, you can easily edit the image in Fireworks by using the techniques described in the previous section of this chapter (the Edit button in the Property inspector and the Edit With Fireworks command).

With its full-spectrum editability, Fireworks excels at building consistent rollover graphics simply. The possible states of an image in a rollover — up, over, down, and over while down — are handled in Fireworks as separate states, formerly called frames. As in an animated GIF, each state has the same dimensions, but the content is slightly altered to indicate the separate user actions. For example, Figure 24-9 shows the different states of a rollover button, side-by-side.

Figure 24-9. A Fireworks-created rollover can be made of four separate states.

You can attach the rollover behaviors to your images in several ways in Dreamweaver. The following technique uses Dreamweaver's Rollover object. To create a rollover by attaching Dreamweaver behaviors to Fireworks-created graphics, follow these steps:

Many Web designers build their entire navigation bar — complete with rollovers — in Fireworks. Rather than create and export one button at a time, all the navigation buttons are created as one graphic, and slices or hotspots are used to make the different objects or areas interact differently. You learn more about slices and hotspots later in this chapter.

In some ways, Fireworks is a hybrid program, capable of simultaneously outputting terrific graphics and sophisticated code. You can even select the type of code you want generated in Fireworks: Dreamweaver HTML, Dreamweaver XHTML, Dreamweaver Library, or code compatible with other programs such as GoLive and FrontPage. You can also find a more general Generic code option. All these options can be chosen during the Export procedure.

For rollovers, Fireworks generally outputs to two different sections of the HTML document, the <head> and the <body>; only the FrontPage style keeps all the code together. The <head> section contains the JavaScript code for activating the rollovers and preloading the images; <body> contains the HTML references to the images themselves, their links, and the event triggers used (onClick or onMouseOver).

The general procedure is to first create your graphics in Fireworks and then export them, simultaneously generating a page of code. Now, the just-generated Fireworks HTML page can be incorporated in Dreamweaver. Dreamweaver includes two slick methods for including your Fireworks-output code and images. The Insert Fireworks HTML object places the code — and the linked images — right at your current cursor position. You also have the option to export your Fireworks HTML directly to the clipboard and paste it, verbatim, into Dreamweaver.

Just as an image requires a link to create a rollover in Dreamweaver, a Fireworks image needs to be designated as either a slice or a hotspot. The Fireworks program describes slices and hotspots as being part of the graphic's Web layer. The Web layer can be hidden or locked, but not deleted. Figure 24-11 shows the same button with both a slice and a hotspot attached.

Figure 24-11. The Fireworks image on the left uses a slice object, whereas the image on the right uses a polygon hotspot.

Slices are rectangular areas that permit different parts of the same graphic to be saved as separate formats — the entire graphic is formatted as an HTML table. Each slice can also be given its own URL and have one or more behaviors attached to it.

A Fireworks hotspot is an area defined for an image map. Hotspots can be rectangular, elliptical, or polygonal — just like those created by Dreamweaver with the Image Map tools. Because Fireworks is an object-oriented graphics program, any selected image (or part of an image) can be automatically converted to a hotspot. Like slices, hotspots can have both URLs and behaviors assigned to them.

Note

In addition to the technique outlined in the text that follows, you can also use Fireworks' Button Editor (available by choosing Insert

To include Fireworks-generated code in your Dreamweaver document, follow these steps in Fireworks:

When Fireworks completes the exporting, you have one HTML file (unless you've chosen the Copy To Clipboard option) and multiple image files — one for each slice and state. Now you're ready to integrate these images and code into your Dreamweaver page. Which method you use depends on the HTML style you selected when the graphics were exported from Fireworks:

Both the Library and Clipboard methods are one-step, self-explanatory techniques — and using the Insert Fireworks HTML object is only a bit more complex. To insert the Fireworks code and images into your Dreamweaver page using the Insert Fireworks HTML object, follow these steps:

All the methods for inserting Fireworks HTML work with images that have either hotspots or sliced objects (or both), whether or not behaviors are attached.

Placing sliced images on your Web page couldn't be simpler, thanks to the Insert Fireworks HTML command. However, like standard non-sliced graphics, sliced images often need to be modified. One technique that many designers use is to create a framing graphic that contains HTML text; in Fireworks, a sliced area designated as a text slice can hold any HTML content. Text often has to be modified. If it is in a framing graphic, the image may need to be changed so that the table cells remain the same size as in the original design. This prevents the separate slices from becoming apparent.

In Dreamweaver, sliced images from Fireworks are recognized as a Fireworks table and can be modified through a dedicated Property inspector, as shown in Figure 24-13. The Fireworks Table Property inspector displays the PNG source file and an Edit button for sending the entire table back to Fireworks for alterations. As with non-sliced graphics, click Done on the document title bar in Fireworks when your modifications are complete to update the source and exported files. The newly exported images are then reloaded into Dreamweaver.

Figure 24-13. Modify sliced graphics by first selecting the surrounding table and then clicking the Edit button in the Fireworks Table Property inspector.