EDITING OUTPUT SETTINGS

If you're familiar with Photoshop and ImageReady's set of nested Preferences dialogs, the Output Settings dialogs will be just as easy to work through. Choose File, Save for Web and then choose Edit Output Settings from the Settings pop-up menu to change how Save for Web handles slices, HTML, the filename, and any background image associated with the file. In ImageReady, use the File, Output Settings command to access the Output Settings dialog.

Unless an image has been sliced, normally you save only the image itself from Photoshop's Save for Web dialog. Generating an HTML web page for a single image is possible, but unless the image will be posted as a standalone web page, there's no need to create the HTML in Save for Web. In ImageReady, you need to save HTML with any artwork that has been sliced, has rollovers, or is an animation. Figure 12.17 shows what the source code for such a sliced photo might look like.

Figure 12.17. The source HTML is shown in a Safari window. You can open the HTML document in a word processor or text editor to change the margin information and add ALT messages.

File-Saving Options

The Saving Files pane of the Output Settings dialog box, shown in Figure 12.18, enables you to specify how slices are named (when generated) and several additional options.

Figure 12.18. Here's the first slice with its dialog box.

When an image is sliced, each slice is saved as a separate image. The Save for Web dialog automatically generates a separate file for each slice, using filenames that follow the guidelines you choose in the File Naming section of the Output Settings dialog.

Each slice name can contain up to nine elements, the last of which must always be the file format extension. You select the components from a list in each field (see Figure 12.19). You can also enter text into any of the fields, but remember that file extensions must be included at the end.

Figure 12.19. Here's the second slice.

If you know what type of web server is hosting the site in which the image will be used, you can disable the unnecessary Filename Compatibility options. However, keep in mind that equipment gets upgraded, servers get replaced, and hosting services get changed. Keeping maximum compatibility helps prevent unexpected problems related to server changes.

Image Maps

An image map links specific areas on the web page to the index of URLs it generates. When you're working with images that contain image maps, ImageReady offers several ways to encode link information. Client-side image maps use the visitor's web browser to interpret the links. When you opt to use server-side links, the link information is generated as a separate MAP file, instead of being embedded in the HTML. The browser must query the server before navigating a server-side image map link. Client-side links are generally much faster for the browser to open. However, server-side links can be updated separately from the web page's HTML file.

When you generate client-side links, the Placement buttons at the bottom of the Image Maps pane are available. They determine where in the HTML the image map declaration is placed. The information can appear at the beginning or end of the BODY section of the HTML (Top and Bottom options, respectively), or it can be placed directly above the appropriate <IMG SCR> tag (the Body option). The difference is insignificant for the web browser, but you might have a preference if you edit HTML.

The Optimized Files section of the Image Maps dialog offers three options:

• Put Images in Folder: Select a name for the folder that holds the images created as slices or backgrounds. The default name, Images, is standard for most web purposes. The folder is created at the location where you choose to save the file. If a folder with that name already exists, the images are added to it.

• Copy Background Image When Saving: When you specify a background image to be tiled behind the image you're saving, the file can be copied to the folder you create. If this option is not selected, you must remember to include the background image separately when adding the image to a web page or website.

• Include Copyright: Automatically add the copyright information and file title in File Info to each image. If no information is available in File Info, nothing is added. To add the information, use the File, File Info menu command. Enter the data in the Copyright Notice and Title fields. The copyright information is added to the file but is not visible in the image.