Layout

<< Click to Display Table of Contents >>

Navigation:  Reference > Project Configuration Settings > Publishing Options > WebHelp >

Layout

This section defines the HTML template file containing the source code of the main page of your WebHelp output, which is normally called index.html. The default setting is Integrated and you should leave this unchanged for most projects.

For more background information see WebHelp in the Configuring Your Output chapter and WebHelp and Browser compatibility in the Reference > Help Formats chapter.

There are also some special variables you can use in the layout page's HTML template. For details see HTML template variables in the Reference section.

If you are using an HTML skin you must edit your templates and settings in the skin!

Nowadays you will almost always choose an HTML skin to publish your project to WebHelp or HTML Help/CHM. A skin is a special kind of Help+Manual project without topics that only stores your HTML templates and all the settings relevant for HTML output to these two formats. When you choose a skin, the templates and settings in the skin completely replace those in your project.

Normally, a skin is pre-designed and you don't need to change anything. However, if you do want to change something, you must do all your editing in the .hmskin skin file. Editing in your Help+Manual project won't have any effect because those templates and settings are not used.

To edit a skin, make a copy of the .hmskin skin file in your project folder and then open it in Help+Manual by selecting .hmskin as the file type to open in the Open dialog. All the templates and settings are in the same places as in a normal Help+Manual project.

Exception: HTML Export Options

The HTML Export Options section is not stored in skins and needs to be edited in your project.

Simple Options

Simple Options provides basic configuration options without source code editing. Please only use the options available here if you are not familiar with editing HTML code manually.

HTML Source Code tab:

This tab allows you to see and edit all the code of the TOC template manually. Experience in editing HTML code is necessary for using this mode! Note that the code in this template is essential for the proper functioning of the TOC. Please don't change or delete anything that you don't fully understand!

Disabled Simple Layout tab:
The Simple Layout tab will be disabled as soon as you edit source code to prevent accidental deletion of your custom code. It can only be re-enabled by clicking on the Reset Template button. This will delete the edited code and replace it with the standard template

Editing window:

The editor provides full HTML syntax highlighting to make editing easier. To enlarge the window for easier editing just resize the window.

BTN_ResetDefaults

This button automatically clears the HTML template and reloads the default template. Use with caution. This function completely overwrites all your editing changes in the source code!

Applying this change re-enables the Simple Layout Tab.

Integrated

This is the modern version of WebHelp and should be preferred for most purposes. It uses an HTML5-based layout with iFrames instead of the deprecated frameset used in the classic two-frame and three-frame layouts. When you choose this option the Layout template is your main index.html file.

Background color:

The color of the background page visible around the navigation, topic and header panes.

Width of left frame:

Width of the navigation pane in pixels. The TOC, Keyword Index and Search are displayed in this pane.

Frame margins:

Free space around the WebHelp panes on the page.

Frame border:

Width of the border line around the three frames on the page.

Header height:

Height of the header pane across the top of the page.

Header HTML content:

By default the header only contains the title of your project. However, you can include anything you like here to provide a header that will integrate the help in the rest of your website.

No frames

Choose for manual website integration. This uses the TOC page as your main index.html file instead of the layout page. There is then no integration in a user interface and the TOC, Index, Search and Topic pages are all separate.

If you choose this option you should also turn off the navigation option that forces loading of the user interface when topic pages are opened on their own.

Classic two-frames and three frames

These two layouts use a classic HTML4 frameset layout with a frameset page containing normal frames. These components are now deprecated and you should only use them if you have a specific reason for doing so. When you choose one of these options the Layout template is your main index.html file.

The three-pane layout gives you an additional frame above for integration in your website. You can use the top frame to insert your standard website header components.

Show borders between frames:

Displays border lines between the two or three frames of your layout. Turn off for a "seamless" look.

Width of the left frame:

Defines the width of the navigation frame containing your project's TOC. Only displayed if a frame mode is activated. You can enter the values as either pixels or percent:

Values under 100 are interpreted as percent.

Values above 100 are interpreted as pixels.

Height of head frame:

Only displayed if the Three Frame option is selected. Defines the height of the head frame in pixels. The height of this frame is always fixed so you must choose the right height to match the layout of the file you are loading into the head frame.

Head frame has scrollbars:

Only displayed if the Three Frame option is selected. If you deselect this no scrollbars will be displayed, even if the content does not fit in the head frame. Deactivate for a seamless appearance (you must plan the height of your head frame content precisely for this to work properly).

Head frame loads external file:

Select to load an existing HTML file into the top frame. Only displayed if the Three Frame option is selected.

Enter the name of the HTML file you want to load into your top frame here. Filenames are case sensitive in most web servers so be careful to enter the entire name correctly.

Enter the absolute or relative path to the file if is not going to be in the same directory as your help (for example if you are going to use the standard header file for your website).

Important: Help+Manual will not copy this file or any files that it references to your output folder for you! You are responsible for ensuring that the file and any files it references (graphics etc.) are stored in the correct location.

Examples:

File will be in help directory:

headframe.html

File will be in another directory two levels up from your help on the server:

././headframe.htm

File will be on a different server:

http://www.servername.com/general/headframe.htm

Edit head frame HTML code:

Choose this option to create and edit the HTML code to be loaded into the head frame directly. Only displayed if the Three Frame option is selected.

When you choose this option the head frame file is generated automatically using the code you enter here when you publish your help. You can reference graphics and other files in it in the same way that you would in all other HTML template files.

Please study Using HTML Templates first.

See also:

Using HTML Templates

WebHelp (Configuring your Output)

WebHelp (Help Formats)

HTML template variables (Reference)

Browser compatibility