New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

InDesign CS5.5 New Features Overview
Illustration by John Hersey

Exporting to XHTML


From:

InDesign CS5.5 New Features Overview

with Chad Chelius

Video: Exporting to XHTML

More and more, InDesign users are finding that their traditional print-based layouts need to be used in some way, shape, or form on the web. It's very important that users have the right expectation of this feature. The goal of InDesign is not to export a fully laid-out and functional webpage. The goal of InDesign is to facilitate the reuse or repurposing of traditional print-based content on the web. Let's take a look. I'm beginning this video with the brochure underscore XHTML file open on my computer.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
InDesign CS5.5 New Features Overview
1h 38m Intermediate May 24, 2011

Viewers: in countries Watching now:

CS5.5, only the second "dot" release in Adobe InDesign's history, includes a variety of large and small additions and enhancements. For example, you can now drag and drop anchored objects and create linked text that's updated when a change is made to the original text. There are also many new, powerful options related to exporting, including the ability to map styles to export tags and control how content is displayed when you export to EPUB, XHTML, and accessible PDF. In this workshop, Adobe Certified Instructor and InDesign expert Chad Chelius walks you through all these options and more, so you can quickly incorporate the new features of InDesign CS5.5 into your workflow.

Topics include:
  • Dragging and dropping anchored objects
  • PDF enhancements
  • Linked text
  • Mapping styles to export tags
  • Using the new Articles panel
  • Adding alternate text
  • Exporting to EPUB, PDF, and XHTML
Subjects:
Design video2brain
Software:
InDesign
Author:
Chad Chelius

Exporting to XHTML

More and more, InDesign users are finding that their traditional print-based layouts need to be used in some way, shape, or form on the web. It's very important that users have the right expectation of this feature. The goal of InDesign is not to export a fully laid-out and functional webpage. The goal of InDesign is to facilitate the reuse or repurposing of traditional print-based content on the web. Let's take a look. I'm beginning this video with the brochure underscore XHTML file open on my computer.

And once again I'm going to open up the Articles panel to show you that the Articles panel allows me to structure the format of the exported file, so all of these separate elements on the page are going to be exported into a flowable XHTML format. Now this particular project, even though visually it makes sense to have these snowflakes on my front cover, I really don't know that I need them in my web layout.

So what I'm going to do is I'm going to select one of these snowflakes and I can see that this particular snowflake is the one that is selected because we had this blue box to the right. And to remove this from the exported content, I'm simply going to click on it and then I can either click the trash can at the bottom of the Articles panel or I can click on the panel menu and choose remove snowflake.AI. When I do that you'll notice that it disappears from the Articles panel but it still resides in my layout. That way if I'm going to print this, or make a PDF of it, it'll still show up, it's just not going to show up in my exported flowable format, such as XHTML. I'm going to do the same thing to these other snowflakes. We can actually simply select it and Choose Remove. We do the same thing with these, I'll use the trash can this time, select it and hit the trash can, and I'll do it one more time with this one as well, get rid of that.

So I'm going to go ahead and close the Articles panel. What I can also do is select an image. And then come up to my object menu and choose object export options. This is where I can add alternate text to this object, so by default it's pulling this text from the structure, I'm going to set a custom alternate text and I'm simply going to type in here, kids Snowboard Camp 2011, and then in the ePub and HTML button, I can also specify how this is going to get rasterized. So I have many of these options available in the XHTML export dialog, but the object export options actually allows me to specify more specific properties for this image.

Just going to scroll down to my next image. For this alternate text, I'm actually going to pull it from the XMP description, and you'll notice that this content is pulled in automatically. Once again this is an amazing feature that they added to InDesign CS 5.5. So I go ahead an clicked on, and then one last thing in the Paragraph Styles panel, I'm going to click on the panel menu and I'm going to Choose Edit All Export Tabs.

And we can see that we can specify the tag that's going to be applied to my text in a PDF or in an ePub and HTML file. So what I'm going to do, you can see that my headings have already been specified, but body, I think I'm going to map to a P tag, which is a standard paragraph tag. My caption I think I'll do the same and may be body and probably events as well. We'll make that a P tag also and body indent.

So I'll go and click OK and, and where this differs from previous versions is the fact that I have a lot more control now than I did before. Traditionally InDesign would apply class styles to everything that I exported, but this gives me a little bit more control over how the tag is applied. Now, I'm actually going to click OK, and this time in the Paragraph Styles panel I want to specify this subhead span. And I'm going to right-click on that, or if you don't have a two button mouse you can Ctrl click on it.

I'm going to Choose > Edit > Subhead > Span and down here in the export tagging category, we can see the tag I applied. But in this case I also specified a class style to be applied to this H2. And this gives me a little bit more control over my final output so I'll click OK. Now let's go ahead and export this file. So I'll go to the file menu, and Choose export, the format is going to be set to HTML and I'll just save it inside of my Project files folder. I'm going to click Save, and then in the HTML export options dialog, I can specify whether I want to export the whole document, or only this selection. So in my case, because I have this image selected, I want to make sure that document is chosen.

By default it's going to base the ordering on the page layout which once again is not a very accurate way of doing this. I'm going to use the Articles panel structure that's going to give me a lot more control. Finally in the formatting options. I can specify a margin to apply to this document. And my bullet and numbers are going to match to standard XHTML unordered and ordered list. I want to make sure that I view this when I export it, in the image category, I can specify what I want done to my images.

I can specify that they are optimized. I can use the original image or I can actually link them to a Server Path. You might use this Option, if you've already optimized your image using, you just want to point to them. I'm really mindset to optimized I will try to preserve the appearance of the layout, set the resolution down to 72, and then I can specify my image alignment right here, just as I had done for an ePub document as well.

So maybe I'll add a little bit of space before and after these images. And I'll also tell the settings to be applied to any anchored objects. Down here, where my images are located, I can specify the conversion, which is currently automatic, which will automatically detect the best format for the image. Or, I can specify, what I want these converted to. So I'll leave this set to automatic. I'm going to click Advanced and I am going to make sure that InDesign is going to create embedded CSS for me. Now, if you're actually creating webpages like this on a regular basis, you may decide that you want to write your own custom CSS and point your file to that CSS file.

That way it will always look the same when you export it. So, I'm going to go ahead and click the OK button, and this is going to export the document to a webpage. My document opened up in Safari. Yours might open up in another web browser. But we can see now that the structure is correct, the order that I specified this content in the Articles panel, is being retained. And if I just take a look at the code, if I go to the View menu and chose View Source, we can get an idea of how this XHTML file was created.

We can see that we have the CSS rules that have been created for the tags that I've created. So as I get down here a little bit further, you can see that I have my H3s. You can see that I have my sidebars, and so on and so forth that I've chosen. So, this gives me a lot more control than in previous versions. Now, I'm going to go ahead and scroll down a little bit further we'll also be able to note that the Alt text for my images is being applied as well. So, you can see with the controls provided in InDesign CS 5.5, the process of exporting content from InDesign to a web based format is much easier and faster than it used to be.

Give it a try and I'm sure you or your web developer will be happy with the results that you get.

There are currently no FAQs about InDesign CS5.5 New Features Overview.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed InDesign CS5.5 New Features Overview.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.