Advanced lessons

This section picks up where the basic lessons ended. If you haven't completed the basic lessons, finish them before you start these advanced lessons. If you closed the tutorial project, open it in the program before you start the advanced lessons.

To open the La Jolla project:

  1. Click the File menu. The lower-part of this menu displays the last several projects that were open.

  2. If LaJolla.mpj is displayed, select it.

  3. Otherwise, from the File menu, select Open.

  4. At the Open dialog, browse to the drive/folder where the project is located and double-click to open it.

Changing topic status

An easy way to manage topics is by altering their properties. For example, you can prioritize topics, assign a status to them, track development hours, and log To Do items. By default, the program assigns some of this information to each topic when it is created. You can alter topic properties individually or in groups.

For this lesson, we'll change the status of multiple topics simultaneously.

To change topic status:

  1. Click the Topics tab to open the Topic List.

  2. Select the following topics (press and hold CTRL while you click each one; do not select the bookmarks or the URL).

  1. Click Properties on the Project toolbar.

  2. From the Topic Properties dialog, click the Status tab.

  3. From the To Do list, select First Draft, Added to TOC, and Links. (Click the boxes to add check marks.) The Topic Properties dialog should look like this:

  1. Click the down-arrow on the same line as Status and select Ready for Review.

  2. Click OK to close the dialog.

Creating style sheets

There are three kinds of styles:

Style sheets enable you to define font style and size, line spacing, paragraph indents, and other formatting features. Similar to templates used by Microsoft Word and other programs, a style sheet is a template that controls the formatting of topics. Style sheets enable you to maintain consistency among your topics, and you can share them with other authors so your projects maintain a consistent look and follow your design standards.

Style definitions are stored in a special file (style sheet) that is separate from the HTML topics that use it. A single style sheet (.CSS) can be associated with any number of topics. If desired, you can even have multiple style sheets as part of a project, each attached to different topics.

When you create a new project, the first topic is set up to use the default style sheet called "DEFAULT.CSS." All new topics you create in the project use the same style sheet until you attach a new one to an existing topic. The style sheet can be one that you create from scratch, or it can be one that you import into the project.

Tip: You can attach style sheets to topics and also apply embedded and inline formatting. The "cascading" effect of style sheets enables some styles to have priority over others. For example, if you combine the three types of styles in a single topic, inline styles have top priority, then embedded styles, and finally styles defined in style sheets.

In this lesson, you'll learn how to create a new style sheet, define styles for it, and attach the style sheet to your topics.

To create a style sheet:

  1. Click the Project tab.

  2. If necessary, open the HTML Files (Topics) folder.

  3. Double-click the topic "About La Jolla" so it opens in the WYSIWYG Editor.

  4. Click Properties .

  5. From the Topic Properties dialog, click the Appearance tab.

  6. Currently, the style sheet DEFAULT.CSS is attached to the topic. (By default, all topics are linked to DEFAULT.CSS until you attach or create new ones.) The Topic Properties dialog should look like this:

  1. Click New. The Save As dialog opens. From the Save As dialog, you can assign a name for the new style sheet.

  2. In the File name box, type LaJolla.CSS.

  3. Click Save.

The Styles dialog opens next. This is where you set up the styles for the new style sheet you just created, "LaJolla.CSS."

Now it's time to define styles for the style sheet file. Let's define the Normal style first:

  1. Select Normal and click Modify.

Note: To view a list of all available styles on this dialog, make sure that Hide inherited styles is not selected.

  1. On the Modify Styles dialog, click the Format button and select Font. The Font dialog opens.

  1. Click OK to close the Font dialog. You just customized the Normal style for your style sheet.

  2. Click OK to close the Modify Styles dialog.

Notice that the Styles dialog updates the Description box to reference the new formatting.

Now we'll set up Heading 1:

  1. On the Styles dialog, select Heading 1 and click Modify.

  2. Click the Format button and select Font. The Font dialog opens.

  1. Click OK.

  2. Click OK again.

We'll make Heading 2 slightly different:

  1. On the Styles dialog, select Heading 2 and click Modify.

  2. Click the Format button and select Font.

  1. Click OK.

Now we'll create a completely new style:

  1. On the Styles dialog, select Normal.

  2. Click New. The New Style dialog opens.

