InDesign CS6 to HTML
Illustration by John Hersey

InDesign CS6 to HTML

with Michael Murphy

Video: Preparing a full layout for export

Now we've reached the point in this course where we've looked at all the individual pieces of the puzzle. The kind of HTML we get for our paragraphs, our lists, our tables, our images, the frames that contain them, how our styles translate to either HTML tags or CSS classes. And how to arrange the content of a layout in the articles panel to export the proper content in the order that we want it. So now we're at the point where we can stop and quickly review where an article might be at the end of its print design workflow, if you've done all your web work in parallel with that, which is how I work.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course InDesign CS6 to HTML
2h 46m Advanced Oct 10, 2013

Viewers: in countries Watching now:

Today, nearly all print content is destined for a life beyond ink and paper, whether it's EPUB, the iPad, or the web. Adobe InDesign content is unique in that it can be efficiently migrated from your print layout to HTML. Author Michael Murphy shows how InDesign marks up your content when exported to HTML, and how you can gain maximum control of the process. In step-by-step tutorials, Michael walks through the export process for text, lists, tables, images, frames, and other objects, then exports a full layout that's linked to a customized CSS file and uses web-based fonts.

Topics include:
  • Connecting InDesign styles to HTML tags and CSS classes
  • Controlling the order of exported content
  • Exporting just the content you want
  • Bringing sidebars and pull quotes into HTML text flow
  • Adding hyperlinks to images and text
  • Replacing InDesign's CSS with a custom CSS
  • Generating web-optimized images from print layouts
Subjects:
Design Web
Software:
InDesign
Author:
Michael Murphy

Preparing a full layout for export

Now we've reached the point in this course where we've looked at all the individual pieces of the puzzle. The kind of HTML we get for our paragraphs, our lists, our tables, our images, the frames that contain them, how our styles translate to either HTML tags or CSS classes. And how to arrange the content of a layout in the articles panel to export the proper content in the order that we want it. So now we're at the point where we can stop and quickly review where an article might be at the end of its print design workflow, if you've done all your web work in parallel with that, which is how I work.

I know that all of my articles are going to end up on the web. And it's going to be my responsibility to make sure they get there. So I want to do it in the most efficient possible way. So I always keep the web in mind as I design for print. As a result, by the end of my print design process when the article's approved. And it's ready to go to the printer. Or it just went to the printer. I'll have an article that's in the state you see here. The layout is finished for print. But if I zoom out. You'll see that I already have my web optimized versions of my images here on the paste board and ready to go.

My styles, if I look in the paragraph styles panel under edit all export tags. Have all been associated with HTML tags. And you'll notice here that, there all semantic HTML tags. There's nothing custom here. And, there aren't even any classes applied. I know how my css is set up. And the way it's set up is that the container element, the div tag that surrounds my article. Or surrounds certain pieces or components of my article. Defines what the content inside it looks like.

So my article div tells me exactly what a paragraph should look like for an article. My pull quote div tells me how that should be formatted. So I don't need to rely on classes for my paragraph tags, my h one, h two, that sort of thing. Now everyone works differently, and if you are more comfortable with classes and that's how your CSS is set up, then by all means designate class attributes in your paragraph style tagging. But the trend on the web has been shifting more and more Toward clean, semantic markup, detached from formatting, which is entirely handled by CSS.

So as I've gotten more comfortable understanding how InDesign and HTML work together, I've been able to get myself to this point. And all of this work is done as I'm doing my print layout. I don't save it all to the end. If I open a document from a template, the styles in that template have already been tagged, because I've fought through how this is going to go out to the web, and I've made the appropriate export tags part of all of my styles. When I create a new style as I'm designing. I take a moment, I think about how it fits into my CSS and I give it the appropriate tag and class.

It's almost no effort to do, and its a lot easier than trying to backtrack my thinking after I've already finished the article, and I'm in a hurry to get my issue out to the printer and up on the web. So I keep these processes running in parallel. I'll click OK and I'll just point out a few other things that have already been done as I work. My headline frame here on the first page uses an object style called Headline that corresponds to a div class in my CSS. My byline frame that follow it Uses an object style called By Line.

That name is also a match to a div class in my CSS. This first frame containing my main flow of text uses an object style called article. The remaining frames that it flows into don't use that style. They just use num with overrides. But it doesn't matter. When Indesign writes the div tag for this entire flow of text, it's only going to look at the object style applied to the first frame where the story starts. Since I've given that the object style of article, I'll get a div class of article that matches my CSS.

This web image here on the paste board uses an object style called main. And that matches a div class in my CSS that handles how the main image for my articles online are formatted. This grouped image here uses an object style called Inline, and a corresponding div class in my CSS uses Inline as its name to describe how Inline images are formatted. With this image still selected, I'll go to the Object Menu so we can see that as I worked I all ready applied custom rastorization to it since its a group, gave it a fixed size, PNG as a format and 72 pixel per inch resolution.

And I gave it all text. So, this is ready to be rastorized as it should be. And get the appropriate all text. One of the nice things about this dialogue is that it is non motile so I can select another image, this one here on the pasteboard of the first spread, and I can see that it's all text has already established being pulled from its xmp metadata. So these images are prepped and ready to go for the web. Throughout the design process, I've also done other things like apply my print only text condition to things like the story stop here at the end of the article, which I don't need to see on the web.

And to this email address and URL, which I don't want to present when I show this online, I just want to have hyperlinks on these particular phrases. We walked through this process in a previous movie in this course. I just wanted to show that by the time I'm done designing this for print, I've already thought about this and applied this in my layouts. If I open the Hyperlinks panel, you can see that I've already got whatever hyperlinks I'm going to need established in this layout. Two of them you saw here at the end of the article and two others are interspersed somewhere in the body copy.

So by the time I'm ready to export this as a press ready PDF and send it to my printer, there are only a few remaining tasks left for me to do in this Indesign layout to get it ready for HTML. And here's what's left. First, I'm going to turn off my print only condition, and hide anything in the layout in my text that I don't need to see in my exported HTML. The next thing I need to do is anchor anything into my flow of text that needs to appear in line or interspersed with the full flow of the article body.

And in this case, that's this grouped image here on the paste board. I'm going to click and hold this adornment on the frame, and drag it in at the very end of this paragraph, because I want these images to appear before this sub head in the HTML. The other object that's going to go in line is this pull quote here, and I'm going to drag its little anchoring adornment right here to the start. Of this paragraph in the frame below it. I'll go back to my first spread, and now I'm going to start populating my articles panel with the content I want to export.

Let me minimize this hyperlinks panel so we have a little more room to work here in the Articles panel. I'll zoom out so I can see my entire pasteboard, and I'll start clicking my content in the order I want it added. First the headline frame, then the byline, then the main image, then my main body copy frame, and I'll drag that to the Articles panel. A new article is created. I want Include When Exporting checked. I'll click OK. And they're all in here in the order in which I clicked them.

Because everything else on the second spread is already anchored, there's nothing I need to do there. So, I've got everything in my Articles panel ready to go. And that's it. That's all the preparation I need to do once an Article layout is finished if I've been keeping the web in mind throughout the design process. It takes minutes at most. For any given article to get it ready for export. I'm going to save the state of this file as 05 03 end, so we have a start and end state to refer to.

In the next movie, we'll export this file and that's where we'll see the payoff for all of this preparation, all of this dilligent and strategic thinking, and we'll add a few bells and whistles in the form of a custom CSS. And a JavaScript that calls to web fonts and adds great looking typography to our exported HTML version of this article.

There are currently no FAQs about InDesign CS6 to HTML.

 
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.


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 Already a member? Log in

* Estimated file size

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 CS6 to HTML.

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 ?

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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.