Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 64329 Viewers
119 Video lessons · 71730 Viewers
125 Video lessons · 32372 Viewers
103 Video lessons · 31597 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.