InDesign

Export content as XHTML

Exporting to XHTML is an easy way to get your InDesign contents into web-ready form. When you export contents to XHTML, you can control how images are exported, but the formatting of text is not preserved. However, InDesign preserves the names of paragraph, character, object, table, and cell styles applied to the exported contents by marking the XHTML contents with CSS style classes of the same name. Using a CSS-capable HTML editor, such as Adobe Dreamweaver or Adobe GoLive, you can quickly apply formatting and layout to the contents.

What gets exported
InDesign exports all stories, linked and embedded graphics, SWF movie files, footnotes, text variables (as text), bulleted and numbered lists, and hyperlinks that jump to text. Tables are also exported, but certain formatting, such as table and cell strokes, is not exported.

What doesn’t get exported
InDesign does not export objects you draw (such as rectangles, ovals, and polygons), movie files (except for SWF), hyperlinks (except for those that jump to text), pasted objects (including pasted Illustrator images), text converted to outlines, XML tags, books, bookmarks, SING glyphlets, index markers, objects on the pasteboard that aren’t selected and don’t touch the page, or master page items (unless they’re overridden or selected before export).

Reading order
InDesign determines the reading order of page objects by scanning left to right and top to bottom. In some instances, especially in complex, multi-column documents, the design elements may not appear in the desired reading order. Use Dreamweaver (or another HTML editor) to rearrange and format the contents.
Before you export, you may want to influence the reading order by grouping related objects. Objects grouped in InDesign are also grouped in XHTML.

  1. If you’re not exporting the entire document, select the text frames, range of text, table cells, or graphics you want to export.
  2. Choose File > Cross-media Export > XHTML / Dreamweaver.
  3. Specify the name and location of the HTML document, and then click Save.
  4. In the XHTML Export Options dialog box, specify the desired options in the General, Images, and Advanced areas, and then click OK.

A document with the specified name and an .html extension (such as “newsletter.html”) is created; if specified, a web images subfolder (such as “newsletter web images”) is saved in the same location.

XHTML export options

In the XHTML dialog box (File > Cross-media Export > XHTML / Dreamweaver), specify the following options.

General options

The General area includes the following options.

Export
Determine whether only the selected items or the entire document is exported. If a text frame is selected, the entire story — including overset text — is exported.

If Document is selected, all page items from all spreads are exported, except for master page items that have not been overridden and page items on invisible layers. XML tags and generated indexes and tables of contents are also ignored.

Bullets
Select Map To Unordered List to convert bullet paragraphs into List Items, which are formatted in HTML using the <ul> tag. Select Convert To Text to format using the <p> tag with bullet characters as text.

Numbers
Determine how numbers are converted in the HTML file.
Map To Ordered List
Convert numbered lists into List Items, which are formatted in HTML using the <ol> tag.

Map To Static Ordered List
Convert numbered lists into List Items, but assigns a <value> attribute based on the paragraph’s current number in InDesign.

Convert To Text
Convert numbered lists into paragraphs that begin with the paragraph’s current number as text.

Images options

From the Copy Images menu, determine how images are exported to HTML.

Original
Exports the original image to the web images subfolder. When this option is selected, all other options are dimmed.

Optimized
Lets you change settings to determine how the image is exported.
Formatted
Preserves InDesign formatting, such as rotation or scale, as much as possible for web images.

Image Conversion
Lets you choose whether the optimized images in your document are converted to GIF or JPEG. Choose Automatic to let InDesign decide which format to use in each instance.

GIF Options (Palette)
Lets you control how InDesign handles colors when optimizing GIF files. The GIF format uses a limited color palette, which cannot exceed 256 colors.

Choose Adaptive to create a palette using a representative sample of colors in the graphic without any dithering (mixing of small spots of colors to simulate additional colors). Choose Web to create a palette of Web-safe colors that are a subset of Windows and Mac OS system colors. Choose System (Win) or System (Mac) to create a palette using the built‑in system color palette. This choice may cause unexpected results.

JPEG Options (Image Quality)
Determines the trade-off between compression (for smaller file sizes) and image quality for each JPEG image created. Low produces the smallest file and lowest image quality.

JPEG Options (Format Method)
Determines how quickly JPEG graphics display when the file containing the image is opened on the Web. Choose Progressive to make the JPEG images display gradually and in increasing detail as they are downloaded. (Files created with this option are slightly larger and require more RAM for viewing.) Choose Baseline to make each JPEG file display only after it has been completely downloaded; a placeholder appears in its place until the file displays.

Link To Server Path
Rather than exporting images to a subfolder, this option lets you enter a local URL (such as “images/”) that appears in front of the image file. In the HTML code, the link attribute displays the path and extension you specify. This option is especially effective when you’re converting images to web-compatible images yourself.
Note: InDesign does not check the path you specify for Java™ scripts, external CSS styles, or image folders, so use your HTML editor to verify paths.

Advanced options

Use the Advanced area to set CSS and JavaScript options.

CSS Options
Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content in a web page. When you use CSS to format a page, you separate content from presentation. The content of your page—the HTML code—resides in the HTML file itself, while the CSS rules defining the presentation of the code reside in another file (an external style sheet) or within the HTML document (usually in the Head section). For example, you can specify different font sizes for selected text, and you can use CSS to control the format and positioning of block-level elements in a web page.

When exporting to XHTML, you can create a list of CSS styles that appears in the Head section of the HTML file with empty declarations (attributes). You can edit later these declarations in an HTML editor such as Dreamweaver. You can choose No CSS to omit the CSS section, or you can specify an external CSS. If you select External CSS, specify the URL of the existing CSS style sheet, which is usually a relative URL, such as “/styles/style.css.” InDesign does not check whether the CSS exists or is valid, so you’ll want to use your HTML editor to confirm your external CSS setup.

JavaScript Options
Select Link To External JavaScript to run a JavaScript when the HTML page is opened. Specify the URL of the JavaScript, which is usually a relative URL. InDesign does not check whether the JavaScript exists or is valid.