Becoming a Digital Publishing Master with in5

Images from apps and sites created with in5.

This course will teach you how to use InDesign and in5 to create beautiful and accessible sites and mobile apps. Learn to become a master of digital publishing from the ground up by using familiar design tools.

For full course details, visit the main course page.

Lesson 17: How to Export One HTML File Per Page

By default, in5 exports all pages in your InDesign document into a single HTML file. This lesson will show you how you can export one HTML file per InDesign page.

Expert Contributors to this lesson

Justin Putney

Justin Putney

Creator of in5

Today's Course Outline

  1. Advantages of Multi-file Output
  2. How to Export One File Per Page
  3. Single File Export with Page Linking

Estimated time for lesson

Today’s lesson should take approximately 5 minutes.

Advantages of Multi-file Output

There are two main reasons why you might want an HTML file generated for each page in the InDesign document.

  1. Each page will have it’s own URL (so you can easily link to an individual page).
  2. Loading only one page at time decreases load time in the browser, especially for long documents.

How to Export One File Per Page

To export one file per InDesign page, open the in5 export dialog (File > Export HTML5 with in5...) and choose Multi-file web as the Output option.

new output option menu

That's all you need to do!

Pro tip: Most web servers will automatically load a file named index.html even when the address only points to the parent directory (e.g., http://example.com/subdir will display http://example.com/subdir/index.html, if it exists). The multi-file web option creates an index.html that redirects to the first page.

How to Export One File Per Page (old way)

The previous version of in5 (version 2) didn't have the Multi-file web option.

If you're using v2, you can follow the steps below.

To export one file per InDesign page, open the in5 export dialog (File > Export HTML5 with in5...) and choose Liquid State Publishing System as the Output option.

old output option menu

That's all you need to do.

Both the Baker Framework (HPUB) and the Liquid State Publishing System Output options will export one HTML file per page.

And, both output formats can be used directly on the web, however, the Liquid State Publishing System option is slightly better because the index.html file redirects to the first page (whereas in Baker the index file contains the page thumbnails).

Pro tip: Most web servers will automatically load a file named index.html even when the address only points to the parent directory (e.g., http://example.com/subdir will display http://example.com/subdir/index.html, if it exists). That's why the Liquid State Publishing System option is slightly better for the web.

Single File Export with Page Linking

One thing that is lost when switching to a multi-file format is the animated transition between pages.

If you want to keep that transition, but also be able to link to individual pages, you can use the Slider Page Format, along with the Web Output, and the following slight modification.

Attach the following code inside of a .js file using the Resources section of the in5 dialog:

sliderSettings = {hashTags:true};

That will add hash tags to the URL as the page changes.

You can then link to specific pages using the hash tag.

For example, the following URL will link to page 2:

index.html#&panel1-2

Take Aways

  • in5 can export 1 big HTML file, or 1 HTML file per page.
  • Exporting 1 file per page can improve load times and allow for "deep linking."
  • With a small customization, you can have both deep linking and animated page transitions.

HTML is super flexible and in5 makes it easy to create