Sarah Gray Robo Help Tutorials

Sarah Gray’s RoboHELP for HTML Tutorials
RoboHELP for HTML Help Tutorials
By Sarah Gray
CONTENTS:
Page 2 Background & Explanation of RoboHELP for HTML Help Interface
Page 4 Tutorial 1: Creating and Customizing a New Project in RoboHELP
Page 7 Tutorial 2: Adding Graphics to the Project
Page 10 Tutorial 3: How to Create a Table of Contents
Page 13 Tutorial 4: Creating Splash Screens and Popup Hyperlinks
Page 16 Tutorial 5: Adding Dynamic HTML (Special Effects)
Page 18 Tutorial 6: Creating Forms and Surveys
Page 22 Resources
1
RoboHELP for HTML Help Tutorials
By Sarah Gray
Background
RoboHELP is a program designed to assist the user in writing help files,
including Windows help files (WinHELP) or HTML help files (HTML Help). The
latest release of the software, RoboHELP Office 2000, includes both RoboHelp
for WinHELP and RoboHELP for HTML Help. The type of help file the user is
writing determines what RoboHELP program should be used.
It is recommended that the user of these tutorials have at least a trial

version of RoboHELP to better comprehend the tasks. A 15-day trial version of
RoboHELP Office 2000 is available at eHelp Corp./Blue Sky Software’s (makers
of RoboHELP) website: www.ehelp.com. Many user-manuals and computer help
books (such as Sams Teach Yourself RoboHELP 2000 for HTML Help in 24
Hours) include a CD-ROM with a time-locked version of RoboHELP Office 2000.
NOTE: These tutorials focus on

RoboHELP for HTML Help and are
written for the Windows platform.
The RoboHELP for HTML Help Interface

Figure 1. Identifying the Interface Features.
Menu Bar
Project
Toolbar
Formatting
Toolbar
Left Pane Right Pane
Left Right
Pane Pane
Tabs Tabs
2
Explanation of the RoboHELP Interface

Don’t be confused by the many tabs and icons (Figure 1). The Left Pane
Tabs and Right Pane Tabs running two inches above the bottom of the screen
are your key components to RoboHELP. The left “pane,” or the left half of the
screen, simply shows your project information and will hold information on your
project, indicated by the five tabbed icons at the bottom of this pane,
representing (left to right) Project, Table of Contents, Index, Glossary and Tools.
The right “pane,” or the right half of the screen, is where you will write your
text and format your document. The four tabs at the bottom of this pane display
the text, images and special features in a different format. The WYSIWYG (What
You See Is What You Get) tab should be selected for most of your work. The
True Code tab displays your text and formatting in HTML code, the Link View tab
shows any hyperlinks in your project, and the Topics tab lists all the different
topics in your project. At the start of a new project, these tabs will bring up mostly
empty folders, as you only have one topic and no text or hyperlinks.
The Menu Bar is used for inserting objects and creating special effects,
among other things. The Project Toolbar displays the Generate Primary Target
icon (compiles your project) and Run Primary Target icon (shows what it will look
like to the user), among others. The Formatting Toolbar is similar to those in
other programs, including shortcut icons to formatting text and creating links.
Because many of the same functions from the Menu Bar, the Project
Toolbar and the Formatting Toolbar are found in basic word processing
programs, you should recognize many of these from the toolbars in Microsoft
Word and other programs.
3
Tutorial 1: Creating and Customizing a New Project in

RoboHELP for HTML Help.
In this tutorial, you will learn how to start a new project using RoboHELP for
HTML Help and create your own styles to format the project.
Creating a New Project

1. Double-click the RoboHELP HTML icon from the RoboHELP Office 2000.
2. Choose “Create a New Help Project” and click OK.
3. When prompted for the type of new project, select HTML Help and click OK.
Entering Project Information

1. Enter the title “MyRoboHelpProject” in the project title window (Figure 2).
2. Enter “MyProject” as the file name of the project.
3. Be sure the location for the project is defaulted to the C drive, in the
RoboHELP Office program files (Figure 2). The title of the first project is
defaulted to First Topic.
4. Click Finish.
Figure 2. Entering Project Information.
4
Creating and Designing Cascading Style Sheets
Creating a New Style Sheet

1. To create a style sheet, select Edit > Properties.
2. In Properties, choose the Appearance tab and click New.
3. The Save As window will open, and then enter the name “MyStyleSheet”.
4. Click Save and the Edit Style Sheet window will open (Figure 3).
Figure 3. The Edit Style Sheet Window.
Designing a Style Sheet

