From the course: InDesign Secrets
346 Export to HTML5 - InDesign Tutorial
From the course: InDesign Secrets
346 Export to HTML5
- [Instructor] You know that InDesign can export HTML right? For example, I'll go up to the File menu, choose Export, and now here in the Format pop-up menu, I can choose HTML. But this feature will only export your text and graphics. It totally ignores the page layout. This is here just so that you can get your content out of InDesign, and put it into WordPress, or give it to a web developer to make pretty. So what do you do if you want to export your document as HTML, and keep the page geometry, you know, how the page looks, plus animations, interactive features, and all that? It's totally possible, but you need to use either a free script, or a commercial plugin. Once you have one of those, it's really easy. Actually, I should say that you can get HTML out of InDesign, by exporting a fixed-layout EPUB file. Most people don't realize that EPUB is written entirely in HTML5, but you can actually crack open an EPUB file and see the HTML and CSS inside of it. But here's the problem; EPUB files can only work in dedicated EPUB readers, and not everyone has an EPUB reader that can handle fixed-layout EPUBs. Now, there's one other way to get HTML out of InDesign. I'll click that. You can come up to the File menu, and you can choose Publish Online. This is a very cool Creative Cloud service that lets you export an entire document as HTML to be hosted on Adobe's servers. It's really easy! I love Publish Online, but it does require that you use Adobe's servers, so you can't edit the HTML or put in on your own site, or put it into an app or something like that. That's where the free script and the plugin come in. Let's look at those. First, you can find that free script here on InDesignSecrets. Now I need to say that if you're InDesign document is more than one page long, you need to read through this blog post carefully, and learn about how to add page navigation links. Otherwise you'll export your pages, but you won't be able to navigate from one page to the next. But in my case, here, let me jump back to InDesign. This is just a one page document, so I don't need to worry about that. Now, I will point out that this file does have several interactive elements in it, including a hyperlink, an animation, like this object here, this logo is going to fade-in. And this one over here is going to slide in from the right. And it also has a little slideshow, that is, when you click these buttons down here, you get a different graphic up here. Now I've already added all of those interactive features to this document using the interactive features built into InDesign. I've also gone ahead and downloaded the script from our website, and I installed it. If you need help installing scripts, we talk about that in another movie here in the online training library. So now, to run the script I need the scripts panel, and I can find that by going to the Window menu, the Utilities sub-menu, and then choosing Scripts. I've placed this inside my user folder. There it is; Export FXL HTML. I will open that folder, and you can see the script here. To run the script, I just double-click it. There's a picture of Keith Gilbert, he's the one who wrote this script. In fact, I should mention that Keith also has a bunch of movies here in the online training library that you should check out. Anyway, in this case, I'm going to click Okay, and InDesign asks me where I want to place it. I'll tell it to place it on the desktop, and then InDesign asks me a few items about how I want the images to be exported. I'll click Export, and it's done. The file export is complete. I'll switch to my desktop here, and you can see the files over here. It's the same name as the InDesign file, but dot HTML. And it also created a folder full of resources here. I'll open that up, and you can see what's inside of it. There's my JavaScripts, images, and here's the CSS. But, the proof is in the pudding, so let's go ahead and open this HTML file in my web browser. There it is, did you see the animations? Again, this is all HTML and CSS in JavaScript. My buttons work too. You can see I can click on the buttons down here, and the images change. Now, what's great is that you own this HTML now. You can put it on your own server, put it in Dropbox or whatever else you'd like to do with it. So this is incredible, but there are some problems. For example, if I had objects that bled onto the pasteboard they won't get cropped properly, so they're fully visible in the exported HTML. Also, this script will only work well with single-sided documents. That is, non-facing pages. Now, if you need more power, more control, like if you really want a high-end HTML export, well, this free script may not do it for you. Instead you probably want to check out our plugin called in5, which you can find at ajarproductions.com. in5 gives you a ton more features. For example, it has swipe navigation for mobile devices. It even lets you export your HTML into a web app. So, the free script from Keith is awesome, but it's limited. in5 is amazing and does far more. Okay, that's it. Now you know how to get fully-formatted HTML out of Adobe InDesign.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
161 Keeping page numbers on top of master items3m 55s
-
162 Adding automatic currency symbols in a table cell or before text3m 50s
-
163 Make a pop-up footnote for your ebook3m 48s
-
164 Deleting tabs at the beginning of paragraphs and applying a paragraph style3m 10s
-
165 Five InDesign Presentation tips6m 28s
-
-
-
089 Three great Object Styles for any designer8m 1s
-
090 Choosing alpha channel image transparency2m 25s
-
091 Adding and reading metadata for InDesign files3m 25s
-
092 Adding ALT tags to your images6m 59s
-
093 How to Place & Link a text frame's text but not its formatting7m 4s
-
094 Setting the baseline position of a caption2m 39s
-
-
-
051 Five things that should be in every new file5m 19s
-
052 Forcing EPUB page breaks with invisible objects6m 21s
-
053 Understanding component information6m 39s
-
054 Creating running heads using section markers4m 16s
-
055 Making a font with InDesign using the IndyFont script5m 20s
-
056 Finding where that color is used7m 17s
-
-
-
037 Updating a linked table without losing formatting5m 18s
-
038 Creating electronic sticky notes4m 49s
-
039 Moving master page items to the top layer for visibility2m 48s
-
040 Five guide tricks that will impress your coworkers6m 18s
-
041 Letting InDesign add the diacritics4m 21s
-
042 Using single-cell table cells for custom paragraph formatting6m 2s
-