While creating basic web pages on Adobe InDesign and then exporting them to HTML format using the ‘Export for Dreamweaver” choice, there are a few challenges that you will face.
This is because there are drastic differences between the formatting of InDesign and HTML.
Here, there are many elements of the InDesign layout which includes the text size, the font, paragraph styles, text wrapping, multiple page options, etc which will not export to the Dreamweaver HTML page. To achieve this you will often have to first open the HTML document in Dreamweaver, another page layout program in HTML or even a text editor so that you can do the extra formatting before you publish it to a web server.
Step by step:
1. Start out with a blank InDesign document or just open the already existing page that you want to export to HTML. If you are using a page that already exists then you have to be prepared for the fact that most of the pages original elements won’t make it to the HTML document. You will have to redo parts of the document on software.
2. Now start with the layout of the page. Firstly import the text and the images as typically done and put them on the page. While you are putting in the page elements remember that you are doing it in HTML formatting and not InDesign layout. Don’t use the InDesign options for the page layout to make any columns. If you want to align the images to the right, left or centre of the page then put them in table cells. If you have to make multiple pages then put them out in separate InDesign pages and don’t use the insert page option from InDesign.
3. Now make the page layout in a linear way, putting one element after the other and put them on the page. Put them in the order of how you want them appear. Do not put in the font size, the text size or any paragraph formatting. These elements will not be exported. Do not use Andersen’s option of ‘text wrap’ to put text around images or even put images in text boxes. These elements will not transfer top HTML. If you do put the images in the InDesign text boxes all the text behind the image will not be transferred.
4. Put hyperlinks to all the text and the images. First select the content, draw up the ‘Type’ option and then select ‘Hyperlinks and Cross References. Choose a new hyperlink. Then you can choose the kind of link you want to create; it could be an URL, a file, a page or even an email. Put in the address in the ‘URL’ box. You can also modify how the hyperlink looks like here.
5. You can choose the XHTML Export Options to decide how the elements on your document will be exported. The general option will allow you to export either part of, or an entire document. You can also choose the image options to control conversion and quality of the display. In the advanced options you can even modify CSS formatting.
6. Once the exporting is done, open the new HTML file in Dreamweaver or another HTML editor to redo parts of the page.
Exporting to XHTML from InDesign CS5 – on video below
About the author
Rob Dunham is a HTML expert working in a design firm for the past four years. Rob loves watching TV shows in his free time.