HTML Help Workshop:

A Tutorial for Creating Your First Help System

by Lori Blough
Table of Contents

1 Introduction ...................................................................................................... 1
2 Download the Tutorial Files............................................................................... 3
• Save the Tutorial Files to Desktop ........................................................................... 3
• Remove the Sample TreeProject Files ..................................................................... 5
3 Create a New Project......................................................................................... 6
• Create a Project File................................................................................................. 6
• Import Additional Files .......................................................................................... 12
4 Customize the Project ..................................................................................... 17
• Set the Project Title ............................................................................................... 17
• Set the Default Topic ............................................................................................. 17
• Set up the Search Feature ..................................................................................... 18
5 Create the Table of Contents........................................................................... 19
• Create a Blank Table of Contents .......................................................................... 19
• Add Headings to the Table of Contents ................................................................. 21
• Add Subheadings to the Table of Contents............................................................ 27
• Add Subtopics to the Table of Contents ................................................................ 30
• Customize the Table of Contents ........................................................................... 32
6 Create the Index.............................................................................................. 34
• Create a Blank Index ............................................................................................. 34
• Create Keywords for the Index.............................................................................. 36
7 Create the Help Window.................................................................................. 39
8 Compile the Help File....................................................................................... 45
9 Edit the Completed Help System ..................................................................... 50
10 Further Options ............................................................................................... 51
Tutorial for Creating a Help System Introduction

1 Introduction

HTML Help Workshop (HHW) takes HTML help pages that you have created, including
graphics, and organizes them into a help system with a two-pane window to display your
information (called Topics), similar to the one in Figure 1. It allows you to easily create
an Index and a Table of Contents and also provides a search function. Your help system
can be more or less complex depending on your web design skills (such as JavaScript
or CSS) and on how much you use the customization options of HHW.

Figure 1: HTML Help Workshop Help System Screen

This tutorial will cover the creation of a simple Help project, including importing
necessary HTML and other files, creating a table of contents and index, and the
compiling and editing of a completed help system.

This tutorial is intended for novice

users of HTML Help Workshop and
only provides a general overview of
the steps necessary for creating a
sample help system. Other
information you will need to know
can be found in the help system
embedded in HTML Help Workshop.

1
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Introduction

HHW uses HTML files to create your help system, so if you don’t know HTML you’ll have
to learn it or have someone else create the help files for you. You can write the HTML
files in Notepad or the text editor of your choice, or in a web authoring application like
Dreamweaver or Front Page. If you want to learn HTML you can find more information
from the World Wide Web Consortium (W3C), the creators of the HTML standard, at
http://www.w3.org/ and some great tutorials from W3 Schools at
http://www.w3schools.com. There are many other online tutorials available as well.

You can write your HTML content “on the fly” as you use HHW, or you can write it ahead
of time and just import the files into HHW. For the purposes of this tutorial, some sample
HTML files and graphics files have already been written for you. The instructions for
downloading these files are in Section 2: Download the Tutorial Files. Also, if you haven’t
done so yet, you will need to download HTML Help Workshop from Microsoft’s web site:
http://msdn.microsoft.com/en-us/library/ms670169(VS.85).aspx (scroll to the
bottom of the page to find the download link).

2
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Download the Tutorial Files

2 Download the Tutorial Files

For this tutorial we will be creating a simple help system called TreeProject. Several
HTML files have already been created for you, plus some graphical files, all of which will
eventually make up the pages of the TreeProject Help System. The first thing we need to
do is download the files to your desktop.

Save the Tutorial Files to Desktop

1. Go to the ENC 4265 class website on UCF’s Webcourses

