How To Create Web Pages on InDesign

web design servicesWhile 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.

Items required:

You will need to have the Adobe InDesign CS3 version or later. Also, the Adobe Dreamweaver or another such HTML editor or a text editor likes Notepad, MS Word or Apple pages.

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.

InDesign CS5 Bible

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

WriterAbout 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.


 

Check Also

Our Web design

How We Improve Our Web design In One Week

I was the design manager for a company website for almost six years, and amid …

2 comments

  1. Awesome article! Thank you very much for sharing post on creating web pages. Creating a web page while designing any website is very important. Web page is crucial part as it can attract users and also some put some bad impression on users. It depends on the page you have created for website. You have also mention some interesting points on the use of HTML and CSS in creating web page. As you have discussed on home page we should add image and content in creative way. Many thanks for discussion and I have read some more information on web design new york. Good to read your post!

  2. Thank you for writing an article on web page creation. I have read you post careful as it gives some useful points to read which gives good knowledge on web page creation. I have read Thomas comment as well which I liked as he have also shared good points. I have found useful and handy points on web design new York which help me a lot. Nice to read your post. Keep sharing such excellent articles.

Leave a Reply

Your email address will not be published. Required fields are marked *