Join David Blatner for an in-depth discussion in this video 346 Export to HTML5, part of InDesign Secrets.
- [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.
Updated
12/23/2020Released
8/25/2011New techniques will be added to the collection every other week, so check back early and often. Find more tips and tricks at indesignsecrets.com.Note: Because this is an ongoing series, viewers will not receive a certificate of completion.
Skill Level Intermediate
Duration
Views
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.
Related Courses
-
InDesign CC 2018 Essential Training
with David Blatner6h 30m Beginner -
InDesign: Interactive PDFs
with David Blatner2h 27m Intermediate -
InDesign CC 2018: EPUB
with Anne-Marie Concepción4h 35m Intermediate -
InDesign CC 2019 Essential Training
with David Blatner5h 23m Beginner -
InDesign Quick Start
with David Blatner22m Beginner
-
This Week's Secret
-
Introduction
-
Welcome to InDesign Secrets1m 10s
-
-
December 2020
-
November 2020
-
October 2020
-
September 2020
-
Use one frame, not many4m 37s
-
August 2020
-
July 2020
-
June 2020
-
May 2020
-
Threading filled frames3m 14s
-
Custom page numbering tricks5m 13s
-
November 2012
-
October 2012
-
061 Embedding images7m 44s
-
-
September 2012
-
057 Text wrapping6m 54s
-
-
August 2012
-
July 2012
-
June 2012
-
May 2012
-
April 2012
-
March 2012
-
January 2012
-
April 2020
-
Making speech bubbles3m 32s
-
Working with ligatures5m 9s
-
February 2012
-
December 2011
-
016 Running a script9m 33s
-
November 2011
-
October 2011
-
August 2011
-
September 2011
-
March 2020
-
February 2020
-
Auto-expand acronyms4m 39s
-
-
January 2020
-
December 2019
-
November 2019
-
October 2019
-
409 Copy and paste effects4m 39s
-
-
September 2019
-
408 The master page trick1m 46s
-
August 2019
-
July 2019
-
June 2019
-
May 2019
-
April 2019
-
March 2019
-
February 2019
-
376 Make cast shadows3m 35s
-
-
January 2019
-
November 2018
-
December 2018
-
369 Shared CC Libraries tips5m 15s
-
October 2018
-
360 Find spacing problems4m 50s
-
363 Export all text8m 16s
-
-
August 2018
-
351 Change default fonts5m 51s
-
352 Best default RGB4m 45s
-
-
September 2018
-
July 2018
-
May 2018
-
343 Border spacing fix4m 59s
-
June 2018
-
346 Export to HTML55m 38s
-
April 2018
-
February 2018
-
March 2018
-
January 2018
-
325 Link text frames6m 10s
-
December 2017
-
November 2017
-
September 2017
-
October 2017
-
313 Quick Apply preferences6m 35s
-
August 2017
-
July 2017
-
May 2017
-
290 Work with scripts3m 35s
-
June 2017
-
April 2017
-
286 How to format ellipses5m 39s
-
March 2017
-
281 Share a CC library7m 10s
-
January 2017
-
February 2017
-
December 2016
-
271 Add images to an index4m 39s
-
November 2016
-
September 2016
-
October 2016
-
260 Batch process images7m 33s
-
263 Sync master pages5m 51s
-
-
August 2016
-
July 2016
-
June 2016
-
April 2016
-
May 2016
-
240 Side-by-side tables5m 35s
-
March 2016
-
February 2016
-
228 Setting text at an angle6m 24s
-
December 2015
-
January 2016
-
222 Adding paragraph shading1m 50s
-
October 2015
-
November 2015
-
September 2015
-
July 2015
-
August 2015
-
204 Creating a8m 14s
-
205 Managing scripts5m 38s
-
May 2015
-
189 Placing InDesign files5m 14s
-
-
June 2015
-
193 Printing tracked changes5m 41s
-
-
April 2015
-
186 Making long shadows5m 41s
-
February 2015
-
March 2015
-
January 2015
-
December 2014
-
November 2014
-
October 2014
-
September 2014
-
August 2014
-
July 2014
-
148 Cropping with paste into5m 18s
-
-
June 2014
-
May 2014
-
141 Inserting glyphs6m 42s
-
April 2014
-
March 2014
-
February 2014
-
January 2014
-
December 2013
-
November 2013
-
October 2013
-
September 2013
-
August 2013
-
105 Working with MiniBridge5m 45s
-
106 Customize your QR codes6m 17s
-
July 2013
-
June 2013
-
May 2013
-
April 2013
-
March 2013
-
February 2013
-
December 2012
-
069 Ten uses of the Story Editor11m 39s
-
-
January 2013
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: 346 Export to HTML5