sarah gray robo help tutorials

8/8/2019 Sarah Gray Robo Help Tutorials

1/23

Sarah Grays RoboHELP for HTML Tutorials

1

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


2/23


2

RoboHELP for HTML Help Tutorials

By Sarah Gray

BackgroundRoboHELP is a program designed to assist the user in writing help files,

including Windows help files (WinHELP) or HTML help files (HTML Help). Thelatest release of the software, RoboHELP Office 2000, includes both RoboHelpfor WinHELP and RoboHELP for HTML Help. The type of help file the user iswriting determines what RoboHELP program should be used.

It is recommended that the user of these tutorials have at least a trialversion of RoboHELP to better comprehend the tasks. A 15-day trial version ofRoboHELP Office 2000 is available at eHelp Corp./Blue Sky Softwares (makersof RoboHELP) website: www.ehelp.com. Many user-manuals and computer helpbooks (such as Sams Teach Yourself RoboHELP 2000 for HTML Help in 24Hours) include a CD-ROM with a time-locked version of RoboHELP Office 2000.

The RoboHELP for HTML Help Interface Figure 1. Identifying the Interface Features.

NOTE: These tutorials focus onRoboHELP for HTML Help and arewritten for the Windows platform.

Left Pane Right Pane

ProjectToolbar

Menu Bar

FormattingToolbar

LeftPaneTabs

RightPaneTabs


3/23


3

Explanation of the RoboHELP InterfaceDont 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 screenare your key components to RoboHELP. The left pane, or the left half of thescreen, 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 yourtext and format your document. The four tabs at the bottom of this pane displaythe text, images and special features in a different format. The WYSIWYG (WhatYou See Is What You Get) tab should be selected for most of your work. TheTrue Code tab displays your text and formatting in HTML code, the Link View tabshows any hyperlinks in your project, and the Topics tab lists all the differenttopics in your project. At the start of a new project, these tabs will bring up mostlyempty 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 Targeticon (compiles your project) and Run Primary Target icon (shows what it will looklike to the user), among others. The Formatting Toolbar is similar to those inother programs, including shortcut icons to formatting text and creating links.

Because many of the same functions from the Menu Bar, the ProjectToolbar and the Formatting Toolbar are found in basic word processingprograms, you should recognize many of these from the toolbars in MicrosoftWord and other programs.


4/23


4

Tutorial 1: Creating and Customizing a New Project inRoboHELP for HTML Help.

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

Creating a New Project1. 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 Information1. 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 theRoboHELP Office program files (Figure 2). The title of the first project isdefaulted to First Topic.

4. Click Finish.

Figure 2. Entering Project Information.


5/23


5

Creating and Designing Cascading Style Sheets

Creating a New Style Sheet1. 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 Sheet1. 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


6/23


6

7. Select Style Type as Paragraph

8. Select Style as Heading 1 > Click Edit

9. Select the Font Family as Tahoma Click the Underline box in Style Select the Color as Purple

10. Click OK

11. Click OK at the Edit Styles Sheet box,and again at the Topic Properties window.

.

Your project screen should now reflect yournew style sheet and look similar to theinterface in Figure 4.

Figure 4. RoboHELP Interface With MyStyleSheet Applied

Notes About Cascading StyleSheets:

They sound much morecomplicated than they really

are. All these style sheets do ismake it possible to avoidformatting your document eachtime, if you are going to beusing the same formatsthroughout your project. Stylesheets can provide you with asmuch or as little specialformatting as you desire. Theyare only there to make your lifeeasier and create less detail

work for you as you create yourproject.

It takes some time to setup the style sheets in thebeginning, but basically youredoing the formatting only onceinstead of each time you wantsomething formatted a specificway.


7/23


7

Tutorial 2: Adding Graphics to the Project

In this tutorial, you will learn how to use graphics in your project usingRoboHELP.

Finding a Graphic1. Click the Tools tab, which is the toolbox icon located near the bottom of the leftpane.

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 JPGgraphic is.

