Introduction

Adding a table of contents to your publication provides end users with a hierarchical view of the content (we call it a contents tree view or even TOC). Users click a topic listed in the table of contents, and are taken directly to the information they are looking for.

You can design your table of contents so that the HTML pages contained in your publication are organized by subject or by category. You can organize your subject topics in the table of contents using icons that identify main topics and subtopics. For example, if you use the default icons, HTML Executable provides a "chapter" (or header) icon for main topics and a "page" icon for subtopics. You can of course change the default icons: special icons indicating new or updated pages are available to help end users quickly scan the table of contents for new information.

When an end user opens the table of contents and clicks a topic title (or press Return), the HTML page associated with that title will open.

Managing TOC entries

You can manage your TOC visually using the Tree editor as shown on this snapshot:

Add Header lets you add a new "node chapter" to the contents tree. Chapters generally are not associated with any HTML page (but this is not an obligation: you can of course assign HTML pages to chapters) and contains subtopics. You will be first prompted to enter the name of the chapter.
Add Page will ask you to select one ore more HTML page(s) in the publication's file list, and then the associated page node(s) will be created. The title of the node is directly read in the HTML code (TITLE tag).
To remove an existing node, press Remove.
To export your TOC to an external XML file, click XML, select Export and enter the filename. You can then edit this XML file yourself using your favorite XML editor (or even Notepad), or share it with different projects. Finally, to import the XML file, click on XML, select Import and choose the file to import.
Nodes can be moved; use the Up and Down buttons:. If you want a node to become a child of another node, use the Parent/Child buttons: . The left button will make the selected child node have the same parent as its parent's one. The right button will make the selected node become the child of the previous one.

Use these four buttons to arrange and reorder the nodes like you want.
Finally you can move & exchange node positions thanks to drag/drop operations. Two drag/drop modes are available: right click on the tree editor, and you can choose between "Exchange dropped and target nodes" (the node that is being dragged will take the place of the destination node, and vice-versa) & "Move dropped node to new location" (the node dropped is moved just before the destination node).

Editing TOC entries

To edit a TOC entry, just select the node you wish and its properties will be listed in the node editor (below the tree editor). There are four properties:

HTMLPage defines the HTML page to be displayed when end users click on the entry in the contents tree. You can click on the '...' button to select an existing page in the publication's file list. You can even HEScript calls, external Internet links like http://www.gdgsoft.com. HTMLPage is optional: in the case you leave the field blank, nothing will happen when end users click on it (example: chapter nodes).
ImageIndex defines the icon to be displayed in the contents tree. Click on the '...' button to select an icon visually from the default icon list.
OpenImgIndex defines the icon to be displayed when the entry is selected by the user in the TOC, or when the entry has children that are visible. Generally ImageIndex and OpenImgIndex have the same value, except for chapter nodes.
Title indicates the title of the entry that will appear in the contents tree.

How to add/export custom images to the TOC?

You can import custom images and associate them to the TOC entries. In the node editor, select the ImageIndex property and click on the '...' button to open the Image editor:

Click on "Add custom" and select the bitmap image you want to import. Only 16x16 bitmap files are supported! Bitmaps should also have a specific background color that will be used to define transparency. You can create such bitmaps easily with GConvert.

Your custom bitmap is automatically added to the image list and it will be saved in the HTML Executable project file.

Note that you cannot directly remove custom images once they were added.

Exporting the entire image list to a single bitmap file and importing it later (or another set of icons) is possible thanks to the "Import/Export" function. The single bitmap file looks like this:

Width: number of images x 16 ; height: 16 pixels.

Configuring TOC properties

You can modify the properties for the contents tree in the User Interface tab.

IMPORTANT: be sure that the Visible property (in the user interface tab) is set to TRUE if you want your contents tree to appear in the publication!

Note: you may want to show all topics or show only those topics that beginning users are likely to need. When designing a table of contents, keep the following in mind:

Book icons represent headings. Double-clicking a book icon enables users to see the subentries under that heading. Subentries can be other book icons or page icons.
Page icons represent topics. Double-clicking a page icon enables users to display a topic or run a macro.

Using it for a browse sequence

The Table of Contents can be used to define a browse sequence: more information here.