Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you have ever tried to export a normal InDesign layout to HTML or ePub, you might have noticed that certain parts of the layout came out in the wrong order. Your captions could be nowhere near their respective photos, a headline might appear after an article, and even paragraphs could be in the wrong order. The new Articles panel helps solve this problem by letting you create relationships in order among page items. With the article's InDesign file document open, let's do a fresh export and see what happens before I change anything to this layout. I'm going to go to File > Export and choose the format HTML.
I'll throw this on my Desktop and I'll call this standard. I'll click Save. In this export, I am going to choose Based on Page Layout. This means InDesign is going to guess on what it thinks the structure of the layout is. There are no other options because I haven't done anything else yet. I am going to be sure to include View HTML after Exporting. I'll click OK, and now inside my browser we can take a look at the exported content. It begins with A Brief History of San Francisco followed by NASA, The San Francisco Peninsula, this little article, and this photo, and then the main article begins with the rest of the content of the layout.
Now I'm going to put this back up at the top and this may not be what I really want. Let's go back to InDesign and take a look. Inside my InDesign layout, I have the main article called A Brief History of San Francisco, and then the article starts here and flows throughout the entire layout. But inside my exported HTML file, it began with A Brief History of San Francisco, but then this sidebar showed up out of nowhere. I really don't want this to begin inside my layout. The reason InDesign decided to say, hey let's put this right in the beginning, is because of something called Z-order.
Z-order is the process that InDesign figures out how to include information in Export. The way it works is InDesign starts in the top -left corner and starts to go over and down. Well, the first thing it found was A Brief History of San Francisco, so that's why it was first. The second thing it found was the photo credit NASA which is located right down here. The reason it found it is from the left -hand side we can see that it found it first, because that was the next piece on the left-hand side. Next, it found The San Francisco Peninsula, then the photo, then it found Located at the entrance The San Francisco Bay.
If I want to control the order of this rather than InDesign just willy -nilly guessing, I need to create relationships among the page items. To do that, I'm going to use the new Articles panel. The Articles panel is showing up in my upper right-hand corner because I'm in the workspace called New in CS5.5. If you don't have this showing, just go to Window and you can choose Articles. You can see it's a brand-new panel that's listed at the top of the options inside the Window menu. I'm going to choose Articles. The Articles panel has step-by- step directions on how to use it. So you don't have to worry about going to the Help system to figure out how does this panel work? The only other panel I can think of that has the same functionality like this is the Data Merge panel.
Hopefully, as they add new features to InDesign, they will add this functionality in the future where it explains exactly how to use it directly inside the panel. I'm going to begin by creating an article. So I'm going to come over and the Plus (+) button inside the Articles panel to create a brand-new Article. We're going to call this A Brief History of San Francisco and we'll click OK. Inside each of these articles I'm going to put page elements and the Articles panel will determine the order of their export. So I'm going to begin by grabbing the Brief History of San Francisco and I'm going to drag and drop and put this inside this article.
Now we can see it shows up as the first item and it's named with whatever it's named inside the Layers panel. Next, I am going to grab this main frame and drag it over and this added this entire threaded story. If I come in here and select all of this text, you can see that it has the entire article selected. So I don't have to worry about going through and grabbing this frame and this frame and this frame; it's going to grab the entire threaded story and add it to my Articles panel for me. Now a part of this story is the photos and these captions over here, but because they're not anchored I have to add them manually by myself, or they wouldn't be included in the export.
So I'm going to go over and grab my Selection tool, and then I'll grab this image and drag and drop it in here, followed by the photo credit and the caption. Now if I want to choose the order of these, it starts with this Brief History of San Francisco, but after a while you can't really tell what is what over here. But if I double-click on each of these it'll bring me to that of that item in the layout. So if I double-click on Brief History of San Francisco, it zooms in and selects it for me. Next, I've got this main paragraph thread followed by the photograph, photo credit, and the caption.
Well, I want this photo to be after the Brief History of San Francisco headline. So I'm just going to drag this right up here, followed by the photo credit and the caption. We'll make sure that Brief History is right up at the top. Now I can just double-click through here to make sure everything is in the right order. Excellent! Now I've got this first article done, or this little section, and now I'm going to add another one. So I'm just going to come over to the side and I want to add The San Francisco Peninsula -- this little story. Well, rather than making an extra article, and then dragging and dropping it in, I could do this a little faster.
If I just select all of this and drag and drop the entire group into the Articles panel, it'll pop up and say alright, well, what do you want to call this? I; m going to call this article The San Francisco Peninsula and we'll click OK. Let's make sure everything is in the right order. If I come over here and double-click, it starts with the image which I really don't want it to start with. Next is NASA, followed by the main article. I'm going to put that main article at the top, followed by the photo, and then eventually the photo credit. With that article finished, let's go down to another page.
I'm going to grab the San Francisco Neighborhoods, all of this information, and just drag and drop that in here. And we'll call it The San Francisco Neighborhoods, click OK. I'll open up this panel a little bit more, make sure everything is in the right order. I'll put this at the top, followed by the image, then the photo credit, and the caption. There we go. And then one last one, the Climate, we'll drag and drop that in here and we'll call this Climate. And this one actually came in the correct order. Alright! If I want the same page element to appear in more than one article, I can just drag and drop it into another article.
I'm going to drag and drop the table into The San Francisco Neighborhoods. Now if I open this up I'll see it shows up inside both of them. If I decide that I don't really want it in both of them, I can just hit the little trash can to remove it from this particular article. But this will not remove it from my page. I have to be careful because if I would hit the Delete key when I was inside the Article panel, it would also delete it from actual page layout itself. A quick way to add every page element in the entire layout into one article is to Command+click or Ctrl+ click the Plus (+) button.
When I do this, I'm going to call this everything and we'll click OK. You'll see everything and we'll click OK. You'll see everything in the entire layout got added to this one article, including these lines. If I double-click you can see there're these vertical rules that are inside my layout that I really don't need to have inside an exported HTML or ePub file. But right now I don't really want to have everything inside here. So I'm just going to select this panel and hit the Trash can. If I would hit Delete I might delete something inside my page layout. Inside my Articles panel menu there's an option called Use for Reading Order inside the Tagged or Accessible PDF.
We're going to leave this checked-on right now, and you probably really don't have a reason to uncheck this, but we'll be talking more about this in a later video. When I'm ready to export this to an HTML file, I can choose if I want to include this information in an export. If I uncheck the Climate check box, this Climate article won't be included, but if I have 1it checked-on, it will. I can also decide to put this in a different order: if I want Climate to be first or if I want it to be last. Right now, this is in the order that I want it to be. So we're going to go to File > Export, we'll choose HTML, we'll put this on our Desktop, and we'll call it article.
In Export I want to choose Same as Articles panel. There's also an option called Same as XML Structure, but it's grayed out because I've never defined an XML structure in this file. We're going to be sure that View HTML after Exporting is checked, we'll click OK. Now in the exported file everything is in the order that I expected. It begins with A Brief History of San Francisco followed by the photo, with the caption, and photo credit, and everything else. In previous versions of InDesign you could control the order, but you had to resort to using the XML structure to organize your content before Export.
With CS5.5 determining the order of your layout is much easier because you can just drag and drop your content into the Article panel. This dramatically reduces the complexity involved to get accurate Exports from InDesign.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 57998 Viewers
119 Video lessons · 67405 Viewers
84 Video lessons · 16757 Viewers
125 Video lessons · 29632 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.