Whether you want to display a document previously prepared for print on the web, or want to create a quick HTML page, version CS6 for InDesign can make the task super easy. Depending on the page’s layout you will probably need to tweak the resulting export. Here are some tips for creating an HTML file that will require the least amount of modification to the HTML and CSS style sheet after export.
Text – Have all text styled using paragraph and character styles.
Set up your styles using export tags to correspond to HTML tags and classes. If you leave tagging set as [Automatic], the tags created will have a <p> tag with a class having the same name as the paragraph style. This may be fine for different variations of your body text, but you will most likely want to use a type tag such as h1, h2, or h3 for headline export tags.
Keep all of the text for an article within a single text frame or within linked text frames.
Text Containers – If you want to control the class name for your text container divs, assign an object style to the text frame for the article. A div will be created in the HTML for the first text container of a linked group and for text containers that are not linked.
Images – To place an image within a text flow, anchor the image within the text where desired. Otherwise, place the image in its own container. As with text frames, if you want the container to be assigned a specific class, assign the container to an object style named the same as the class.
Use Object > Object Export Options to assign size, resolution, or justification values to individual images that will be different from the settings established when the document is exported.
Articles Panel – To determine which articles will be exported and the order in which they will export, use the Articles Panel. Simply drag containers, in order, into the panel and give the article a name. You can add all of your document’s articles to the panel in one fell swoop by holding down the Command key while clicking on the Add (+) button at the bottom of the panel. The structure that displays in the panel can cause a little confusion as articles appear as sub-items under a single Article. However, when exported, each of the sub-items is treated as a div element of the <body> HTML tag.
When you export, set options in the various panels for the HTML Export Options as follows:
General-Panel – If you export the Document in Content Order Based on Page Layout, the articles will be ordered in top-to-bottom, left-to-right order. The other two options for Content Order are Same as XML Structure and Same as Articles Panel.
Settings in the Image panel are self explanatory with the exception of Preserve Appearance from Layout and Image Size. With Image Size set to Fixed, the height and width of the image frame in the document will be interpreted as pixel values for the frame’s CSS style. When using the relative setting, the size of the image container is interpreted as a percentage. Clicking the Preserve Appearance from Layout option preserves any cropping; otherwise the entire image will be shown within the frame.
Advanced Panel – Select Embedded CSS with Include Style Definitions checked. Use your discretion for preserving Local Overrides. The “embedded CSS” will be created as an external style sheet (the way it should be) with a link to the style sheet added to the HtmL file’s header. The style sheet is named the same as the HTML file with a .css extension.
Look for a series of Step-by-Step tutorials for working with the HTML export to be offered for download from this web site.