This package was originally created for Help & Manual 3. The template format has changed in Help & Manual 4 and the original version will not work properly there. You will now find two sets of files for this template below, one for Help & Manual 3 (HM3Version.zip) and one for Help & Manual 4 (HM4Version.zip).
Variant instructions for installing and using both versions are now included below.
------------------------------------------------------------------------------
This little package includes a fully-commented topic template that provides the following features:
- Non-scrolling headers for HTML Help
- Navigation icons with mouseover effect in the topic headers
- Support for expandable/collapsable sections (a blue, underlined header that drops down the text it contains when the user clicks on it)
- Link styles with underlines only displayed on mouseover (hover attribute) and different colors for topic links (green), popup links (red) and web links (blue)
- No white border around the topic header
- Download the appropriate version of the package for your version of Help & Manual (links below at the end of the tutorial).
- Help & Manual 3:
Unpack all the files except topic_template.txt to your project folder (same folder where your .hm3 project file is). (You can actually store topic_template.txt anywhere you want, you are just going to use it as a source for your topic template.)
Help & Manual 4:
Unpack all the files to an empty folder, which can be located anywhere you like. Then go to Project > Project Properties > Common Properties > Baggage Files and add all the .GIF graphics files and both of the .JS JavaScript files from the unpacked package to the Baggage Files list. These files are now part of your project and the originals on the disk can be deleted if you want. - Help & Manual 3:
Open your project (make a backup first!!) and go to Project > Project Properties > HTML Export Layout > Topic Pages.
Help & Manual 4:
Open your project (make a backup first!!) and go to Project > Project Properties > HTML Help > Topic Pages. (Topic Pages is also available in the Browser-based Help section -- it doesn't matter where you access it.) - Help & Manual 3:
Select "Edit HTML template directly" in the Design Mode: field, then select the "Main" window type in the HTML Template for Window Type: field. (You must repeat the procedure for any other window types where you want to use these features.)
Help & Manual 4:
Select "Let me edit HTML code directly" then select the "Main" window type in the HTML Template for Window Type: field. (You must repeat the procedure for any other window types where you want to use these features.) - Both Versions:
Delete the entire contents of the editing window, i.e. the entire current template (you have made a backup, haven't you?) - Open topic_template.txt in a text editor and copy and paste the entire contents into the template editing window for Topic Pages > Main in Help & Manual.
- Click on Apply.
- Help & Manual 3 ONLY (Don't do this in H&M4!!):
Now go to Project > Project Properties > HTML Help Export > Extended .HHP settings and copy the following text into the Additional settings for the HHP file: window to include all the additonal files we are using in the .CHM output file:
Note: Leave out the [FILES] line if you already have one!Code: Select all
[FILES] ..\nonscroll.js ..\dropdown.js ..\button_main.gif ..\button_main_h.gif ..\button_prev.gif ..\button_prev_h.gif ..\button_prev_d.gif ..\button_next_h.gif ..\button_next.gif ..\button_next_d.gif ..\minus.gif ..\plus.gif
If you are using the package for browser-based HTML output in H&M3 you must also manually copy all the files on the list above to your HTML output directory -- H&M3 will not do this for you automatically. Again, this is NOT necessary in H&M4 because you have added the files to the Baggage section. They will be included in your project automatically there.
Using the expandable/collapsable sections feature:
See the tutorial included in the ..\samples\DHTML-Examples\ folder in the Help & Manual program directory. The information you need is in the chapter on "Expanding and Collapsing Sections". The only difference is that you don't need to include the basic JavaScript with the expanding and collapsing functions in every topic because that is handled by the template in this package, which references dropdown.js for every topic page automatically.
More information:
Non-scrolling headers without JavaScript:
Forum member John Smith has produced a nifty set of CSS styles that produce non-scrolling headers without JavaScript. This may require a little more manual tweaking than the solution included here but it has two major advantages: 1) It works in browser-based HTML as well as HTML Help, and 2) No JavaScript, so it works even if your users have JS turned off:
http://helpman.it-authoring.com/viewtopic.php?t=1433
This method does have a disadvantage, however: Since the size of the header is absolute rather than dynamic it depends on the font sizes in the headers always staying the same. As soon as you add additional lines to a header in any topic or change the header font size it will no longer work properly. Also, it may create display problems for users who have changed their standard browser font sizes .
Non-scrolling headers:
Same tutorial as the drop-down text feature (see above)
Icons and mouseover buttons in headers:
http://helpman.it-authoring.com/viewtopic.php?t=12
Span tags for defining link styles:
http://helpman.it-authoring.com/viewtopic.php?t=7
Advanced text decoration for links:
http://helpman.it-authoring.com/viewtopic.php?t=918
Getting rid of whitespace around headers :
http://helpman.it-authoring.com/viewtopic.php?t=739
Non-scrolling sections within pages:
http://helpman.it-authoring.com/viewtopic.php?t=930
Alternative expandable sections (for advanced users only):
http://helpman.it-authoring.com/viewtopic.php?t=2145