Setting output options

When you save an optimized image as a Web page, you can specify how HTML files are formatted, how slices are named, how files are named, and how background images are handled. You set these options in the Output Settings dialog box.

Using the Output Settings dialog box

The Output Settings dialog box displays different sets of options. In ImageReady, you can save your output settings and apply them to other files.

Displaying the Output Settings dialog box Do one of the following:

•When you save an optimized image, choose Other from the Settings pop-up menu in the Save Optimized or Save Optimized As dialog box. The Save and Load options are not available when you use this method to access the Output Settings dialog box.

•(ImageReady) Choose the desired preferences set from the File > Output Settings submenu. Use this method if you want to load and save settings.

•(Photoshop) Choose Edit Output Settings from the Optimize pop-up menu in the Save For Web dialog box. Use this method if you want to load and save settings.

Displaying predefined output options Choose an option from the Settings pop-up menu.

Switching to a different set of options Choose an options set from the pop-up menu below the Settings menu. Alternately, click Next to display the next set in the menu list; click Prev to display the previous set.

Saving output settings Set the options as desired, and click Save. Type a filename, choose a location for the saved file, and click Save.

You can save the output settings anywhere. However, if you place the file in the Presets/ Optimized Output Settings folder inside the Photoshop program folder, the file will appear in the Settings pop-up menu in both Photoshop and ImageReady.

Loading output settings Click Load, select a file, and click Open.

Setting HTML output options

You can set the following options in the HTML set:

Tags Case Specifies the capitalization for tags.

Attribute Case Specifies the capitalization for attributes.

Setting tags and attributes to all uppercase helps the code stand out in the file.

Indent Specifies a method for indenting lines of code: using the authoring application’s tab settings, using a specified number of spaces, or using no indentation.

Line Endings Specifies a platform for line ending compatibility.

Include Comments Adds explanatory comments to the HTML code. In ImageReady, this option is required when you plan to update the resulting file using the File > Update HTML command.

Always Quote Attributes Places quotation marks around all tag attributes. Placing quotation marks around attributes is required for compatibility with certain early browsers and for strict HTML compliance. However, always quoting attributes is not recommended. Quotation marks are used when necessary to comply with most browsers, even if this option is deselected.

Always Add Alt Tags Adds the ALT attribute to IMG elements to comply with government Web accessibility standards.

Close All Tags Adds close tags for all HTML elements in the file for XHTML compliance.

Include GoLive 5 (or Earlier) Code (ImageReady) Reformats JavaScript code so that rollovers will be fully editable in Adobe GoLive 5.0 and earlier. You do not need to select this option if you plan to edit rollovers in GoLive 6.0.

Note: GoLive does not support the Selected rollover state.

Setting slice output options

You can set the following options in the Slices set:

Generate Table Aligns slices using an HTML table, rather than a Cascading Style Sheet.

Empty Cells Specifies how empty slices are converted to table cells. Select GIF, IMG W&H to use a one-pixel GIF with width and height values specified on the IMG tag. Select GIF,TD W&H to use a one-pixel GIF with width and height values specified on the TD tag. Select NoWrap, TD W&H to place a nonstandard NoWrap attribute on the table data and also place width and height values specified on the TD tags.

TD W&H Specifies when to include width and height attributes for table data: Always, Never, or Auto (the recommended setting).

Spacer Cells Specifies when to add one row and one column of empty spacer cells around the generated table: Always, Never, or Auto (the recommended setting). Adding spacer cells is necessary with table layouts in which slice boundaries do not align, to prevent the table from breaking apart in some browsers.

Generate CSS Generates a Cascading Style Sheet, rather than an HTML table.

Referenced Specifies how slice positions are referenced in the HTML file when using CSS:

•By ID to position each slice using styles that are referenced by a unique ID.

•Inline to include style elements in the declaration of the block element <DIV> tag.

•By Class to position each slice using classes that are referenced by a unique ID.

Default Slice Naming Choose elements from the pop-up menus or enter text into the fields to be combined into the default names for all use slices. Elements include document name, the word slice, numbers or letters designating slices or rollover states, slice creation date, punctuation, or none.

Setting image map output options (ImageReady)

You can set the following options in the Image Maps set:

Image Map Type Specifies what type of image map is created:

•Client-Side to include all required code for the image map in the image’s HTML file.

•NCSA Server-Side to create a separate .map file in addition to the HTML file, using NCSA specifications.

•CERN Server-Side to create a separate .map file in addition to the HTML file, using CERN specifications.

Important: Photoshop and ImageReady cannot generate server-side image maps for images that contain slices.

•Client-Side & NCSA Server-Side to create both a client-side and server-side compatible image map, using NCSA specifications.

•Client-Side & CERN Server-Side to create both a client-side and server-side compatible image map, using CERN specifications.

Note: Contact your Internet service provider to find out whether to use NCSA or CERN specification for server-side image maps.

Image Map Placement Specifies the location of the image map declaration (the <MAP> tag) in the HTML file:

•Top to place the image map declaration at the top of the HTML body section.

•Body to place the image map declaration above the <IMG SRC> tag for the associated slice.

•Bottom to place the image map declaration at the bottom of the HTML body section.

Setting background options

You can set the following options in the Background set:

View Document As Select Image if you want the Web page to display an image or a solid color as a background behind the current image. Select Background if you want the Web page to display the optimized image as a tiled background.

Background Image Enter the location of an image file, or click Choose and select an image. The file you specify will be tiled behind the optimized image on the Web page.

BG Color Click the Color box, and choose a background color using the color picker, or choose an option from the pop-up menu.

Setting file saving options

You set the following options in the Saving Files set:

File Naming Choose elements from the pop-up menus or enter text into the fields to be combined into the default names for all files. Elements include document name, slice name, rollover state, trigger slice, file creation date, slice number, punctuation, and file extension. Some options are relevant only if the file contains slices or rollover states.

The fields let you change the order and formatting of the filename parts (for example, letting you indicate rollover state by an abbreviation instead of the full word).

File Name Compatibility Select one or multiple options to make the filename compatible with Windows (permits longer filenames), Macintosh, and UNIX operating systems.

Note: Filenames may be truncated after 31 characters.

Copy Background Image When Saving Copies the background image file specified in the Background set into images folder for the Web page.

Put Images In Folder Specifies a folder name where optimized images are saved (available only with documents containing multiple slices).

Include Copyright Includes title and copyright information with the image. (See “Adding title and copyright information to Web pages” on page 445.)

Adding title and copyright information to Web pages

You can add title and copyright information to a Web page by entering information in the File Info dialog box. Title information displays in the Web browser’s title bar. Copyright information is not displayed in a browser; however, it is added to the HTML file as a comment and to the image file as metadata.

To enter information about an image:

1 Choose File > File Info.

2 Enter a title that will appear in the Web browser’s title bar:

• (Photoshop) In the General section of the File Info dialog box, enter the desired text in the Caption text box.

• (ImageReady) Enter the desired text in the Caption text box.

3 Enter copyright information:

• (Photoshop) In the General section of the File Info dialog box, enter the desired text in the Copyright Notice text box.

• (ImageReady) Enter the desired text in the Copyright text box.

4 Click OK.