g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Digital Art and Design Site

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.

Add Reusing+Adobe+InDesign+Print+Content+on+the+Web to Twitter Add Reusing+Adobe+InDesign+Print+Content+on+the+Web to Facebook Add Reusing+Adobe+InDesign+Print+Content+on+the+Web to MySpace Add Reusing+Adobe+InDesign+Print+Content+on+the+Web to Del.icio.us Digg Reusing+Adobe+InDesign+Print+Content+on+the+Web Add Reusing+Adobe+InDesign+Print+Content+on+the+Web to Yahoo My Web Add Reusing+Adobe+InDesign+Print+Content+on+the+Web to Google Bookmarks Add Reusing+Adobe+InDesign+Print+Content+on+the+Web to Stumbleupon Add Reusing+Adobe+InDesign+Print+Content+on+the+Web to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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.


g features
Character Development Design by Mary Begin

Background Images for iBooks Author

Craft Photography - iPhones to Props

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor