Printer Friendly Version

BellaOnline's Digital Art and Design Editor

Reusing Adobe InDesign Print Content on the Web

When I was first married and we moved from Purdue University to Ohio State where my new husband was to attend graduate school, I got a job as a secretary at OSU. After Dennis graduated, it was my time to go back and finish. But for those few years, I was a secretary without any PC or InDesign software. When the professors I worked for wanted to publish a book or even an article, it took days to manually layout the text and graphics onto a "camera ready" layout sheet supplied by the publisher. It was a pain and there was always that one professor that kept changing his mind. Of course, I was the one who had to redo all my hard work. Oh, if I only had AdobeR InDesignR back then.

Today, I could just click and drag to redo the layout for my "favorite" professor. But InDesign CS3 is far more than just a desktop publishing software. As part of CreativeR Suite 3, you only need to create your masterpiece once within InDesign. Then, still using InDesign, you can repurpose that masterpiece into several formats for print, web, mobile devices and more. This multi-format publishing can save you a lot of time and frustration. For example, BellaOnline is starting a new adventure. It will be a literary magazine that will be published quarterly. We will offer the magazine in print and web formats. So, I will use InDesign to create the print version and then export the web version directly from within InDesign. Here is how it works.

Let's say we have a twenty page magazine that we have worked on until it is perfect and ready for the printer. Now, we need to convert this version into XHTML web pages. This web version will have three parts; the XHTML, CSS and JPG images. We have already optimized the images into JPG format and created the Cascading Style Sheet that will format the web pages. Now, it only takes one simple process to generate the XHTML.

  1. With your document open in InDesign, go to the Pages panel and double-click on the pages we want to convert. Let's say we have decided to convert all but three pages of the original print version.

  2. Select the Selection tool and then click Edit, Select All from the Menu bar to select all the contents on the pages. You will see the boxes appear around all of the images and text.

  3. From the Menu bar, click File, Cross-media Export, XHTML/Dreamweaver. In the Save As dialog box, give our new page a name and click Save.

  4. The XHTML Export Options dialog box will open. First, you will see the General pane. Because we are only converting some of the pages of the original print version, we will set the Export option to Selection. This will tell InDesign to only covert the selected pages.

  5. At the left, click on Images to open the Images pane. As you can see, we have three choices in the Copy Images drop-down menu. We have placed our JPG images in a separate folder that we have named "images". So we need to tell InDesign to link to these images when it generates the XHTML. Let's choose Link to Server Path from the drop-down menu. In the next line, we tell InDesign where the images are on the server. The Path on Server to the images folder is "../images". Finally, because we have optimized the images in JPG format, we will use .jpg for the File Extension.

  6. We are ready for the Advanced pane. In this last pane, we will give InDesign the information about our style sheet. We need to set the CSS Options to External CSS to tell InDesign to look for an external style sheet. Then, give the path to the folder that contains the CSS file. When InDesign generates the XHTML, it will automatically map the InDesign styles that we used for the print version to the CSS for the web version.

That's it. Just wait a few seconds and our new XHTML page will be ready for us and will contain links to the images and CSS. When we view the web version in the browser, it looks just like the print version.

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor