Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Preparing a full layout for export

From: InDesign CS6 to HTML

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.

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.

Show transcript

This video is part of

Image for InDesign CS6 to HTML
InDesign CS6 to HTML

26 video lessons · 4984 viewers

Michael Murphy
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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 ?

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