Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
More and more, InDesign users are finding that their traditional print-based layouts need to be used in some way, shape, or form on the web. It's very important that users have the right expectation of this feature. The goal of InDesign is not to export a fully laid-out and functional webpage. The goal of InDesign is to facilitate the reuse or repurposing of traditional print-based content on the web. Let's take a look. I'm beginning this video with the brochure underscore XHTML file open on my computer.
And once again I'm going to open up the Articles panel to show you that the Articles panel allows me to structure the format of the exported file, so all of these separate elements on the page are going to be exported into a flowable XHTML format. Now this particular project, even though visually it makes sense to have these snowflakes on my front cover, I really don't know that I need them in my web layout.
So what I'm going to do is I'm going to select one of these snowflakes and I can see that this particular snowflake is the one that is selected because we had this blue box to the right. And to remove this from the exported content, I'm simply going to click on it and then I can either click the trash can at the bottom of the Articles panel or I can click on the panel menu and choose remove snowflake.AI. When I do that you'll notice that it disappears from the Articles panel but it still resides in my layout. That way if I'm going to print this, or make a PDF of it, it'll still show up, it's just not going to show up in my exported flowable format, such as XHTML. I'm going to do the same thing to these other snowflakes. We can actually simply select it and Choose Remove. We do the same thing with these, I'll use the trash can this time, select it and hit the trash can, and I'll do it one more time with this one as well, get rid of that.
So I'm going to go ahead and close the Articles panel. What I can also do is select an image. And then come up to my object menu and choose object export options. This is where I can add alternate text to this object, so by default it's pulling this text from the structure, I'm going to set a custom alternate text and I'm simply going to type in here, kids Snowboard Camp 2011, and then in the ePub and HTML button, I can also specify how this is going to get rasterized. So I have many of these options available in the XHTML export dialog, but the object export options actually allows me to specify more specific properties for this image.
Just going to scroll down to my next image. For this alternate text, I'm actually going to pull it from the XMP description, and you'll notice that this content is pulled in automatically. Once again this is an amazing feature that they added to InDesign CS 5.5. So I go ahead an clicked on, and then one last thing in the Paragraph Styles panel, I'm going to click on the panel menu and I'm going to Choose Edit All Export Tabs.
And we can see that we can specify the tag that's going to be applied to my text in a PDF or in an ePub and HTML file. So what I'm going to do, you can see that my headings have already been specified, but body, I think I'm going to map to a P tag, which is a standard paragraph tag. My caption I think I'll do the same and may be body and probably events as well. We'll make that a P tag also and body indent.
So I'll go and click OK and, and where this differs from previous versions is the fact that I have a lot more control now than I did before. Traditionally InDesign would apply class styles to everything that I exported, but this gives me a little bit more control over how the tag is applied. Now, I'm actually going to click OK, and this time in the Paragraph Styles panel I want to specify this subhead span. And I'm going to right-click on that, or if you don't have a two button mouse you can Ctrl click on it.
I'm going to Choose > Edit > Subhead > Span and down here in the export tagging category, we can see the tag I applied. But in this case I also specified a class style to be applied to this H2. And this gives me a little bit more control over my final output so I'll click OK. Now let's go ahead and export this file. So I'll go to the file menu, and Choose export, the format is going to be set to HTML and I'll just save it inside of my Project files folder. I'm going to click Save, and then in the HTML export options dialog, I can specify whether I want to export the whole document, or only this selection. So in my case, because I have this image selected, I want to make sure that document is chosen.
By default it's going to base the ordering on the page layout which once again is not a very accurate way of doing this. I'm going to use the Articles panel structure that's going to give me a lot more control. Finally in the formatting options. I can specify a margin to apply to this document. And my bullet and numbers are going to match to standard XHTML unordered and ordered list. I want to make sure that I view this when I export it, in the image category, I can specify what I want done to my images.
I can specify that they are optimized. I can use the original image or I can actually link them to a Server Path. You might use this Option, if you've already optimized your image using, you just want to point to them. I'm really mindset to optimized I will try to preserve the appearance of the layout, set the resolution down to 72, and then I can specify my image alignment right here, just as I had done for an ePub document as well.
So maybe I'll add a little bit of space before and after these images. And I'll also tell the settings to be applied to any anchored objects. Down here, where my images are located, I can specify the conversion, which is currently automatic, which will automatically detect the best format for the image. Or, I can specify, what I want these converted to. So I'll leave this set to automatic. I'm going to click Advanced and I am going to make sure that InDesign is going to create embedded CSS for me. Now, if you're actually creating webpages like this on a regular basis, you may decide that you want to write your own custom CSS and point your file to that CSS file.
That way it will always look the same when you export it. So, I'm going to go ahead and click the OK button, and this is going to export the document to a webpage. My document opened up in Safari. Yours might open up in another web browser. But we can see now that the structure is correct, the order that I specified this content in the Articles panel, is being retained. And if I just take a look at the code, if I go to the View menu and chose View Source, we can get an idea of how this XHTML file was created.
We can see that we have the CSS rules that have been created for the tags that I've created. So as I get down here a little bit further, you can see that I have my H3s. You can see that I have my sidebars, and so on and so forth that I've chosen. So, this gives me a lot more control than in previous versions. Now, I'm going to go ahead and scroll down a little bit further we'll also be able to note that the Alt text for my images is being applied as well. So, you can see with the controls provided in InDesign CS 5.5, the process of exporting content from InDesign to a web based format is much easier and faster than it used to be.
Give it a try and I'm sure you or your web developer will be happy with the results that you get.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 58517 Viewers
119 Video lessons · 67696 Viewers
84 Video lessons · 16955 Viewers
125 Video lessons · 29850 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.