How to Design Web Pages in InDesign

Export your InDesign pages to Dreamweaver to convert them to HTML

You can lay out basic Web pages in Adobe InDesign and export them to HTML with InDesign's "Export for Dreamweaver" option. However, because of the stark differences between InDesign and HTML formatting, many elements of the InDesign layout, such as text size, font, paragraph styles, text wrap, multiple pages and many others, don't export to the Dreamweaver HTML Web page. Often, you'll need to open the HTML document in Dreamweaver, another HTML page layout program, or a text editor to apply additional formatting before publishing it to a Web server.

Things You'll Need

• Adobe InDesign CS3 or later
• Adobe Dreamweaver, another HTML editor, or a text editor, such as Notepad Microsoft Word or Apple Pages

Instructions

Creating a Web Page in InDesign

1. Start with a blank InDesign page or open an existing page you want to export to HTML. If you use an existing document, you should assume that much of the page's layout features won't transfer to the HTML document. You'll need to touch up the document in another program.

2. Start laying out your page. Import your text and images as you normally would and place them on the page. While placing page elements, think in HTML formatting, not InDesign print layout. For example, to create multiple columns, place your text in tables. Don't use InDesign's page layout options to create columns. To align images to the left, right or center of the page, place them in table cells, instead of using InDesign's alignment options. If you need multiple pages, lay them out in separate InDesign documents, instead of using InDesign's "Insert Pages" option.

3. Lay the page out in a linear fashion, one object after another, as you want them to appear on the page. Don't apply font, text size, and paragraph formatting; these details do not export. Don't place images in text boxes or use InDesign's "Text Wrap" feature to wrap text around them. Not only does this feature not translate to HTML, when you place images in InDesign text boxes, all of the text behind the image will not export.

4. Apply hyperlinks (clickable links to other Web pages and URLs) to your text and images. (Select the text or image, click the "Type" menu and then choose "Hyperlinks & Cross References." Select "New Hyperlink" from the fly-out menu. This opens the "New Hyperlink" dialog box.) Click the "Link To" drop-down and choose the type of link you want to create---URL, File, Page, Email, etc. Type the link URL or path in the "URL" field. Format the appearance of you hyperlink with options in the "Appearance" section of the New Hyperlink dialog box. Click "OK."

5. Use the options in XHTML Export Options to modify how elements in your document export. The "General" options, for example, allow you to export a portion or the entire document. The Options in the "Images" section let you control image conversion and display quality. The "Advanced" options control Cascading Style Sheets (CSS) formatting and links to external JavaScripts. When you finish selecting options, click the "Export" button. InDesign exports the HTML page and places the images in a sub-directory with same name as the document. All hyperlink and image paths are maintained during export.

6. Open the new HTML file in Dreamweaver, another HTML editor, or a text editor and touch up the page.

Tips & Warnings

• You can avoid having to touch-up your document by exporting to a PDF. Technically, PDFs are not Web pages, but today's browsers display them flawlessly. Exporting InDesign documents to PDFs maintains all of the document's formatting.

References

• Export Content to Dreamweaver
• Working With Styles, CSS, and XML in Adobe InDesign CS4
• Exporting Content for the Web