5. Click Destination only if the file name is not defaulted to:C:\ProgramFiles/RoboHELPOffice/RoboHTML/MyProject. If needed, openfiles/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.


8/23


8

Figure 5. Using the Graphics Locator

Inserting a Graphic1. In the right pane of the WYSIWYG window where your text is, place the cursorflush 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 youwant 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 Graphic1. 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).


9/23


9

Figure 7. The Repositioned Graphic.

Create a Hotspot Hyperlink to an Image1. 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


10/23


10

Tutorial 3: How to Create a Table of Contents

In this tutorial, you will learn how to create a Table of Contents for your projectusing RoboHELP, along with adding and deleting books and pages.

Creating a Table of Contents With Auto Create TOC1. 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 TOC1. Click the New Book icon on the upper toolbar.

2. In the Book Properties dialog box, enter the title My First Book. The BookWith No Links book type should be selected.

3. Click OK

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


11/23


11

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 Page1. 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 ofthe books and pages by simply clicking on it in the TOC Composer screenand dra in it u or down. It will automaticall be re ositioned when ou


12/23


12

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.


13/23


13

Tutorial 4. Creating Splash Screens and PopupHyperlinks

In this tutorial, you will learn how to create a splash screen for your HTML projectas well as a popup hyperlink.

Creating a Splash Screen1. Click the Toolbox icon near the bottom of the left pane.

2. Double-click the Graphics Locator icon and copy a GIF graphic to yourRoboHELP project folder. (See Tutorial 2: Adding Graphics to the Project)

3. Position the cursor somewhere in the right pane where you want the splashscreen to appear.

4. Select Insert > HTML Help > Splash Screen

5. Click the Open File icon in the Splash Screen Wizard. This opens the GraphicsLocator.

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 ofsplash display(seconds) to 3.

9. Click Finish. A smallred-outlined box withSplash in it shouldappear where youwanted the splash

screen (Figure 13).

10. To view your splashscreen or see what yourwebpage will look like:

Figure 12. Splash Screen Wizard Window.

Note About Splash Screens: You cannot use an animated GIF for asplash screenonly the first image in the sequence will display.


14/23


14

Click the Generate Primary Target icon. Its the yellow question mark iconlocated 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 showyour 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.


15/23


15

Creating a Popup Hyperlink1. 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 itwould be. Hit the Enter key on your keyboard.

4. A hyperlink will appear with the words: Popup Jump. Highlight these wordsand change them to My Popup (Figure 15).

5. Place the cursor overthe hyperlink and right-click the mouse. SelectInsert/Edit Hyperlink.

6. Change the Font toCourier.

7. Change the TextColor to Purple.

8. Change theBackground Color toLime.

9. Click OKFigure 15. Creating My Popup Hyperlink