Tip: Remember that typing when text is selected replaces the selection. The Normal style is not removed when you create this new style.

  1. Under Name, type Special. The New Style dialog should look like this:

  1. Click the Format button and select Font. The Font dialog opens.

  1. Click OK.

  2. On the New Style dialog, click the Format button and select Borders and Shading.

  3. On the Borders and Shading dialog, click the Shading tab.

  4. From Color, select Teal. (This adds a shade to the background fill.)

  5. Click OK. The New Style dialog should look like this:

  1. Click OK to save the new style.

    On the Styles dialog, notice that the style you just created (Special) now appears on the Styles list.

  2. To save your changes and return to the topic, click Close.

 

Style types

The New Style dialog has an option called Style type that allows you to select the style category you want to work with. You can select one of the following:

In the last section you worked with paragraph styles. Now, let's change the background color so that it applies to the entire topic.

To change the background color of the topic:

  1. From the Format menu, click Styles.

  2. From the Styles list, select Background + Text.

  3. Click Modify.

  4. From the Modify Style dialog, click the Format button and select Borders and Shading.

  5. Click the Shading tab.

  6. In Color, select White.

  7. Click OK to return to the Modify Style dialog. Preview shows the selected color applied to the topic.

  8. Click OK to close the Modify Styles dialog and return to the Styles dialog.

  9. To return to the topic, click Close.

  10. Click OK. The new style sheet, "LaJolla.CSS" is defined and attached to the topic that is open in the WYSIWYG Editor ("About La Jolla").

  11. Save your work.

When you created the style sheet, you were editing the properties for the topic "About La Jolla." This topic is linked to the new style sheet. As you can see, the topic's appearance has changed. The styles have been updated to reflect the formatting you set up in the style sheet.

Attaching style sheets to topics

For your topics to use the style sheet you created you must attach it. There are several ways to attach style sheets to topics. Let's learn the simple methods now.

To attach a style sheet to a topic from the formatting toolbar:

The formatting toolbar includes a Style Sheet list that displays the names of all the style sheets that are available in your project. You can attach a style sheet to a topic from this list.

  1. Click the Project tab.

  2. Open the Natural La Jolla folder and double-click La Jolla Cove to open the topic in the WYSIWYG Editor.

  3. Since this topic is not linked to a style sheet, it uses default HTML formatting.

  4. Click the Style Sheet list on the formatting toolbar and select LaJolla.CSS. The style sheet is attached to the topic and the text is updated to take on the formatting in the style sheet.

  1. Save your work.

To attach a style sheet to several topics at once:

You can select multiple topics from the Topic List and attach a style sheet to all of them at the same time.

  1. Click the Topics tab.

Tip: If any topics are currently selected, click below the list of topics to clear highlighting.

  1. Press and hold CTRL while you click Underwater Park and Windandsea Beach. Both topics are now selected.

  2. On the Project toolbar, click Properties .

  3. Click the Appearance tab.

  4. Under Style Sheet, select LaJolla.CSS and click OK. The style sheet is attached to both topics.

  5. Save your work.

Applying styles

After you've attached style sheets to topics, you can apply the styles to your text.

To apply styles:

  1. Open the topic "Underwater Park" in the WYSIWYG Editor.

  2. Click in the first line of text "Underwater Park."

  3. From the Styles list (left side of Formatting toolbar), select Heading 1. (You need to scroll up the list to locate this style.)

  1. Click at the end of the first paragraph (". . . but dive in!"), and press ENTER to insert a new blank line.

  2. Type the following:

    About the Underwater Park

  3. From the Styles list, select Heading 2.

  4. Click inside the paragraph below this heading ("The California Department . . .").

  5. From the Style list, select Special.

    Your topic should look something like this:

Creating an index

An index is an essential component of a Help system. You create an index by adding keywords to topics. There are several ways to do this.

To add keywords to topics using the right-click menu:

  1. Click the Index tab on the left side to open the Index Designer.

  2. Take a moment to review this component:

Dragging and dropping keywords

A really easy way to create the index is to drag and drop topics into the Index Designer. Let's start by viewing details about topics in the Topic List.

  1. Click the Topics tab on the right side of the program window.

  2. From the View menu, select Details View.

As you add topics to the index, this view updates the Index column for each topic to "Yes," indicating that the topic has keywords. The page icon on the left side of the file name changes from white to blue (another visual clue that the topic is indexed).

Now let's add a keyword into the index.

