Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,987 courses, including more Design and personalized recommendations.Start Your Free Trial Now
- View Offline
InDesign is being used to create much more than standard print-based products nowadays. InDesign is being used as a launch pad for other media formats such as XHTML, EPUB, and PDF. Although InDesign has been able to export to these formats for some time now. InDesign CS5.5, has made the process of exporting to these formats easier, and more accurate, by providing the new export tagging feature. This allows you to map certain text elements to standard XHTML, EPUB, and PDF tags.
To improve web page creation, EPUB creation, and accessible PDF generation for users with visual impairments. I'm beginning this video with the brochure.indd file open on my computer, and if I scroll down to page 2, you'll see that I have some content, and I'd like to export this information to a web page. Now, the export tagging feature as I said before, applies to web pages, EPUBs and accessible PDF files. But in this video, I'm going to show you this feature by exporting to a web page. Now, the first thing I'm going to do is show you what your webpage is going to look like if I just export it without doing anything inside of InDesign at all. I should point out that the feature that we're going to be using it really requires that you use styles inside of your document.
And you'll see a little bit later in this video how that's going to affect the export tagging process. So the first thing I'm going to do, I'm going to come up to the File menu, and I'm going to choose Export. And in the Export dialog, I'm going to choose HTML for the format, and I'm going to go ahead and just put it inside of the folder that I'm currently working. So I'll click the Save button, and I'm going to leave these settings pretty much at their default, and I'm going to tell it to view the file after exporting.
So I'll go ahead and click the OK button and this is going to export this document to an XHTML file. Now, you really should not expect a final, complete web page when you use this feature, because that's really not what it's intended for. It's really intended for making it easy for you to repurpose content for the web. As you could see, the formatting has been retained fairly accurately. I mean, the, the images are fairly large; but our fonts, they're pretty much exactly what we had them set to.
Now, if I scroll down in this document, you, you really should not expect a complete web page when you look at this file, because in reality, InDesign is not intended for that purpose. It's designed to repurpose content for the web, rather than creating a final complete web page. What I'm going to do is I'm going to come up here to the View menu, and I'm going to choose View Source. And that's going to show me the XHTML code that InDesign has written for me. And if I scroll down here, you're going to see that there's a lot of CSS information up here at the top, which is fine.
But as I scroll down into my document, I get to the meat of the content. You can see that pretty much everything is tagged with VP tag and this was one of the problems even though it applied class attributes to the P tags. it's,it really has limited my ability to add any type of semantic markup to this document. So, what I'm going to do is I'm going to close this document. And I'll quit out of Safari for now. And I want to show you how we can improve this feature. Now, it's important to me to simply point out that traditionally in previous versions of InDesign, we have been able to do some mapping of styles to tags. But it was a fairly clunky method and it was really involved as far as getting the content that I wanted.
What I'm going to do in this particular document, is I'm going to use my type tool and I'm going to click inside of this text here, at the top. And I'm going to come over here to my Paragraph Styles panel, and you can see that this particular text is using the fun heading style that I've created. Now, I would like this heading to map to an H1 tag in my webpage. So what I'm going to do is I'm going to right-click on the fun heading style. If you're on a Mac and you're not using a two-button mouse, you can Ctrl+click.
And I'm going to choose Edit Font Heading. And in InDesign CS5.5, you are going to see a new option all the way down here at the bottom called export tagging. I'm going to click on that and you will see this whole new section that's avaialble for us to adjust. So you could see, currently, the tag for this heading is mapped to automatic, and that's exactly what we saw when we exported the web page. So in this tag drop down menu, I'm going to change this to an h1. You can see that InDesign is providing us with all of the standard XHTML tags down here.
So I'll choose H1 and I'm also going to point out at this time that you'll see that there's a different section down here for PDF. I can also map that text to a heading for an accessible PDF file. Since I'm only going to a webpage here, I'm not going to worry about that right now, but it's important if you create accessible PDF documents. This is a huge improvement on previous versions of InDesign. So I'm going to click OK. Then we've got some subheadings.
You can see that I have the subhead span, and then I've got some standard subheads here. So I'm going to right-click or Ctrl-click and choose edit subhead. And I'm going to go to the Export Tagging section. I'll change that to an H2, and I'm going to do the same thing for my subhead span, make sure that, that goes to an H2. And I should also point out that I can really type any tag that I want to in here. If I choose to, I can literally type, I can make one up as I go.
Even though, there's no guarantee that it's going to be formatted properly in my XHTML document, I can in fact, create whatever tag name I want to right here. So once again, I'll change this back to an H2, and in addition I can apply a class style to any of these. So, what I may want to do if this is a unique subhead, because I called this subhead span, I could create a class. Maybe I'll call this, span heading. You know, in that way I can call on it using CSS. Then go ahead and click OK.
I'm just going to scroll down a bit further. Over here, I have another subhead, this one is sidebar heading, I'm going to go ahead an edit that one, and we'll just make that one an H3, click OK. And that pretty much takes care of all my headings. Now, I'm just going to zoom in on some of this text here, because you'll also see in this area I have a character style applied. Now, this character style is not manually applied. It's actually being applied within a nested style, but we can see down here in the lower left corner of the character styles panel that the bold style is being applied.
Just like with our paragraph styles, I can also change the export tagging for a character style. Once again, I'll right-click or Ctrl-click on the bold character style and choose edit bold, and here in the export tagging area, I have inline tags that I can apply to this text as well. So, because this was bold, I'm simply going to apply the strong tag. This is great because I'm applying semantic mark up to my XHTML, and not relying strictly on classes... So I'll go ahead and click the OK button and that seems like it's going to be pretty good for this example.
So I'm going to press Command+0 on Mac, Ctrl+0 on Windows to just zoom out here, and I'll go to the File menu and, once again, I'm going to choose Export, and we're going to set the format to HTML. This time, I'm going to name this file Brochure_clean, and I'll click the Save button once again. And I'll make sure that I'm exporting the whole document. And once again, I'm really not going to change anything in here, I'm going to leave it the same, so that we have an equal comparison.
And I'll make sure that I'm going to view the HTML after exporting. If I click the okay button it's going to export a new XHTL file and it's going to open it in Safari. I'll scroll down and much of this is going to look the same, but when I get down to my main headings, you can see that here, this has certainly changed. These subheadings have changed as well. And so let's take a look at the code. Go to the View menu and choose View Source. If I scroll down, you're now going to start to notice that I still have a bunch of CSS styles that have been created in here.
But what is different, is that now you'll see that I have a H1 applied to that main heading. And there's a bunch of span tags that have been applied because of the fact was that nested style that had a bunch of individual character styles applied. But as I scroll down a little bit further, there's my subheading that is now an H2. The rest of the styles are P, here's another H2. And if I scroll down a little bit further I should be able to find the H3 that was used within that sidebar.
So, you can see how much of an improvement this is from the previous versions of InDesign, and you can see how much control it provides us, for users who have had to tag their content in the past. Meaning with previous versions of InDesign, the new export tagging feature will be a blessing to you. if you're just getting started exporting content from InDesign, you too will appreciate how flexible InDesign CS 5.5 is and how much control it provides to you.
- 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