1. Select Style Type as Document
2. Select Style as Body > Click Edit
3. Click the Font tab, then choose the Font Family as Comic Sans MS
• Choose Size as 12 pt
• Choose Color as Navy
4. Click the Paragraph tab

• Choose the Indent First Line as 14 pt
5. Click the Background tab

• Click the Background Color selector box and highlight Aqua
6. Click the List tab

• Select the Type as Square
• Click OK
5
7. Select Style Type as Paragraph Notes About Cascading Style

Sheets:
8. Select Style as Heading 1 > Click Edit They sound much more
complicated than they really
9. Select the Font Family as Tahoma are. All these style sheets do is
• Click the Underline box in Style make it possible to avoid
• Select the Color as Purple formatting your document each
time, if you are going to be
10. Click OK using the same formats
throughout your project. Style
11. Click OK at the Edit Styles Sheet box, sheets can provide you with as
and again at the Topic Properties window. much or as little special
formatting as you desire. They
are only there to make your life
easier and create less detail
.
work for you as you create your
Your project screen should now reflect your
project.
new style sheet and look similar to the
It takes some time to set
interface in Figure 4.
up the style sheets in the
beginning, but basically you’re
doing the formatting only once
instead of each time you want
something formatted a specific
way.
Figure 4. RoboHELP Interface With MyStyleSheet Applied
6
Tutorial 2: Adding Graphics to the Project

In this tutorial, you will learn how to use graphics in your project using
RoboHELP.
Finding a Graphic
1. Click the Tools tab, which is the toolbox icon located near the bottom of the left
pane.
2. Double-click the Graphics Locator icon
3. Under Search For, File, select *.gif, *.jpg, *.bmp… (it should be the default)
4. Click Browse. Select a folder on your computer where you know a GIF or JPG
graphic is.
5. Click Destination only if the file name is not defaulted to:

C:\ProgramFiles/RoboHELPOffice/RoboHTML/MyProject. If needed, open
files/folders until you get to that location. Click OK.
6. Click the Search button and select a graphic name that appears in the left-
hand window.
7. Click Copy File. The image should be copied to the Images in Project folder.
8. Click Exit.
7
Figure 5. Using the Graphics Locator
Inserting a Graphic
1. In the right pane of the WYSIWYG window where your text is, place the cursor
flush left after “First topic in project ‘MyRoboHelpProject’”.
2. Select Insert > Image
3. Highlight the image from the Images in Project (All Files Folder) list that you
want to place. Resize the image if desired.
4. Click OK. The image should appear (Figure 6).
Figure 6. A Graphic Inserted Into the Project.
Repositioning the Graphic

1. Click on the image. A red border will appear around it.
2. Select Edit > Image
3. Select the Align selector box and highlight Right.
4. Click OK. The image should appear on the right side of the project (Figure 7).
8
Figure 7. The Repositioned Graphic.
Create a “Hotspot” Hyperlink to an Image

1. Click on the image so it has the red outline around it.
2. Select Insert > Hyperlink
3. In the Link To box, select E-mail
4. Enter your e-mail address after mailto: (Figure 8)
5. Click OK
Figure 8. Entering Your E-Mail Address As a Graphic Hyperlink
9
Tutorial 3: How to Create a Table of Contents

In this tutorial, you will learn how to create a Table of Contents for your project
using RoboHELP, along with adding and deleting books and pages.
Note About Books and Pages: A Book is similar to a heading or sub-

heading; a Page is similar to a topic.
Creating a Table of Contents With Auto Create TOC

1. Click the TOC tab, which is the book icon near the bottom of the left pane.
2. Select Tools > Auto Create TOC (Figure 9)
3. Click OK
Figure 9. Using the Auto Create TOC.
Adding Books to the TOC

1. Click the New Book icon on the upper toolbar.
2. In the Book Properties dialog box, enter the title “My First Book”. The Book
With No Links book type should be selected.
3. Click OK
10
Create a Second Book With a Link:

1. Click the New Book icon.
2. Enter the title “My Second Book”. Select Link to Single Topic as the book type.
3. Click the Destination down arrow and highlight E-Mail.
4. Select your e-mail address from the topic box.
5. Click OK
Create a New Page:

1. Click the New Page icon on the toolbar (next to the New Book icon).
2. Enter the title “My First Page”.
3. Select First_Topic.htm as the link under the topic box (Figure 10).
4. Click OK
Figure 10. Page Properties in the TOC.
Deleting a Book or Page

1. Click on My First Page in the open TOC window in the left pane.
2. Hit the Delete key on your keyboard.
Note About Rearranging Books and Pages: You can change the order of
the books and pages by simply clicking on it in the TOC Composer screen
and dragging it up or down. It will automatically be repositioned when you 11
Produce a Detailed TOC Report
1. Select Tools > Reports > Table of Contents
2. Click the Reports selector box and select Detailed (Figure 11).
3. Click Close to return to the main screen.
Figure 11. Detailed TOC Report.
12
Tutorial 4. Creating Splash Screens and Popup

Hyperlinks
In this tutorial, you will learn how to create a splash screen for your HTML project
as well as a popup hyperlink.
Note About Splash Screens: You cannot use an animated GIF for a
splash screen—only the first image in the sequence will display.
Creating a Splash Screen

1. Click the Toolbox icon near the bottom of the left pane.
2. Double-click the Graphics Locator icon and copy a GIF graphic to your
RoboHELP project folder. (See Tutorial 2: Adding Graphics to the Project)
3. Position the cursor somewhere in the right pane where you want the splash
screen to appear.
4. Select Insert > HTML Help > Splash Screen
5. Click the Open File icon in the Splash Screen Wizard. This opens the Graphics
Locator.
6. Set the Path the same as the Destination:

C:\ProgramFiles/RoboHELPOffice/RoboHTML/MyProject
7. Select the image you want for your splash screen.
8. Set the Duration of

splash display
(seconds) to 3.
9. Click Finish. A small

red-outlined box with
“Splash” in it should
appear where you
wanted the splash
screen (Figure 13).
10. To view your splash

screen or see what your
webpage will look like:
Figure 12. Splash Screen Wizard Window.
13
• Click the Generate Primary Target icon. It’s the yellow question mark icon
located to the right of the save icon.
• Click the Run Primary Target icon (the book with the question mark,
located to the right of the Generate Primary Target icon). This will show
your project as the user would see it (Figure 14).
Figure 13. The Splash Screen Icon Inserted In the Project.
Figure 14. The Splash Screen Viewed in the Run Primary Target Window.
14
Creating a Popup Hyperlink

1. Position the cursor in the right pane where you want the popup to appear.
2. Select Insert > Text-Only Popup
3. In the yellow box, type: “This is my first popup. It is easier than I thought it
would be.” Hit the Enter key on your keyboard.
4. A hyperlink will appear with the words: “Popup Jump”. Highlight these words
and change them to “My Popup” (Figure 15).
5. Place the cursor over

the hyperlink and right-
click the mouse. Select
Insert/Edit Hyperlink.
6. Change the Font to

Courier.
7. Change the Text

Color to Purple.
8. Change the
Background Color to
Lime.
9. Click OK
Figure 15. Creating My Popup Hyperlink
10. To view the popup, click the Generate Primary Target icon (see #10 under
Creating a Splash Screen), then click the Run Primary Target icon (Figure 16).
Figure 16. The Popup Hyperlink in the Run Primary Target Window.
15
Tutorial 5: Adding Dynamic HTML (Special Effects)

In this tutorial, you will learn three of many special effects that can be applied to
your project using RoboHELP.
Figure 17. Creating the Fly-In Effect.
Creating a “Fly-In”
Effect
1. Place the cursor
below the “Splash” icon
in your document. Type
“Fly In”.
2. Select/highlight the
text.
3. Select DHTML > Fly

In > From Top Right
4. The text should now

have a dotted line
around it (Figure 17).
Select the Generate
Primary Target icon (see
Tutorial 4, #10) and then the Run Primary Target icon to view the effect. The
words “Fly In” should move from the upper right position to the bottom left.
Creating a “Spiral” Effect

1. Type “Spiral” below
“Fly In”.
2. Select/highlight the
text.
3. Select DHTML > Spiral
4. The text should have a

dotted line around it.
Select the Generate
Primary Target icon (see
Tutorial 4, Creating a
Splash Screen, #10) and
then the Run Primary
Target icon to view.
“Spiral” should move into Figure 18. Creating the Spiral Effect.
position in a circular motion.
16
Creating a “Fade-In” Effect

1. Copy a GIF image to your project folder if necessary. (See Tutorial 2: Adding
Graphics to the Project).
2. Place the cursor to the right of the Splash icon. Click Insert > Image, and
select the GIF you want.
Note About Placing Graphics: If you are unable to place the image on
the right side of the pane, after it is inserted, place the cursor over the
image, right click and select Insert/Edit Image. Click the Align arrow and
select Right. The image should reposition to the right side.
3. When the image is placed, highlight it with the mouse.
4. Select DHTML > Fade In
5. The graphic should have a dotted line around it. Select the Generate Primary
Target icon (see Tutorial 4, Creating a Splash Screen, #10) and then the Run
Primary Target icon to view the Fade-In effect.
Figure 19. Creating the Fade-In Effect.
Note About DHTML Effects: If the dotted box extends down when you
try to type on the next line, which includes it in the dotted box, backspace
out the text until the cursor brings the box back up. Then use the down
arrow to move the cursor out of the box.
17
Tutorial 6: Creating Forms and Surveys

In this tutorial, you will learn how to create an online form and survey for your
project using RoboHELP.
Creating a Form
1. Click File > New > New Topic
2. Under the General tab, enter the title as “Survey”. The File Name will
automatically read Survey.htm. Click OK.
3. Highlight the pre-written phrase “Type topic text here” and delete it.
4. Select Insert > Form
5. Right-click in the form (dotted box) and select Form Properties.
6. In the Action field, enter: “mailto:[enter your e-mail address]”
7. In the Method field, enter: “POST”
8. In the Encoding Type field, enter: “text/plain”, and click OK.
Creating a Survey
Inserting Radio Buttons

1. Position your cursor in the form and type: “Please complete this form and click
the Submit button at the bottom. All information will be e-mailed to [enter your
name].”
2. Hit enter and on a new line, type: “Are you interested in learning RoboHELP?”
3. Hit enter and when your cursor is on a new line, select Insert > Form Element
> Radio Button.
4. Enter “interested in RH” as the Name, and “Yes” as the Value (Figure 20).
Click OK.
5. In your project, make one space next to the radio button and type: “Yes”.
6. Repeat Steps 3 and 4, but enter “No” as the Value. Click OK.
7. Repeat Step 5, but type “No”.
18
Figure 20. Entering Check Box/Radio Button Properties
Inserting Check Boxes

1. In your project, on the next line after the Yes/No buttons, type: “What tutorial(s)
have you found most useful?”
2. With your cursor on the next line, select Insert > Form Element > Check Box.
3. Enter “tutorials” as the Name, “Tutorial 1” as the Value. Click OK.
4. In your project, make one space next to the check box and type: “Tutorial 1:
New Project, Cascading Style Sheets”.
5. Repeat Steps 2
through 4, changing
Tutorial 1 to Tutorial 2 as
the Value in the Check
Box Properties window.
6. Continue to type each

tutorial name (from 2
through 6) in the project
with their corresponding
check boxes and Values
in the Properties window
(Figure 21):
Figure 21. Creating Check Boxes in a Survey.
19
Tutorial 2: Adding Graphics

Tutorial 3: Creating a Table of Contents
Tutorial 4: Creating a Splash Screen, Popups
Tutorial 5: Adding DHTML (Special Effects)
Tutorial 6: Creating Forms, Surveys
Inserting a Text Box

1. On the next line at the end of the tutorials list, type the text: “Please give any
other comments you have in the box below. Thank you!”
2. Click the cursor on the

next line, then select
Insert > Form Element >
Text Box
3. In the Properties
window, enter the Name
as “other comments” and
the Value as “comments”
(Figure 22).
4. Increase the Width of

Characters to 35 and the
Number of Lines to 5.
Click OK. The text box
should appear.
Figure 22. Inserting a Text Box.
Inserting a Submit and Reset Button

1. On the next line after your comments box, select Insert > Form Element >
Push Button
2. In the Properties window, enter “Submit” as the Name and Value.
3. Click OK. The Submit button should appear (Figure 23).
4. Click the cursor to the right of the Submit button and repeat Steps 1 - 3, but
enter “Reset” as both the Name and the Value in the Properties window, and
click the “Reset” button as the Type before clicking OK. The Reset button should
appear next to the Submit button (Figure 23).
20
Figure 23. Inserting Submit and Reset Buttons.
21
RESOURCES
Much of the information and the tutorial topics were inspired by:
James-Tanny, Char. Sams Teach Yourself RoboHELP 2000 for HTML Help in 24
Hours. Sams Publishing, 2000. ISBN 0-672-31625-0
BOOKS, WEBSITES AND CONFERENCES / TRAINING
Books
Goodman, Danny. Dynamic HTML: The Definitive Reference. O’Reilly &

Associates, Inc., 1998. ISBN 1-56592-494-0.
Hedtke, John, et. al. RoboHELP 2000 Bible. IDG Books Worldwide, August 2000.
ISBN 0-76454-644-9.
Meade, James. RoboHELP 7 for Dummies. IDG Books Worldwide, 1999. ISBN
0-76450-560-2.
Wexler, Steve. Official Microsoft HTML Help Authoring Kit. Microsoft Press,
1998. ISBN 1-57231-603-9.
Websites
eHelp Software
www.ehelp.com
HTML Help Center

http://mvps.org/htmlhelpcenter
Microsoft’s HTML Help Workshop

http://msdn.microsoft.com/workshop/author/htmlhelp/default.asp
RoboHELP for HTML Help

www.hallogram.com/robohelp/web
For Cascading Style Sheets:
CSS Pointers Group CSS Bugs and Workarounds

http://css.nu/pointers/bugs.html
22
webreview.com Master Compatibility Chart

http://webreview.com/wr/pub/guides/style/mastergrid.html
Conferences and Training
Help Technology Conference

http://www.winwriters.com
RoboHELP Training:
PDS Training 2000

www.pds-site.com/Training/Using_RH.htm
The Editors
www.theeditors.com/classes.htm
Pubsnet
www.pubsnet.com/winhelpex.htm
23

Sarah Gray Robo Help Tutorials

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Sarah Gray Robo Help Tutorials

Încărcat de

Drepturi de autor:

Formate disponibile

Sarah Gray’s RoboHELP for HTML Tutorials

RoboHELP for HTML Help Tutorials

Page 2 Background & Explanation of RoboHELP for HTML Help Interface

Page 4 Tutorial 1: Creating and Customizing a New Project in RoboHELP

Page 7 Tutorial 2: Adding Graphics to the Project

Page 10 Tutorial 3: How to Create a Table of Contents

Page 13 Tutorial 4: Creating Splash Screens and Popup Hyperlinks

Page 16 Tutorial 5: Adding Dynamic HTML (Special Effects)

Page 18 Tutorial 6: Creating Forms and Surveys

RoboHELP for HTML Help Tutorials

It is recommended that the user of these tutorials have at least a trial

NOTE: These tutorials focus on

The RoboHELP for HTML Help Interface

Left Pane Right Pane

Explanation of the RoboHELP Interface

Tutorial 1: Creating and Customizing a New Project in

Creating a New Project

2. Choose “Create a New Help Project” and click OK.

Entering Project Information

2. Enter “MyProject” as the file name of the project.

Figure 2. Entering Project Information.

Creating and Designing Cascading Style Sheets

Creating a New Style Sheet

2. In Properties, choose the Appearance tab and click New.

Figure 3. The Edit Style Sheet Window.

Designing a Style Sheet

2. Select Style as Body > Click Edit

4. Click the Paragraph tab

5. Click the Background tab

6. Click the List tab

7. Select Style Type as Paragraph Notes About Cascading Style

Figure 4. RoboHELP Interface With MyStyleSheet Applied

Tutorial 2: Adding Graphics to the Project

2. Double-click the Graphics Locator icon

5. Click Destination only if the file name is not defaulted to:

Figure 5. Using the Graphics Locator

2. Select Insert > Image

4. Click OK. The image should appear (Figure 6).

Figure 6. A Graphic Inserted Into the Project.

Repositioning the Graphic

2. Select Edit > Image

3. Select the Align selector box and highlight Right.

Figure 7. The Repositioned Graphic.

Create a “Hotspot” Hyperlink to an Image

2. Select Insert > Hyperlink

3. In the Link To box, select E-mail

4. Enter your e-mail address after mailto: (Figure 8)

Figure 8. Entering Your E-Mail Address As a Graphic Hyperlink

Tutorial 3: How to Create a Table of Contents

Note About Books and Pages: A Book is similar to a heading or sub-

Creating a Table of Contents With Auto Create TOC

2. Select Tools > Auto Create TOC (Figure 9)

Figure 9. Using the Auto Create TOC.

Adding Books to the TOC

Create a Second Book With a Link:

3. Click the Destination down arrow and highlight E-Mail.

4. Select your e-mail address from the topic box.

Create a New Page:

2. Enter the title “My First Page”.

Figure 10. Page Properties in the TOC.

Deleting a Book or Page

2. Hit the Delete key on your keyboard.

Produce a Detailed TOC Report