10. To view the popup, click the Generate Primary Target icon (see #10 underCreating a Splash Screen), then click the Run Primary Target icon (Figure 16).

Figure 16. The Popup Hyperlink in the Run Primary Target Window.


16/23


16

Tutorial 5: Adding Dynamic HTML (Special Effects)

In this tutorial, you will learn three of many special effects that can be applied toyour project using RoboHELP.

Figure 17. Creating the Fly-In Effect.

Creating a Fly-InEffect1. Place the cursorbelow the Splash iconin your document. TypeFly In.

2. Select/highlight thetext.

3. Select DHTML > Fly

In > From Top Right

4. The text should nowhave a dotted linearound it (Figure 17).Select the GeneratePrimary Target icon (seeTutorial 4, #10) and then the Run Primary Target icon to view the effect. Thewords Fly In should move from the upper right position to the bottom left.

Creating a Spiral Effect

1. Type Spiral belowFly In.

2. Select/highlight thetext.

3. Select DHTML > Spiral

4. The text should have adotted line around it.Select the Generate

Primary Target icon (seeTutorial 4, Creating aSplash Screen, #10) andthen the Run PrimaryTarget icon to view.Spiral should move into Figure 18. Creating the Spiral Effect.position in a circular motion.


17/23


17

Creating a Fade-In Effect1. Copy a GIF image to your project folder if necessary. (See Tutorial 2: AddingGraphics to the Project).

2. Place the cursor to the right of the Splash icon. Click Insert > Image, and

select the GIF you want.

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 PrimaryTarget icon (see Tutorial 4, Creating a Splash Screen, #10) and then the RunPrimary 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 youtry to type on the next line, which includes it in the dotted box, backspaceout the text until the cursor brings the box back up. Then use the downarrow to move the cursor out of the box.

Note About Placing Graphics: If you are unable to place the image onthe right side of the pane, after it is inserted, place the cursor over theimage, right click and select Insert/Edit Image. Click the Align arrow andselect Ri ht. The ima e should re osition to the ri ht side.


18/23


18

Tutorial 6: Creating Forms and Surveys

In this tutorial, you will learn how to create an online form and survey for yourproject using RoboHELP.

Creating a Form1. Click File > New > New Topic

2. Under the General tab, enter the title as Survey. The File Name willautomatically 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 Buttons1. Position your cursor in the form and type: Please complete this form and clickthe Submit button at the bottom. All information will be e-mailed to [enter yourname].

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.


19/23


19

Figure 20. Entering Check Box/Radio Button Properties

Inserting Check Boxes1. 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 2through 4, changingTutorial 1 to Tutorial 2 asthe Value in the CheckBox Properties window.

6. Continue to type eachtutorial name (from 2

through 6) in the projectwith their correspondingcheck boxes and Valuesin the Properties window(Figure 21):

Figure 21. Creating Check Boxes in a Survey.


20/23


20

Tutorial 2: Adding GraphicsTutorial 3: Creating a Table of ContentsTutorial 4: Creating a Splash Screen, PopupsTutorial 5: Adding DHTML (Special Effects)Tutorial 6: Creating Forms, Surveys

Inserting a Text Box1. On the next line at the end of the tutorials list, type the text: Please give anyother comments you have in the box below. Thank you!

2. Click the cursor on thenext line, then selectInsert > Form Element >

Text Box

3. In the Propertieswindow, enter the Nameas other comments andthe Value as comments(Figure 22).

4. Increase the Width ofCharacters to 35 and theNumber of Lines to 5.

Click OK. The text boxshould appear.

Figure 22. Inserting a Text Box.

Inserting a Submit and Reset Button1. 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, butenter Reset as both the Name and the Value in the Properties window, andclick the Reset button as the Type before clicking OK. The Reset button shouldappear next to the Submit button (Figure 23).


21/23


21

Figure 23. Inserting Submit and Reset Buttons.


22/23


22

RESOURCES

Much of the information and the tutorial topics were inspired by:

James-Tanny, Char. Sams Teach Yourself RoboHELP 2000 for HTML Help in 24Hours. Sams Publishing, 2000. ISBN 0-672-31625-0

BOOKS, WEBSITES AND CONFERENCES / TRAINING

Books

Goodman, Danny. Dynamic HTML: The Definitive Reference. OReilly &

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. ISBN0-76450-560-2.

Wexler, Steve. Official Microsoft HTML Help Authoring Kit. Microsoft Press,1998. ISBN 1-57231-603-9.

Websites

eHelp Softwarewww.ehelp.com

HTML Help Centerhttp://mvps.org/htmlhelpcenter

Microsofts HTML Help Workshophttp://msdn.microsoft.com/workshop/author/htmlhelp/default.asp

RoboHELP for HTML Helpwww.hallogram.com/robohelp/web

For Cascading Style Sheets:

CSS Pointers Group CSS Bugs and Workaroundshttp://css.nu/pointers/bugs.html


23/23


webreview.com Master Compatibility Charthttp://webreview.com/wr/pub/guides/style/mastergrid.html

Conferences and Training

Help Technology Conferencehttp://www.winwriters.com

RoboHELP Training:

PDS Training 2000www.pds-site.com/Training/Using_RH.htm

The Editorswww.theeditors.com/classes.htm

Pubsnetwww.pubsnet.com/winhelpex.htm

sarah gray robo help tutorials

Documents