Join Michael Murphy for an in-depth discussion in this video InDesign and HTML overview, part of InDesign CS6: HTML.
It's important to know upfront what InDesign will and won't produce for you when it comes to HTML. InDesign does not attempt to produce HTML-based versions of your print layouts, nor can it build a working webpage for you. InDesign is concern only with content. The content of your page, it's text, images and graphics. That's what InDesign exports. This makes perfect sense for the modern web since sites now are largely handled by content management systems or blog platforms, like Word Press, Joomla, and others.
The pages in which content get served up are typically templated with the predefined CSS controlling their layout and formatting. This is the destination InDesign's HTML export aims for. However, if you simply export any print layout from InDesign without preparing it for HTML export, using only InDesign's default settings. You likely to think that InDesign is an HTML dead end. Let's take a look at what I mean.
Here we have an InDesign print layout. Its not an incredibly long document, it's about four pages and it's an article from a travel guide, and it's pretty representative of kind of thing you would see in a news letter magazine that sort of thing. We've got a headline, a byline, a main image. A flow of text with all of the body copy, and some specific formatting. Like this drop cap here at the beginning. On the second spread, we've got a pull quote. More of the body text which contains a numbered list, and a bulleted list.
There's a table here at the end. And a group of images down at the bottom of the page. Also, in the background, we've got this. Ghosted image of Alcatraz Island as sort of a visual backdrop for the whole page. So this is your typical print layout. Let's see what happens if we do nothing whatsoever to this file, and just export it to HTML and see what we get. From the file menu, I'm going to choose Export. I'm going to save this to my desktop, and I'm just going to use the name that InDesign gives it here because I'm not saving this for any particular purpose.
From the Format menu, I want to make sure that html is selected. I'll click Save. And what you're seeing here are the default export options for HTML. I'm not going to change anything here except to check on View HTML After Exporting. That will open my browser and load the resulting HTML into it once the export's complete. I'll click OK, and design will export the file and loads it into my browser. And already things aren't looking good. I've got a huge image here which is the opening image from the left hand side of that spread and, I'm not sure if you can tell, but it's disproportionally scaled.
It's matching the dimensions from the print page but squeezing the full uncropped image into it. Below that I've got my headline and that formatting really doesn't look very good. You also can see that Indesign has attempted to match the formatting of my text that appeared in the print version. Unfortunately, this really doesn't work well for the web, mostly because the text is entirely to small, you can see though that my numbered list is here. My bulleted list is here, but there are no bullets.
And, I've got a table in here that is nearly impossible to read. Also, the byline for this article, which should be after the headline, is all the way here at the end of the article. And my background image, which was great in print, but I don't need on the web, has been included here. My poll quote follows that. And that group of images that was at the bottom of the last page gets exported out as individual images. So, I've got images that are too large, and dis-proportionally scaled.
I've got text formatting that just doesn't work on the web at all. I've got missing bullets in my bulleted list. My content order is completely incorrect. I've got an image here, I don't want in my exported XTML. And individual images where I want to have a composite arrangement of images like I had in the print layout. And let's take a look at one more thing here. I'm going to open this image in a new window. And you can see it fills the whole window, and if I click to magnify, this is the actual resolution of this image.
It's enormous. Entirely too big for the web. It's 1894 by 1420 pixels. This is not what I want either. So, in addition to all the other problems, my images are not optimized for the web. And I think right about here is where a lot of InDesign users just throw up their hands and say, forget it. There's too much to fix here. It'll be easier for me to do it manually. And based on what you see here, I can completely understand that. So why did this come out so badly? The reason is that none of the necessary preparation required to take advantage of InDesign's HTML capabilities, has been done in this file.
Let's take a look at what we might get. From a version of this file that is properly prepared. I'm going to go back to InDesign. And I'm going to switch to a finished version of this layout. This is the same layout. It looks exactly the same. The difference is that all of the necessary preparation required to get good HTML export from InDesign has already been done in this document. Throughout this course, we're going to look at every step that was taken to get the file into this state.
But for now, let's just export this prepared file and see what our HTML results are. Again, I'll go to File>Export, I'm going to save this to my desktop as well. Again, with just the name that Indesign gives it, I'll click Save. The settings here are different, under General, Image, and Advanced, and we'll look at all of that later. I'll click OK, and this is a whole lot better. You'll notice it's still not perfect. I've got some spacing problems.
Something really strange is going on here with the drop cap. The text still looks a little small to me, but that's because there's a step I still have yet to take when I export from Indesign this way. I need to go to where this file is stored, which is on my desktop. This is the HTML file that InDesign produced and this is a folder of resources that's generated when ever you export HTML. Within that there is a CSS folder, and this is the CSS that InDesign creates.
This is a custom CSS file that I attached when I exported. I'm going to delete the CSS that InDesign created, which is right now competing with my custom CSS. I'm going to go back to my browser and refresh, and this is the result that I'm looking for. I've got my article contained in a width that's appropriate for the content well of my website once I put this page up. The page is calling on web fonts throughout, so I've got nice typography.
I've got a web optimized main image here that is not disproportionately scaled. And has some CSS effects to round the alternate corners, top and bottom. I've got cross heads, spacing between paragraphs. My pull quote is floating nicely here to the right. I've got my numbered list here, but as you can see I've got two sets of numbers. This is the only thing I'm going to have to go into my HTML and fix, because it's a problem specific to CS6, and we will cover that in a later movie in this course.
But, as I continue down the page, I have got sub heads, I have got a bulleted list. I've got my images all grouped together nicely using rounded corners on the outer edges controlled by my CSS. And at the bottom, I've got a nicely formatted, completely legible table as well as working hyperlinks within the text itself. So how do we get from InDesign's unimpressive defaults to this? That's what we're going to be working on throughout this course.
- Connecting InDesign styles to HTML tags and CSS classes
- Controlling the order of exported content
- Exporting just the content you want
- Bringing sidebars and pull quotes into HTML text flow
- Adding hyperlinks to images and text
- Replacing InDesign's CSS with a custom CSS
- Generating web-optimized images from print layouts