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.
Click the File menu. The lower-part of this menu displays the last several projects that were open.
If LaJolla.mpj is displayed, select it.
Otherwise, from the File menu, select Open.
At the Open dialog, browse to the drive/folder where the project is located and double-click to open it.
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.
Click the Topics tab to open the Topic List.
Select the following topics (press and hold CTRL while you click each one; do not select the bookmarks or the URL).
Torrey Pines State Park
La Jolla Shores
La Jolla Cove
Click Properties
on the Project toolbar.
From the Topic Properties dialog, click the Status tab.
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:
Click the down-arrow on the same line as Status and select Ready for Review.
Click OK to close the dialog.
There are three kinds of styles:
Style sheets: Also known as Cascading Style Sheets, they are styles created for specific style sheets. The style definitions are saved with the style sheet file (.CSS), which is separate from the topics that use it. When you change a style in a style sheet, all topics that are linked to that style sheet are updated to reflect the style change.
Embedded: Styles that are created for an individual HTML file are referred to as embedded styles. The style definitions are saved in the topic (.HTM file) that uses it. (No other topics are able to use the embedded styles contained in that topic.) When you change an embedded style, only the topic it is contained in changes to reflect the new styles.
Inline: A block of text within a single HTML file is formatted directly in the WYSIWYG Editor using the Format Font and Paragraph dialogs and from the Formatting toolbar. There are no style names associated with the formatting. The formatting is saved with the block of text that uses it.
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.
Click the Project tab.
If necessary, open the HTML Files (Topics) folder.
Double-click the topic "About La Jolla" so it opens in the WYSIWYG Editor.
Click Properties
.
From the Topic Properties dialog, click the Appearance tab.
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:
Click New. The Save As dialog opens. From the Save As dialog, you can assign a name for the new style sheet.
In the File name box, type LaJolla.CSS.
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."
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.
On the Modify Styles dialog, click the Format button and select Font. The Font dialog opens.
For Font, select Times New Roman or Serif.
For Font style, select Regular.
For Size, select 12 pt.
For Font Color, select Black. The Font dialog should look like this:
Click OK to close the Font dialog. You just customized the Normal style for your style sheet.
Click OK to close the Modify Styles dialog.
Notice that the Styles dialog updates the Description box to reference the new formatting.
On the Styles dialog, select Heading 1 and click Modify.
Click the Format button and select Font. The Font dialog opens.
For Font, select Arial or Sans Serif.
For Style, select Bold.
For Size, select 14 pt.
For Color, select Purple.
Click OK.
Click OK again.
On the Styles dialog, select Heading 2 and click Modify.
Click the Format button and select Font.
For Font, select Arial or Sans Serif.
For Style, select Bold.
For Size, select 12 pt.
For Color, select Teal.
Click OK.
On the Styles dialog, select Normal.
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.
Under Name, type Special. The New Style dialog should look like this:
Click the Format button and select Font. The Font dialog opens.
For Font, select Arial or Sans Serif.
For Style, select Bold.
For Size, select 10 pt.
For Color, select White.
Click OK.
On the New Style dialog, click the Format button and select Borders and Shading.
On the Borders and Shading dialog, click the Shading tab.
From Color, select Teal. (This adds a shade to the background fill.)
Click OK. The New Style dialog should look like this:
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.
To save your changes and return to the topic, click Close.
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:
Paragraph: Applies to entire paragraph such as Normal, Heading 1, Heading 2, etc.
Character: Applies to selected block of text such as Subscript, Plain Text, Code, etc.
In the last section you worked with paragraph styles. Now, let's change the background color so that it applies to the entire topic.
From the Format menu, click Styles.
From the Styles list, select Background + Text.
Click Modify.
From the Modify Style dialog, click the Format button and select Borders and Shading.
Click the Shading tab.
In Color, select White.
Click OK to return to the Modify Style dialog. Preview shows the selected color applied to the topic.
Click OK to close the Modify Styles dialog and return to the Styles dialog.
To return to the topic, click Close.
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").
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.
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.
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.
Click the Project tab.
Open the Natural La Jolla folder and double-click La Jolla Cove to open the topic in the WYSIWYG Editor.
Since this topic is not linked to a style sheet, it uses default HTML formatting.
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.
Save your work.
You can select multiple topics from the Topic List and attach a style sheet to all of them at the same time.
Click the Topics tab.
Tip: If any topics are currently selected, click below the list of topics to clear highlighting.
Press and hold CTRL while you click Underwater Park and Windandsea Beach. Both topics are now selected.
On the Project
toolbar, click Properties .
Click the Appearance tab.
Under Style Sheet, select LaJolla.CSS and click OK. The style sheet is attached to both topics.
Save your work.
After you've attached style sheets to topics, you can apply the styles to your text.
Open the topic "Underwater Park" in the WYSIWYG Editor.
Click in the first line of text "Underwater Park."
From the Styles list (left side of Formatting toolbar), select Heading 1. (You need to scroll up the list to locate this style.)
The first line is updated to display the attributes for the Heading 1 style.
Click at the end of the first paragraph (". . . but dive in!"), and press ENTER to insert a new blank line.
Type the following:
About the Underwater Park
From the Styles list, select Heading 2.
Click inside the paragraph below this heading ("The California Department . . .").
From the Style list, select Special.
Your topic should look something like this:
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.
Click the Index tab on the left side to open the Index Designer.
Take a moment to review this component:
At the top-left, the drop-down provides selections for Index and ALinks — the default is Index. (You can also use the Index Designer feature to create ALinks for your topics. See the online Help system for more information.)
In the keyword text box, you can type keywords and click Add to add them to the index.
Below this is the Keyword pane. As you add keywords, they are listed here.
In the Topics for pane, the topics that use the keyword selected in the Keyword pane are listed.
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.
Click the Topics tab on the right side of the program window.
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.
Enter the following word into the Keyword text box (on the top pane of the Index Designer):
Swimming
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.
Click the Topics tab.
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:
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.
In the Topic List, right-click Art Museum and select Properties.
On the Topic Properties dialog, click the Index tab.
Type the following keyword in the Keywords text box:
Paintings
Click Add to add the keyword to the topic.
Add these other keywords:
Drawings
Photographs
The Topic Properties dialog should look like this:
Click OK to save the new keywords.
Right-click the first keyword at the top of the keyword pane and select Sort - Current Level and Below from the menu.
Now the keywords are sorted alphabetically.
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.
Click the Index tab.
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.
Right-click the keyword and select Properties.
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.
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:
Click OK.
The lower-pane in the Index Designer indicates the name of the alternate keyword used with the cross-reference keyword:
Save your work.
The Index report provides you with details about your index.
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.
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.
Select Keywords and Topics.
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:
Click Close.
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.
From the Tools menu, select Browse Sequence Editor.
Click New and type Natural La Jolla.
Click New again and type Man-Made La Jolla.
Press ENTER.
Now that you have created browse sequences, you can add topics to them.
Click Natural La Jolla.
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.
Add the following topics the same way:
La Jolla Shores
Windandsea Beach
Underwater Park
Click Man-Made La Jolla.
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.
Add the following topics the same way:
Torrey Pines Golf Course
Art Museum
After you add the browse sequences, the dialog should look something like this:
Click OK to save the browse sequences.
A message is displayed, indicating that browse sequences have been enabled in your Help system.
Click OK.
You can view your browse sequences in Link View.
Click the Link View tab.
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.
To test browse sequences, run your project.
Click Save
.
Click Quick
Generate on the Project toolbar. (You'll learn more
details about selecting, generating, and running primary targets later
in these lessons.)
Click Run
on the Project toolbar.
The browse sequence list, navigation buttons and bar are displayed on the right side above the content pane:
Click the buttons or icons to move through the browse sequence.
Close the Preview window.
To close the compiler pane, click Output View on the View menu.
You can use .GIF and .JPEG image file formats. You can add images to your topics in no time. Just follow these easy steps.
From the HTML Files (Topics) folder, double-click La Jolla Shores to open the topic in the WYSIWYG Editor.
At the end of the first line of text in the topic "La Jolla Shores," press ENTER to add a new line.
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.
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.
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):
Take a moment to study other features in this dialog.
Click to display
the Select Image file dialog. At
this dialog you can search for and add new files to your folder. (We won't
do this in the tutorial since you already have several image files to use.)
You can select how you want text to wrap around an image, or you can select None if you don't want to use text wrapping.
You can adjust the image's size (height and width), set the margins (the amount of space between the image and its surrounding text), and add a border.
In Screen tip, you can type text to display when users hover the mouse over an image.
Click OK to insert the image into the topic.
Save your work.
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.
Open the topic, "Underwater Park."
Click at the end of the heading "Underwater Park" and press ENTER to add a new line.
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:
Save your work.
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.)
Right-click the image you just added and select Insert Image Map from the menu.
Click Rectangle.
You mouse pointer becomes crossed lines that you'll use
to create the image map.
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.
When you release the mouse, the Image Map dialog opens. This is where you can link topics to clickable areas.
Under Select destination (file or URL), select La Jolla Shores.
Click OK. The image map is targeted to display the topic "La Jolla Shores" when clicked.
Right-click on the image again and select Insert Image Map.
Select Rectangle.
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.
Use the drop-down menu under Select destination (file or URL) to select Top Level Folder.
Select Riptides and click OK. The image map is targeted to display the topic "Riptides" when clicked.
Click Display as Popup. (You are creating a popup link for this part of the image map.) The Hyperlink dialog should look like this:
Click OK.
To test the image maps,
click View .
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:
The last step is to generate your project.
From the File menu, select Generate - HTML Help.
When the files finish generating, you can view them. Click Run and navigate through the project.
Click Close
to exit the project.
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: