Becoming a Digital Publishing Master with in5

A free online course to help you design interactive projects with InDesign & without coding

 

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

Estimated time for lesson

Today’s lesson should take approximately 5 minutes.

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

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 using the Easy Export Wizard, choose Longform ebook from the easy options (in5 > Easy Export Wizard...).

easy option with longform selected

To do the same with the full dialog (in5 > Export HTML5 with in5...), 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., https://example.com/subdir will display https://example.com/subdir/index.html, if it exists). The multi-file web option creates an index.html that redirects to the first page.

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 by pasting it as JavaScript in 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#p=2

Pro tip: Even if you don't apply the custom code above, you can link to any page in a document by adding #p= and a page number to the end of your URL.

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.
back to top