What is it?
In this tutorial we will learn to add an interactive index for your HTML articles. Indexes are usually used in the first pages of the App and have links to all articles it contains.
What do you need?
It is highly recommended to follow the first tutorial to get clear how HTML articles work.
To follow this tutorial you will need a template prepared for this, you can download the template here:
To edit the template you will need a text editor. You can use the editor of your choice. If you do not have a favorite editor then we recommend some.
How is it configured?
Each row of the interactive index consists of 4 parts:
- The title, which is usually the same as the one of the article to which it leads.
- The description, which is what encourages the user of the App to click on that particular article.
- The background image, which has to be eye-catching but without overshadowing the text. This image may be the size you want but we recommend a size of 700x500px.
- The indesign button will be activated. This button has to be created on the page where you include the interactive index and you must have the “go to page” action that leads to the article page.
The first thing to do is to create InDesign buttons. These buttons should be on the page where you place the index. They can be 1px in size so the user does not inadvertently click them, but they must be created.
Be sure to put a name you remember, you’ll need it later.
You have more info on how to create these buttons here:Interactive Buttons “Go to Page”
Now we go with the index itself:
- The first thing you have to do is unzip the .zip you downloaded.
- Once decompressed. You will see several files and folders. First of all, open the “img” folder.
- Here are the background images of the index, change them to those of your App.
- Now open the file “index.html” with the text editor. When you open it you will see that there is a part of the file with the index rows. You will have to remove or add rows according to the number of articles in your App.
- When you have the number of rows you need, edit the text, image, and add the name of the InDesign button you created earlier.
- Once you have edited all the rows, you will already have your index ready to add it to your App as Webzip. Remember to save your changes.
Add HTML to your App
Before you can add it to your App, you’ll have to compress it again. Select all the files in the folder and compress them into .zip.
Now you can follow the following tutorial to learn how to add WebZips to your App.