Export content to HTML | CS6 & CS5.5

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

InDesign exports all stories, linked and embedded graphics, SWF movie files, footnotes, text variables (as text), bulleted and numbered lists, internal cross-references, and hyperlinks that jump to text or web pages. Tables are also exported, but certain formatting, such as table and cell strokes, is not exported. Tables are assigned unique IDs, so they can be referenced as Spry data sets in Dreamweaver. Placed audio and h.264 video files are enclosed in HTML5 <audio> and <video> tags.

InDesign does not export objects you draw (such as rectangles, ovals, and polygons), hyperlinks (except for links to web pages and links applied to text that jump to text anchors in the same document), pasted objects (including pasted Illustrator images), text converted to outlines, XML tags, books, bookmarks, SING glyphlets, page transitions, index markers, objects on the pasteboard that aren’t selected and don’t touch the page, or parent page items (unless they’re overridden or selected before export).

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.

In the HTML dialog box, specify the following options.

General options

The General area includes the following options.

Determines 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 parent 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.

lets you specify the reading order of page objects.

Based On Page Layout

The location of the items on the page determines the reading order.

If Based On Page Layout is selected, 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 to rearrange and format the contents.

(Asian versions only) If Base On Page Layout is selected, InDesign determines the reading order of page objects according to the document’s binding (left to right or right to left). In some instances, especially in complex, multi-column documents, the exported design elements may not appear in the desired reading order. Use Dreamweaver to rearrange and format the contents.

Same As XML Structure

If Same As XML Structure is selected, the XML Structure panel controls the ordering of the exported content and which content gets exported. If your content is already tagged, you can simply drag the tags in the XML Structure panel to set the XHTML Export order. If your content is not tagged, you can choose Add Untagged Items from the Structure panel menu to generate tags that you can reorder. If you do not want an item to be included in the export, you can simply delete the tag in the XML Structure panel. (Deleting a tag does not delete the content from the INDD file.) See Tag page items.

Same As Articles Panel

The order of elements in the Articles panel determines the reading order. Only the checked articles are exported. See Include articles for export.

Specify a simple margin in Ems or pixels. Specifying margins in Ems is better for multiscreen compatibility. The same value is applied to all margins: top, bottom, left, and right.

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. If you have used native InDesign auto-bullets, sub-bullets are also included.

Determines how numbers are converted in the HTML file. If you have used native InDesign auto-numbering, sub-bullets are also included

Converts numbered lists into List Items, which are formatted in HTML using the <ol> tag.

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

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

Starts the browser, if present.

Image options

Specify how images are exported to HTML.

Exports the original image to the “<document_name>-web-images” subfolder. When this option is selected, all other options are dimmed.

Lets you change settings to determine how the image is exported.

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.

Check to inherit the image object attributes from the layout.

Specify the resolution of the images in pixels per inch (ppi). While operating systems have standardized on either 72 ppi or 96 ppi, mobile devices range from 132 ppi (iPad), to 172 ppi (Sony Reader), to over 300 ppi (iPhone 4). You can specify a ppi value for each object selected. Values include 72, 96, 150 (average for all ebook devices today), and 300.

Specify if image size must remain fixed or resized relative to the page. Relative to Page Size sets a relative percentage value based on the size of the image relative to the InDesign page width. This option causes the images to rescale proportionally, relative to the width of the reading area.

Specify the image alignment, left, center, right, and the space before and space after.

Check to apply these settings to all anchored objects.

Lets you choose whether the optimized images in your document are converted to GIF, JPEG, or PNG. Choose Automatic to let InDesign decide which format to use in each instance. Choosing PNG disables the image compression settings.; use PNG for lossless images or for images that include transparency.

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.

Select Interlace to load the images progressively by filling in missing lines. If this option is not selected, an image looks fuzzy and gradually becomes clear as the image reaches full resolution.

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.

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.

Ignores Object Export Options applied on individual images. See Apply Object export options.

Advanced options

Use the Advanced area to set CSS and JavaScript 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 declarations (attributes).

If Include Style Definitions is selected, InDesign attempts to match the attributes of the InDesign text formatting with CSS equivalents. If this option is deselected, the HTML file includes empty declarations. You can edit later these declarations in Dreamweaver.

If Preserve Local Overrides is selected, local formatting such as italic or bold is included.

Selecting this option omits the CSS section from the HTML file.

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 Dreamweaver to confirm your external CSS setup.

Specify CSS using the Add Style Sheet button.

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.

More like this

Create and publish ebooks, brochures, flyers, postcards, posters, interactive page layouts, and more with Adobe InDesign.