Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Okay, enough talking about all that print stuff. I mean, come on, who prints anymore? No, I am just joking. Print is great, but these days, people also need to publish on the web and that means we need HTML export or more specifically XHTML. If you don't know the difference, let's just say XHTML is like a more pure version of HTML. Now, one of my biggest frustrations with InDesign is that you cannot easily import HTML files. You can kind of fake it with XHTML import, but it's not pretty. You can however export XHTML pretty easily by going to the File menu and choosing Export For Dreamweaver.
I want to be clear here. It says Dreamweaver, but you don't have to use Dreamweaver if you don't want to. You could use GoLive or any other web editor. It's just plain XHTML. I think they just put Dreamweaver in there to build brand identity, because Dreamweaver is in the Creative Suite. Before I actually choose this, I am going to select what I want to export in my document. Otherwise I will get the entire document and that's just going to kind of bog me down. So I am going to select these three text frames here and now go to File > Export for Dreamweaver, and it opens up the Save As dialog box. I am going to put this inside the Web Files folder in my Exercise Folder and I can see there is some other stuff in there already. I will talk about that in just a minute.
I will call it Bliss_Magazine.html, click Save, and up comes the XHTML Export options dialog box. We can see that even now, if we wanted to, we could export the entire document, even though something is selected on the page, but I am just going to export this selection itself. This General pane of the Export Options dialog box also lets me control what's going to happen to bulleted and numbered text in my document. If I had some automatic bullets or automatic numbers, what do I want to have happen to them? Right now, it's set to Map to Unordered or Ordered Lists, but if I wanted to, I could change it to convert to actual text itself. Then numbers will turn into normal text, but I don't know why I'd want to do that. I am just going to Map it to Ordered Lists.
Let's look at the Images pane here. If I were exporting images, InDesign lets me control what's going to happen to them and specifically, do I want them converted to JIF or JPEGs or GIF and JPEGs, if you want to call them GIFs instead of JIFs. Either way, do you want InDesign to do that conversion for you? Right now, it's set to Optimized, which means it's going to do that conversion for me. If I turn on the Formatted check box, it will also do the cropping and scaling and make it basically look just the way it does in InDesign in the final version. And that's okay, but honestly I must prefer doing that kind of work in Photoshop instead.
I don't really trust InDesign to do a really good job of converting my images into JIFs and JPEGs. That's maybe just me, but I think Photoshop does a much better version. So I would probably choose Link to Server Path instead. You also have the option of choosing the original, which will actually grab the original high-res documents, whatever you have used in your InDesign document, and just put them into a folder. But in this case, like I said, I am going to use Link to Server Path. When I do that, I am telling InDesign that I am going to be handling all the image conversion and you don't have to worry about it all, InDesign. But you do need to tell InDesign where those images are going to be relative to the HTML file. So I am going to just tell it that it's in the Images folder and they are all going to be JPEG file extensions and it will handle all the renaming for me.
Of course, in this example I don't have any images, so I don't really need to worry about this at all. Finally, the Advanced pane gives me control over the CSS. If you don't know about CSS, you should definitely check it out, it's a very powerful way of formatting web pages and I have several options here including Empty CSS Declarations which means that's going to write the CSS code into the HTML file itself, but it's going to leave them empty, it's not going to trying to format those definitions. I could say No CSS or I could specify an External CSS.
I would use this if I have already created a CSS file. Let's start by saying No CSS. I will click Export and it writes the file to disc. So let's go check it out. It's going to be inside this Web files folder. Here it is. There is the HTML file that I created and I am just going to drag this down onto Safari, which is the web browser I'm using right now, and you can see that it is an HTML file. In fact if we look at the View menu and choose View Source, we can see that even though we said No CSS, we are getting DIVs, we are getting the paragraph P tags, Body tags and all of that. It's very basic, simple HTML that we could then take into a web editor like Dreamweaver or something and easily format there.
In this case so, I am going to close that and I will close this. I am going to go back to InDesign and select those one more time. I am just holding down the Shift key while I select those three text frames, and I am going to export again. But this time, I am going to use an External CSS file that I have already created. It's right here inside the Web files folder in the Exercise Files. There it is, blissno5.css. I am going to call this the same name and I will just replace the one that's there and this time, I will go right to the Advanced pane and say, I am using the External CSS and I have to give it a name and it was called blissno5.css, there we go. That was the name of the CSS file. It's going to be in the same folder as the HTML file, so easy to find, and I will click Export, it writes it to disc. Let's go, find it again, right there on the Finder, here it is. There is the HTML file. Put that into Safari, and there we go.
We see that we now have a fully formatted web page with a banner head and what was completely unformatted heading is now a big all caps heading. The pull quotes that were in InDesign show up in this little box over here. That's all possible with CSS, not difficult at all. The subheads and the text all look formatted. So it's a very fast way to get something out of InDesign and quickly apply web formatting to it, and the reason that works is the paragraph styles and the character styles in InDesign match the names almost exactly, it's a little bit different, but it mostly matches the names in the CSS file. So InDesign can actually make that mapping for us.
Let's go back to InDesign one more time, and we can see the paragraph style for this text here is body text and there is a Body Text style inside the CSS file. Okay, let me go back a couple of pages here just to show you how flexible this is. I am going to select two more frames here. I will just grab this heading and the text. I won't do the pull quote this time off on the side, just the heading and the text and one more time, I am going to export this for Dreamweaver XHTML. I will leave it named same, click Save, replace it, and then just say I want to just make sure this is setup. Yup, it's still setup to use the external CSS file, and I will export it. It goes very, very quickly. Go back to Safari, and right now I still have that web page open, but because I saved it with exactly the same name, the second time, all I need to do is refresh this.
I am going to click the Refresh button and you can see that it immediately updates because this is the same HTML file just with different content. I think it's great that Adobe has stuck an XHTML Export feature into InDesign. But to be honest, after you use it a few times, you are going to find that it's just way too limited and frustrating. Many people find that it's faster and easier to just copy and paste your text from InDesign into a program like Dreamweaver and then format the HTML there. Or another good solution is to export your content as XML instead of HTML. I am going to be covering that in the next chapter. But for now, let's take a look at two other ways that we can export interactive documents out of InDesign, SWF and XFL.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.