The appearance and functionality of WebHelp output is controlled by the options in two sections in your Project Configuration:
Additional WebHelp and HTML information for experts
If you are experienced in creating pages with HTML, CSS and JavaScript please refer to the Using HTML Templates chapter for information on how you can get the most out of your HTML-based output in Help+Manual.
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 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.
It is unavoidable that your WebHelp output will look slightly different depending on the browser used to view it. HTML Help and Visual Studio Help are proprietary Microsoft formats that use Microsoft help viewers to display them, and your output in these formats will always closely resemble your source in the Help+Manual editor.
This is not possible in WebHelp. The HTML code generated is the best possible compromise between the many quirks of all the browsers now in use and compliance with the current standards for XHTML, HTML and CSS.
Unfortunately, no browser is really compliant with all the standards. In addition to this, individual browsers often interpret the same rules and formatting tags differently.
|
You now need to consider high-resolution 4K monitors and devices like the Microsoft Surface and Lenovo Yoga Pro when you are planning your WebHelp. If you don't do this the text and other elements will often be too small to read on these devices. If you set the configuration options described below Help+Manual will automatically adjust everything else so that it displays correctly on high-resolution displays.
1.Open your project in Help+Manual and in the Project Explorer navigate to .
2.Set Font Size Encoding to: em (1em = 100%).
3.Set Font size of style "Normal" to about 82% for 10pt base font type and about 88% for 11pt base font type. Adjust as necessary depending on the appearance of your output.
You need to set the percentage for Normal because ems are a relative value. The default font size on all browsers is 16 pixels, which is generally too large for normal body text in documentation. Compare the Help+Manual editor with the output on your browser to adjust the percentage to the correct value for your documentation.
Once the base font encoding is set to ems all elements in your topic files will then automatically be adapted for correct display on both normal and high-resolution devices and monitors.
|
Edit in the skin if you are using a skin
All these sections must be edited in the .hmskin skin file if you are publishing with a skin. When you use a skin, the HTML templates and settings in the skin replace those in your project. Usually, when you are using a skin, you don't need to edit anything because it has all already been set up by the designer.
Sections:
The most important sections are , and . Always at least check the settings in these sections before publishing a new project.
The options in this section control the layout of your WebHelp.
Integrated:
This uses current HTML5-based templates. The flexible layout uses modern iFrames instead of the old, deprecated frameset. Recommended for most projects. As in the classic 3-frame layout (see below), you can use the header frame as container for the header of your website or any other web content.
No Frames:
This option is only for users who want to manage all their help topic files themselves. It does not create an integrated help system. The TOC file is used as the main index.html file and topics selected in the TOC display in the same page as the TOC.
Classic 2 Frames:
This generates the old frameset-based 2-frame layout used in previous versions of Help+Manual. It is provided mainly for users who want to continue using their own old customized templates.
Classic 3 Frames:
This generates the old frameset-based 3-frame layout used in previous versions of Help+Manual. Here too, it is provided mainly for users who want to continue using their own old customized templates. The top frame can be used as a container for the header of your website or any other web page.
Single Page Responsive:
This is only displayed when editing a skin. It is a special output format for responsive WebHelp that will work across multiple device platforms (desktop, tablets and smartphones). Currently, it will NOT "just work" if you just select it. It requires extensive JavaScript and CSS programming on the part of the author because all the special scripting and CSS for this is not generated automatically. The scripts and CSS must all be included manually in a skin using this mode. Currently, this format is only used in the V3 Responsive skins in the Premium Pack 3 add-on.
|
The options in this section control how Help+Manual generates the navigation for your WebHelp. Most of the options should be self-explanatory. For full details see Navigation in the Project Configuration chapter.
If you want a Keyword Index and Full-text Search tabs in your WebHelp you must activate these features here!
You can automatically generate an XML site map file that will be read by search engines to improve search engine performance when scanning your WebHelp. Note that topics with IDs beginning with an underscore character (_) are excluded from the site map because they are also excluded from full-text search.
|
These sections configure the Contents, Index and Search tabs of your WebHelp output. In addition to this you can also edit the HTML templates that are used for generating these tabs. Editing HTML templates directly requires experience with editing HTML code. If you are just getting started with Help+Manual it is recommended that you only use the default settings in the Simple Template Layout tab.
Note that the Full-text Search feature for WebHelp is only available in the Professional and Floating license versions of Help+Manual, which include a royalty-free license for the integrated Zoom web search engine from Wrensoft.
For full details on all the settings in these sections see WebHelp in the Publishing Options chapter. For full details on using and editing HTML templates see Using HTML Templates and Templates and Secondary Windows. See Publishing for an important note on publishing WebHelp with full-text search.
|
This section contains some of the most important options for your WebHelp output. They control how your project is converted to HTML code and how popup topics are managed and you should always check them before publishing a new project for the first time. Changes made here can cause radical differences in the behavior and appearance of your HTML Help output.
For full details on all the settings in this section see HTML Export Options in the HTML Help section of the Project Configuration chapter.
This is a shared section! The options in HTML Export Options are used for all HTML-based output formats (HTML Help, WebHelp, Windows Exe and ePUB eBooks and Visual Studio Help). The settings of these options are the same for all these formats. You cannot enter different settings for the individual output formats.
|
|
Edit in the skin if you are using a skin
HTML page templates must be edited in the .hmskin skin file if you are publishing with a skin. When you use a skin, the HTML templates and settings in the skin replace those in your project. Usually, when you are using a skin, you don't need to edit anything because it has all already been set up by the designer.
About HTML page templates
This section provides access to the HTML templates used in all HTML-based output formats except ePUB and Kindle eBooks (which use special templates accessible in the eBooks configuration sections). These templates define the layout of the HTML pages into which the text from your topics is inserted.
Editing HTML templates directly requires experience with editing HTML code. If you are just getting started with Help+Manual it is recommended that you only use the Simple Template Layout tab. This allows you to use the default template while you are getting used to using the program.
For full details on all the settings in this section see Topic Pages in the HTML Help section of the Project Configuration chapter.
For information on using and editing HTML templates see the Templates and Secondary Windows and Using HTML Templates chapters in the Reference section.
|
See also:
Publishing Options - WebHelp
Output Formats - WebHelp