To drag and drop keywords into the index:

  1. Enter the following word into the Keyword text box (on the top pane of the Index Designer):

    Swimming

  1. Click Add to add it to the list of keywords. The keyword is added to the list, although it appears in bold because it is not yet associated with a topic.

  2. Click the Topics tab.

  3. From the Topic List, drag and drop the topic La Jolla Shores into the lower-pane of the Index Designer, below Topics For: Swimming.

Tip: You might need to adjust the pane lengths to view the bottom part of the Index Designer. To do this, place the pointer over the edge of the pane that you want to adjust. The pointer turns into a line with arrows on each end. Press the left mouse button and drag up, down, left, or right. The pane is resized after you release the mouse button.

Now the keyword "Swimming" is added to the topic "La Jolla Shores." Notice how the Topic List displays the page icon in blue to indicate that the topic is indexed. The Index column also displays "Yes" for the "La Jolla Shores" topic:

Adding keywords to topic properties

You can also add keywords to topic properties. You can do this when you create the topic (after you assign a title) or you can do this to existing topics in your project.

To add keywords using topic properties:

  1. In the Topic List, right-click Art Museum and select Properties.

  2. On the Topic Properties dialog, click the Index tab.

  3. Type the following keyword in the Keywords text box:

    Paintings

  1. Click Add to add the keyword to the topic.

  2. Add these other keywords:

    Drawings

    Photographs

The Topic Properties dialog should look like this:

  1. Click OK to save the new keywords.

You can sort the keywords alphabetically and numerically in the Index Designer:

  1. Right-click the first keyword at the top of the keyword pane and select Sort - Current Level and Below from the menu.

  2. Now the keywords are sorted alphabetically.

Creating cross-references

As with a "see also" reference in a printed index, you can cross-reference keywords in an online index. The cross-reference is a keyword that leads to another keyword. When users select the cross-reference from the Index tab, they go to the alternate keyword.

When you create the cross-reference, you select two keywords rather than a keyword and a topic. You can only cross-reference index file keywords.

To cross-reference an index keyword:

  1. Click the Index tab.

  2. In the Keyword text box, enter Art and click Add. This keyword appears in bold to indicate that it is not cross-referenced to an alternate keyword.

  3. Right-click the keyword and select Properties.

  4. On the Keyword Properties dialog, select Cross-reference.

    Notice how the field to the right of the Cross-reference option becomes active so you can click the drop-down list.

  5. Click the drop-down and select Paintings. This is the keyword users go to when they select the cross-referenced keyword from the index. The Keyword Properties dialog should look like this:

  1. Click OK.

The lower-pane in the Index Designer indicates the name of the alternate keyword used with the cross-reference keyword:

  1. Save your work.

Viewing the Index report

The Index report provides you with details about your index.

  1. From the Tools menu, select Reports - Index. The report shows all of the keywords you added to the index.

    You can view the report in a variety of ways.

  2. Click Options.

Note: You can view index file keywords as well as topic keywords. In this tutorial, you are creating index file keywords. You can also use topic keywords with your index. These keywords are saved in individual topics, which comes in handy when you share files and import them into various projects.

  1. Select Keywords and Topics.

  2. Click OK.

    The Index report is updated to show an alphabetized list of keywords. Under each keyword is a list of topics that reference it. It should look like this:

  1. Click Close.

Creating browse sequences

Browse sequences are ordered sets of topics that users read by clicking special navigation buttons ("previous" and "next"). Because they guide readers through a series of topics, browse sequences are often used for introductory materials and tutorials.

To create browse sequences:

  1. From the Tools menu, select Browse Sequence Editor.

  2. Click New and type Natural La Jolla.

  3. Click New again and type Man-Made La Jolla.

  4. Press ENTER.

Assigning topics to browse sequences

Now that you have created browse sequences, you can add topics to them.

To add topics to browse sequences:

  1. Click Natural La Jolla.

  2. From the Available Topics list, select La Jolla Cove and click . The topic is added to the Natural La Jolla folder in the Browse Sequence list.

  3. Add the following topics the same way:

  1. Click Man-Made La Jolla.

  2. From the Available Topics list, select Torrey Pines Glider Port and click . The topic is added to the Man-Made Jolla folder in the Browse Sequence list.

  3. Add the following topics the same way:

  1. Click OK to save the browse sequences.

    A message is displayed, indicating that browse sequences have been enabled in your Help system.

  2. Click OK.