(https://webcourses.ucf.edu).

2. Go to the Class Handouts section.

3. Go to the folder Files for HTML Help Workshop Tutorial.

4. Click on the file called TreeProject.

5. A download window will appear; choose Save File and click OK.

6. A Zip file called TreeProject will appear on your desktop: Right-click on the
Zip file and choose Extract to…

7. In the Extract Window, scroll to the top of the window and choose Desktop, then
click the Extract button.

Choose to
save the
file on the
desktop.

Then click
Extract.

Figure 2: Extract Window for WinZip

3
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Download the Tutorial Files

The files will automatically be extracted

from the Zip file and transferred to your
desktop, creating a folder called
TreeProject and a file called Tree.chm.
Figure 3: TreeProject Folder and Tree File

Delete the file called Tree.chm. This file

will not be used for the tutorial.

8. A window called WinZip – TreeProject.zip may remain open on your screen; you
can close it now.

9. Open the TreeProject folder to verify that the contents extracted properly. If
everything is in place, you can delete the Zip file and close out of your browser.

Figure 4: Contents of TreeProject Folder

4
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Download the Tutorial Files

Remove the Sample TreeProject Files

There are a more few files included in the TreeProject folder which will not be used in
the tutorial. They are only included so that you can view the completed TreeProject Help
System to see what the end product should look like. To avoid confusion, let’s remove
them from our TreeProject folder for now.

1. Create another folder on your desktop called Sample TreeProject.

2. Cut and paste all of the following files from the TreeProject folder to the Sample
TreeProject folder.

a. Tree.chm
b. Tree.hhc
c. Tree.hhk
d. Tree.hhp

If you’d like, double-click on the file Tree.chm. A completed help system for TreeProject
will open so that you can see what your tutorial help system will eventually look like.

5
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

3 Create a New Project

Now that we have some HTML files to build a help system with we can go into HTML
Help Workshop (HHW) and begin our sample project. If you haven’t installed HHW yet,
you will need to download it from Microsoft’s web site and install it now:
http://msdn.microsoft.com/en-us/library/ms670169(VS.85).aspx.

Create a Project File

1. Open HTML Help Workshop.

2. Select File > New.

A small popup window will appear.

Project will be selected by default.

Click OK.

Figure 5: New Project Window

3. The New Project Wizard screen will appear. Just click Next.

Skip the
checkbox!
Just click
Next.

Figure 6: New Project Wizard

6
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

4. The New Project – Destination window will appear. Click Browse.

Click Browse
to find the
TreeProject
folder on your
desktop.

Figure 7: New Project – Destination Window

5. In the window that appears, choose Desktop, and then double-click on the
TreeProject folder. Enter the filename TreeProject.hhp in the File Name field and
click Open.

Make sure you

are in the
TreeProject
folder!

Figure 8: Open the Project in TreeProject

7
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

6. The New Project – Destination window will change to show the path to the
TreeProject.hhp file. Click Next.

Here’s the
TreeProject.hhp
path.

Click Next.

Figure 9: Destination Window with Path

7. The New Project – Existing Files window will appear. For this tutorial we will be
using the HTML files (Topics) that we downloaded in Section 2: Download the
Tutorial Files, so select the check box next to HTML files (.htm) and then click
Next.

Select the HTML

Files checkbox.

Click Next.

Figure 10: New Project – Existing Files Window

8
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

8. The New Project – HTML Files window will appear. Click Add.

Click Add.

Figure 11: New Project – HTML Files Window

9. In the window that appears, navigate to the Content subfolder of TreeProject.

Select all of the .htm files and click Open.

To select all of the .htm files at once:

• Select the first Topic from the list by

clicking it once; then, while holding
the Shift key down, select the last
Topic from the list by clicking it once.
• All of the Topic names should be
highlighted. Click Open.

9
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

10. A list of TreeProject Topics should now appear in the HTML Files window.
Click Next.

Click Next.

Figure 12: HTML Files Window with Files Listed

11. The New Project – Finish window will appear.

Click Finish.

Figure 13: New Project – Finish Window

10
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

12. The HHW screen will open, and all of the TreeProject Topics files you just
imported should be listed under the heading [FILES] on the Projects tab.

Imported .htm
files.

Figure 14: HTML Help Workshop Screne

13. Back on your desktop, open the TreeProject folder and make sure that the
TreeProject.hhp file has successfully saved there.

The project file

must be saved
in this location.

Figure 15: TreeProject Folder

11
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

Import Additional Files

Now that we have imported the Topics, we need to import the other files your project
requires – the graphics, the template, the special scripts, and the style sheet.

1. On the main HHW screen, click the Add/Remove Topic Files button.

A Topic Files window will

appear.

Click Add.

Figure 16: Topic Files Window

2. In the Browse window that appears, navigate to the Common subfolder.

3. Then navigate to the Graphics subfolder. At first the graphics subfolder will
appear to be empty. In the File Name field at the bottom of the window, type *.*
and click Open.

Type *.* and click

Open.

Figure 17: Browse to Graphics Subfolder

12
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

Several graphics files (ending in .gif and .jpg) should now appear in the list.

Figure 18: Graphics Folder with Graphics Files Shown

4. Select the first graphic file from the list by clicking it once; then, while holding the
Shift key down, select the last graphic file from the list by clicking it once. All of
the graphic files should now be highlighted. Click Open.

5. Back in the Topic Files window, make sure that the graphics files appear at the
end of the list.

Click Add once again.

Figure 19: Topic Files Window with Graphic Files

13
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

6. In the Browse window that appears, navigate to the Common subfolder again.
Only the Graphics folder and the Deciduous on Mouseover.htm file should
appear. In the File Name field at the bottom of the window, type *.* and click
Open.

Type *.* and click

Open.

Figure 20: Browse to Common Subfolder

Two new files should now appear in the list.

Figure 21: Common Subfolder with other Files Shown

14
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

7. Select the first file from the list by clicking on it once; then, while holding the Shift
key down, select the last file from the list by clicking it once. All of the files should
now be highlighted. Click Open.

Back in the Topic Files window,

the new files should now appear
at the end of the Topic Files list.

Figure 22: Topic Files Window with Graphic Files

8. At the bottom of the Topic Files window, click OK to return to HHW. All of the files
you have imported so far should now be shown in the list under [FILES].

15
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create a New Project

Figure 23: Updated HHW Screen

9. At the top of the HHW screen, click File > Save Project.

16
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Customize the Project

4 Customize the Project

Now that all the tutorial files have been imported it’s time to customize your HTML Help
Workshop (HHW) project a bit. The following tutorials cover changing a few important
project options for the project such as setting the title and default topic for the project as
well as setting up the search feature.

Set the Project Title

1. Click on the Change Project Options button or double-click on [OPTIONS]

to open the Options window.

2. In the Options Window, choose the General Tab.

General tab.

Enter the title

Title field.

Set the Default

Topic here.

Figure 24: Topic Files Window with Graphic Files

3. Enter the title Tree Planting in the Title field.

Set the Default Topic

Setting the Default Topic will tell HHW which file to use whenever the Help File is first
opened.

1. Still on the General Tab, click on the drop-down arrow next to the Default File.

2. From the drop-down list, choose the file Content/Main.htm.

17
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Customize the Project

Set up the Search Feature

1. Still in the Options Window, now choose the Compiler Tab.

Compiler tab.

Select this
checkbox.

Figure 25: Options Window Compiler Tab

2. From the list of checkboxes, select the “Compile full-text search information,” and
click OK.

3. You will be returned to the main HHW screen. The [OPTIONS] section should
now show the changes you just made.

4. At the top of the HHW screen, click File>Save Project.

18
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

5 Create the Table of Contents

You can use HTML Help Workshop (HHW) to set up a Table of Contents for your help
system. Like any table of contents, we need to organize the titles, or headings, for the
various pages in the order they should go in. Here we will create the Table of Contents,
set up the headings, and associate the table with the help system main window.

Create a Blank Table of Contents

First we’ll create a blank Table of Contents and associate it with our main window. On
the HHW screen, so far we’ve only been working in the Project tab. Now let’s take a
look at the second tab, the Contents tab.

1. On the main HHW screen, select the Contents tab.

Contents
tab.

Figure 26: HTML Help Workshop Screen

19
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

A popup window will appear, indicating

that no Table of Contents has been
associated with this project yet.

Choose Create a new contents file

and click OK.

Figure 27: Popup Window

In your own help systems, if you

have already created a table of
contents and saved it in the .hhc
format, you can import the existing
table of contents into your new HHW
project. Check HHW’s Help for more
information.

2. In the Save As window that appears, navigate to the TreeProject folder, then type
Tree_TOC.hhc in the File Name field. Be certain that you are in the TreeProject
folder!

3. Click Save. The Contents tab will now display on the HHW screen, but it will be
blank.

Blank Contents
tab.

Figure 28: HHW Contents Tab

20
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

4. Click the Contents Properties button.

The Table of Contents Properties

window will appear.

In the Default Window field, type Main,

and click OK. Do not enter any information
into the Default Frame field.

Figure 29: TOC Properties Window

5. At the top of the HHW screen, click File > Save Project.

Add Headings to the Table of Contents

Now let’s set up the headings for the Table of Contents. We have to enter each
heading, and then tell HHW where to look for the page.

1. Still on the Contents tab, click the Insert a Heading button.

The Table of Contents Entry

window will appear.

By default you will see the

General tab. Type Introduction
in the Entry Title field and click
Add.

Figure 30: TOC Entry Window

21
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

The Path or URL window will

appear.

Near the bottom of the Path or

URL window, click Browse.

Figure 31: Path or URL Window

2. In the Browse window that appears, navigate to the Content subfolder.

Figure 32: Browse Window – Content Subfolder

3. Select the Main.htm file by clicking it once, and then click Open. The Browse
window will close and return you to the Path or URL window.

22
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

4. Back on the Path or URL window, click OK.

5. Then click OK again on the Table of Contents Entry window. An Introduction

folder should now appear on the Contents tab.

Figure 33: Contents Tab with New Heading

Now let’s do the next one.

1. Click the Insert a Heading button, or you can also just right-click inside the
Contents tab, anywhere underneath the Introduction folder.

This time a popup window will

appear to ask if you want to
insert the new entry at the
beginning of the Table of
Contents.
Figure 34: Popup Window
Select No.

23
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

The Table of Contents Entry

window will appear.

By default you will see the

General tab. Type Choosing a
Tree in the Entry Title field and
click Add.

Figure 35: TOC Entry Window

The Path or URL window will

appear.

Near the bottom of the Path or

URL window, click Browse.

Figure 36: Path or URL Window

2. In the Browse window that appears, navigate to the Content subfolder.

24
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

Figure 37: Browse Window

3. This time, select the Choose.htm file by clicking it once, and then click Open. The
Browse window will close and return you to the Path or URL window.

4. Back on the Path or URL window, click OK.

5. Then click OK again on the Table of Contents Entry window. A Choosing a

Tree folder should now appear on the Contents tab.

Figure 38: Contents Tab with New Heading

25
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

6. The TreeProject Help System has three more headings. Try adding them to the
table of contents using the above procedure. The remaining headings and the
associated filenames are:

Heading Title Filename

Preparing to Plant the Tree Prepare.htm
Planting the Tree Plant.htm
Caring for the New Tree Care.htm

When you are finished, the Table of Contents should look like this:

The Delete
button – just
in case!

Figure 39: TOC with Headings

7. At the top of the HHW screen, click File > Save Project.

If you make a mistake or would like to

start over, a delete button is available to
clear away a bad entry. Click on the
entry you wish to delete and then click
the delete button (it looks like an ‘X’) to
remove it from the Table of Contents.

26
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

Add Subheadings to the Table of Contents

Sometimes headings also have subheadings, or topics, associated with them. We

need to add the TreeProject topics to the Table of Contents as well.

1. Select the Choosing a Tree heading by clicking on it once.

2. Click the Insert a Page button or right-click on the Choosing a Tree

heading and select Insert Topic.

A quick way to add a header or topic

is to use the mouse shortcuts. Use
your mouse to right-click on Choosing
a Tree and then choose Insert Topic
from the jump menu.

Figure 40: Insert Topic Jump Menu

The Table of Contents Entry

window will appear.

By default you will see the

General tab. Type Identifying
Your Planting Zone in the Entry
Title field and click Add.

Figure 41: TOC Entry Window

27
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

The Path or URL window will

appear.

Near the bottom of the Path or

URL window, click Browse.

Figure 42: Path or URL Window

3. In the Browse window that appears, navigate to the Content subfolder.

4. This time, select the Ch_Zones.htm file by clicking it once, and then click Open.

Figure 43: Browse Window

The Browse window will close and return you to the Path or URL window.

5. Back on the Path or URL window, click OK.

28
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

6. Then click OK again on the Table of Contents Entry window. The Identifying
Your Planting Zone topic should now appear as a subheading under Choosing
a Tree.

Figure 44: TOC with Subheading

7. The TreeProject system has a few more topics under some of the headings. Try
adding the remaining topics under the appropriate headings on your own using
this procedure. The headings, topic titles, and associated HTML files are:

Heading Topic Title Filename

Choosing a Tree Selecting a Site Ch_site.htm
Choosing Appropriate Species Ch_species.htm
Oak Oak.htm
Santa Cruz Redwood SantaCruz.htm
Preparing to Plant the Preparing the Site Prep_site.htm
Tree
Preparing the Tree Prep_tree.htm

29
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

When you are finished, the Table of Contents should look like this:

The Move
buttons.

Figure 45: TOC with Headings and Topics

8. At the top of the HHW screen, click File > Save Project.

If the topics are in the wrong order, you

can easily adjust them. Select the topic
you want to move and click the Move
Selection Up or Move Selection Down
arrows to move the topic up or down
the list. Do this with each topic until
they are in the correct order.

Add Subtopics to the Table of Contents

You might have noticed that the topics of Oak and Santa Cruz shouldn’t really be
subheadings under Choosing a Tree. They are species of trees, and so should be
subtopics underneath Choosing Appropriate Species. Let’s move them to the correct
location.

1. Right-click on the entry for Oak and choose Move Right from the shortcut menu,

or click on the Move Selection Right button.

30
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

A popup window will appear to verify your choice.

Figure 46: Popup Window

Choose Yes. Both the Oak and the Santa Cruz entries will move to the right and
become subtopics of Choosing Appropriate Species.

2. When you are finished, the Table of Contents should look like this:

Figure 47: Completed Table of Contents

3. At the top of the HHW screen, click File > Save Project.

31
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

Customize the Table of Contents

Finally, we can customize our Table of Contents a little by changing the icons that
appear next to the headings.

1. Select the Introduction heading by clicking on it once.

2. Click the Edit Selection button.

The Table of Contents Entry

window will appear.

Go to the Advanced tab.

Figure 48: TOC Entry Window

The screen will change to the

Advanced tab.

Near the bottom of the tab

window, find the Image Index
field. Click on the up arrow to
change the selection box from
Auto to 1.

The image icon should change

from a standard folder to a book.

Figure 49: TOC Entry Window – Advanced Tab

32
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Table of Contents

There are 42 image choices to choose

from. Cycle through them if you’d like
to see some of the choices. For tutorial
purposes, we’ll just stick with the book
for now.

3. Click OK.

4. Repeat this procedure for each major heading.

5. When you are finished, the Table of Contents should look like this:

Figure 50: Customized Table of Contents

6. At the top of the HHW screen, select File > Save Project.

33
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Index

6 Create the Index

You can use HTML Help Workshop (HHW) to set up an Index for the TreeProject Help
System. Like any index, we need to create index entries, or keywords. Here we will
create the index, set up the keywords, and associate the index with the help system
main window.

Create a Blank Index

First we’ll create a blank index and associate it with our main window.

1. On the HHW screen, select the Index Tab (screen).

Index tab.

Figure 51: HTML Help Workshop Screen

34
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Index

A popup window will appear, indicating

that no index has been associated with
this project yet.

Choose Create a new index file and

click OK.

Figure 52: Popup Window

2. In the Save As window that appears, navigate to the main TreeProject folder, and
then type Tree_Index.hhk in the File Name field. Be certain that you are in the
TreeProject folder!

3. Click Save. The Index tab will now display on the HHW screen, but it will be
blank.
4. Click the Index Properties button.

The Index Properties window will appear.

In the Default Window field, type Main,

and click OK. Do not enter any information
into the Default Frame field.

Figure 53: Index Properties Window

5. At the top of the HHW screen, select File > Save Project.

35
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Index

Create Keywords for the Index

Now let’s set up the keywords for the Index. We have to enter each keyword and then
tell HHW where to look for that page. Large help systems may require hundreds of
keywords in the index, but for the purposes of the tutorial we will only create a few
entries for practice. When you create your first real index, it will need to be much more
comprehensive!
1. Click the Insert Keyword button.

The Index Entry window will

appear.

By default you will see the

General tab. Type Pine in the
Keyword field and click Add.

Figure 54: Index Entry Window

The Path or URL window will

appear.

Near the bottom of the Path or

URL window, click Browse.

Figure 55: Path or URL Window

36
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Index

2. In the Browse window that appears, navigate to the Content subfolder.

Figure 56: Browse Window – Content Subfolder

6. Select the SantaCruz.htm file by clicking it once, and then click Open. The
Browse window will close and return you to the Path or URL window.

7. Back on the Path or URL window, click OK.

8. Then click OK again on the Table of Contents Entry window. An entry for the
keyword Pine should now appear on the Index tab.

Figure 57: Index Tab with New Keyword

37
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Index

3. The TreeProject Help System has only four more keywords. Try adding them to
the index using the above procedure. The remaining keywords and their
associated files are:

Keyword Filename
Redwood SantaCruz.htm
Evergreen SantaCruz.htm
Deciduous Oak.htm
Soil ** Ch_site.htm and
Prep_site.htm
** You can associate multiple filenames with a single keyword by
repeatedly choosing the Add button on the Index Entry window.

For the second keyword entry, a popup

window will appear, asking if you want
to insert the new entry at the beginning
of the Table of Contents.

Figure 58: Popup Window Click No.

4. When you have finished adding keywords, click the Sort Keywords
Alphabetically button. HHW will automatically alphabetize the Index.

5. At the top of the HHW screen, click File > Save Project.

38
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Help Window

7 Create the Help Window

The main portion of your help system is the Help Window. Your help Topics, Table of
Contents, and Index all appear in the panels of your Help Window. You can change the
appearance of your Help Window by defining the default settings in HTML Help
Workshop (HHW). You can change the size and initial location of your Help Window, add
a Title Bar, and make some decisions about how others will use your Help Window.

1. On the HHW screen, go to the Project tab.

Project
tab.

Figure 59: HTML Help Workshop Screen

39
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Help Window

2. Click on the Add/Modify Windows Definitions button.

Since TreeProject doesn’t have a

window associated with it yet, the Add
a New Window Type window will
appear.

Type Main in the text field, and click

OK.
Figure 60: Add a New Window Type Window

The Window Types window will

appear, and show the General
tab by default.

The Window Type field will

default to Main and the Title Bar
Text field will be blank. Type
Tree Planting in the Title Bar
Text field.

Figure 61: Window Types Window

3. Next, click on the Navigation Pane tab.

40
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Help Window

The Navigation Pane Window Type window will appear.

The Window Type field should

still say Main.

The checkbox next to “Window

with navigation pane, topic pane,
and button” should be checked.

Set the Navigation Pane width

field to 200. You may click the
arrows or just enter the number
200 into the box.

Figure 62: Window Types Window – Navigation Tab

Under the Properties section,

make sure that the checkbox
next to Auto sync is selected.

This option causes the

navigation pane (where the
Index appears) to automatically
change to match up with
whatever appears in the topic
pane.

Figure 63: Navigation Pane Properties Section

41
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Help Window

Under the Tabs section, click on

the drop-down arrow to change
the Default Tab to Contents.

This causes the Table of

Contents to appear as the
default tab when the help system
first opens.

Figure 64: Navigation Pane Tabs Section

4. Next, click on the Position tab. The Position Window Type Window will appear.

Under the Window Size and

Position section, click the
checkbox next to “Save user
defined window position after
first use” to allow your users to
reset the window size and
position to their liking.

Figure 65: Windows Type Window - Position Tab

42
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Help Window

However, you should set the size and position of your Help Window to a default setting
that will be applied when anyone opens the help system for the first time. There are two
ways you can do this; try both options to see how they work.

Option A: Set
Left and Top,
Width and
Height in each
field.

Option B: Click
Autosizer and
set the window
size by hand.

Figure 66: Windows Type Window - Position Tab

a. Enter the left/top and width/height figures of your choice in the given fields.
(It is recommended to set left/top at 25/25 and width/height to 550/400.)

b. Click Autosizer, then click-drag the window to your desired position on the
screen, then resize the window to a comfortable size by click-dragging
the bottom right corner.

5. Click OK.

43
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Create the Help Window

6. The HHW screen should now reflect the changes you’ve made, including adding
a new section called [WINDOWS].

Updated HHW
information.

Figure 67: Updated HTML Help Workshop Screen

7. At the top of the HHW screen, click File > Save Project.

44
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Compile the Help File

8 Compile the Help File

Compiling the project is what finally creates the help system. HTML Help Workshop
(HHW) takes all of the files, graphics, and the index and table of contents information
and compresses them into one .chm file, or compiled html file. HHW will save the
TreeProject.chm file in your TreeProject folder, where you can then open the TreeProject
Help System for use. Before compiling, however, you should make sure that all of your
work has been saved properly so that the project compiles completely. At the top of the
HHW screen, select File > Save Project.

Some versions of HHW have a

known issue, and don’t always save
all of your files. Be sure to take the
extra time to save your project one
more time before you compile!

Now, let’s make sure that our project file, table of contents, and index are all located
where we expect them to be.

1. On your desktop, open the TreeProject folder. Make sure that all of the project
files are located in the top-level directory of the folder, and not inside either the
Common subfolder or the Content subfolder.

All project files

should be
located in the
top level of
TreeProject.

Figure 68: Tre Project Folder on Desktop

If the TOC or Index files are not in the correct location, cut and paste to move the
file(s) to the top-level directory.

45
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Compile the Help File

2. Back on the main HHW screen, select the Project tab.

3. Click the Add/Modify Windows Definitions button.

The Window Types window will

appear, and show the General tab
by default.

Figure 69: Window Types Window

4. Click on the Files tab. The Files Tab Window Type window will appear

Verify that Tree_TOC.hhc is

selected as the TOC file and that
Tree_Index.hhk is selected as the
Index file. Also verify that
Content\Main.htm is selected as the
Default file.

NOTE: If any of the files are not

selected correctly, or if they were in
the incorrect folder in Step 1,
change them to match this screen.

Click OK.

Figure 70: Window Types Window Files Tab

46
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Compile the Help File

5. Click on the Change Project Options button. The Options window will
appear. Then click on the Files tab.

Verify that the Compiled File path ends

in:
HelpWorkshop\TreeProject\TreeProject.chm.

Also verify that Tree_TOC.hhc is

selected as the Contents file and that
Tree_Index.hhk is selected as the Index
file.

NOTE: If any of the files are not selected

correctly, or if they were in the incorrect
folder in Step 1, change them to match
this screen.

Click OK.

Figure 71: Window Types Window Files Tab

6. At the top of the HHW screen, click File > Save Project.

7. Still on the Project tab, look for the row of buttons across the top of the screen;
click the Compile HTML File button.

The Create a Compiled File

window will appear. Select the
checkbox for “Save all files before
compiling.”

Click Compile. A progress window

will appear briefly while the file
compiles. Information about the
compiled help file will display in the
right-hand window pane.
Figure 72: Create a Compiled File Window

47
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Compile the Help File

8. When compiling is complete, click the View Compiled File button at the top
of the HHW screen.

The View Compiled File window

will appear.

Click Browse.

Figure 73: View Compiled File Window

A Browse window will appear. Navigate to the TreeProject folder.

Figure 74: TreeProject Folder

9. Select the TreeProject.chm file by clicking on it once, and then click Open.

48
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Compile the Help File

You will be returned to the View

Compiled File window, and the
path to the TreeProject compiled file
will be listed in the Compiled File
path.

Click View.

Figure 75: View Compiled File Window

A browser window will open to display the brand new HTML help system.

Figure 76: TreeProject Help System

Take a look through the help system and see how it works! To view your completed help
system at any time, just open the TreeProject.chm file from HHW or from the TreeProject
Folder.

49
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Edit the Completed Help System

9 Edit the Completed Help System

Now that you’ve had a chance to look through your HTML help system, are there any
changes you want to make? Even though you have compiled the project, you can go
back and edit your work. The project file is saved in your TreeProject Folder with the
filename TreeProject.hhp. From HHW go to File > Open, browse for the TreeProject.hhp
file, then click Open to re-open your project and make any changes you desire.

For instance:

• Do you feel that the 550 x 400 help window is too small? If you don’t remember
how to change the size of the help window, go to Step 9 of the Create the Help
Window procedure.

• Would you like different icons for your table of contents? If you don’t remember
how to change the TOC icons, go to the Customize the Table of Contents
procedure.

• Did you want to add a few more keywords to the index? If you don’t remember
how to enter keywords into the index, go to the Add Keywords to the Index
procedure.

When you have made all the adjustments to your satisfaction, save the project and click
the Compile HTML File button again. The project will recompile, then you can view it
again to see how it looks with your changes.

50
Life preserver icon courtesty of DryIcons.com.
Tutorial for Creating a Help System Further Options

10 Further Options
There are many more options and customizations available in HTML Help Workshop
(HHW) which are not covered in this tutorial. For instance you can add hyperlinks to
send users easily from one page to another with related content. You can customize the
search feature by adding a search stop list to prevent the search feature from including
simple words like “the” or “an.” You can embed your help system to an existing
application or program so that the help is easily available to users.

To find out more, be sure to look through the help system available in HTML Help
Workshop by clicking Help at the top of the HHW screen. Also, there are numerous
guides and tutorials to be found on the web. In particular, a popular one is Creating
HTML Help with Microsoft’s HHW by Char James-Tanney, which can be found on the
class web site, but can also be found in several places on the Internet.

51
Life preserver icon courtesty of DryIcons.com.