Viewing browse sequences

You can view your browse sequences in Link View.

  1. Click the Link View tab.

  2. Click the Project tab. Select the topic La Jolla Shores and drag and drop it into Link View. Your project should look something like this:

The previous and next buttons on the top and bottom of the central topic indicate that it is used with a browse sequence. Click the previous and next buttons to move through the browse sequence.

Testing browse sequences

To test browse sequences, run your project.

  1. Click Save .

  2. Click Quick Generate on the Project toolbar. (You'll learn more details about selecting, generating, and running primary targets later in these lessons.)

  3. Click Run on the Project toolbar.

    The browse sequence list, navigation buttons and bar are displayed on the right side above the content pane:

  1. Click the buttons or icons to move through the browse sequence.

  2. Close the Preview window.

  3. To close the compiler pane, click Output View on the View menu.

Adding images to topics

You can use .GIF and .JPEG image file formats. You can add images to your topics in no time. Just follow these easy steps.

To add an image to a topic:

  1. From the HTML Files (Topics) folder, double-click La Jolla Shores to open the topic in the WYSIWYG Editor.

  2. At the end of the first line of text in the topic "La Jolla Shores," press ENTER to add a new line.

  3. From the Insert menu, select Image. The Image dialog includes an Images in project folders list. It displays the names of images in your project.

  4. From the drop-down menu in the Images in project folders list, select Top Level Folder. There are several images (.GIF files) in your project folder.

  5. Click shores.gif.

    A thumbnail of the image is displayed in Preview, and the file name appears in Image name (at the top of the dialog):

  1. Take a moment to study other features in this dialog.

  1. Click OK to insert the image into the topic.

  2. Save your work.

Dragging and dropping images

Once you've added an image to your project, it's quick and easy to reuse it in other topics and in other locations. Besides adding it from the Image dialog, you can also use drag and drop. The next lesson shows you how.

To add an image to a different topic:

  1. Open the topic, "Underwater Park."

  2. Click at the end of the heading "Underwater Park" and press ENTER to add a new line.

  3. In the Project Manager, open the Images folder, drag cliffs.gif into the WYSIWYG Editor, and drop it onto the blank line you just added to the topic.

    The image is added to your topic on the new line:

  1. Save your work.

Creating image maps

You can make your Help system even more useful by including a multiple hotspot image. These are easily created by using eHelp Corporation's HotSpot Studio to generate the image map. (Hotspot Studio is copied to your system when you install RoboHELP.)

To create an image map:

  1. Right-click the image you just added and select Insert Image Map from the menu.

  2. Click Rectangle. You mouse pointer becomes crossed lines that you'll use to create the image map.

Now you'll set up the targets for the clickable regions:

  1. Click on the upper-right corner and drag to the bottom-middle of the image to draw a rectangle around the ocean portion of the picture.

  2. When you release the mouse, the Image Map dialog opens. This is where you can link topics to clickable areas.

  3. Under Select destination (file or URL), select La Jolla Shores.

  4. Click OK. The image map is targeted to display the topic "La Jolla Shores" when clicked.

  5. Right-click on the image again and select Insert Image Map.

  6. Select Rectangle.

  7. This time, click on the upper-left corner and drag to the bottom-middle of the image to create a rectangle around the cliffs in the picture.

  8. Use the drop-down menu under Select destination (file or URL) to select Top Level Folder.

  9. Select Riptides and click OK. The image map is targeted to display the topic "Riptides" when clicked.

  10. Click Display as Popup. (You are creating a popup link for this part of the image map.) The Hyperlink dialog should look like this:

  1. Click OK.

  2. To test the image maps, click View .

  3. Try out your new image map by clicking on the hotspot areas you created (i.e., the cliff on the left and the ocean on the right). If you click on the cliffs on the left-side of the image, the riptides topic should popup and look like this:

Generating your project

The last step is to generate your project.

To generate a project:

  1. From the File menu, select Generate - HTML Help.

  2. When the files finish generating, you can view them. Click Run and navigate through the project.

  3. Click Close to exit the project.

Good job!

You've just completed the tutorial. These lessons gave you an overview of many of the program's powerful features and demonstrated many of our favorite tips to enhance your productivity.

You're now ready to explore on your own.

Before you move on, you may want to read these final topics in the tutorial:

What's Next?