Tech Paper - Add Page to Table of Contents

Version 6

    Customize Online Help Files White Paper

     

    This page walks through adding your custom page to the table of contents.

    1. In the installed web help directory, open webtoc.html using HTML Help Workshop or Notepad. DO NOT use a text editor such as Microsoft Word. This will modify the HTML in ways you cannot imagine.
    2. Scroll down toward the bottom of the file. The beginning includes javascript and a style sheet that do not need to be edited. The portion you will edit looks something like this:
        
    <UL id="tocroot" class="toc">
        <li class="tbc" icon="-1" isnew="False"><a href="SilverlightOverview.html"><img class="icon"/><span class="nodetext">ArcFM Server Viewer for Silverlight</span></a>
        <ul class='tbc'>
        <li class="tbc" icon="11" isnew="False"><a href="Toolbar.html"><img class="icon"/><span class="nodetext">ArcFM Server Viewer Toolbar</span></a>
        <li class="tbc" icon="11" isnew="False"><a href="MapDisplay.html"><img class="icon"/><span class="nodetext">Map Display</span></a>
        <li class="tbc" icon="11" isnew="False"><a href="AttributeViewer10.html"><img class="icon"/><span class="nodetext">Attribute Viewer</span></a>
        <li class="tbc" icon="11" isnew="False"><a href="SearchTab.html"><img class="icon"/><span class="nodetext">Search Tab</span></a>
        <li class="tbc" icon="11" isnew="False"><a href="GraphicsTab.html"><img class="icon"/><span class="nodetext">Graphics Tab</span></a>
        <li class="tbc" icon="11" isnew="False"><a href="ToolsTab.html"><img class="icon"/><span class="nodetext">Tools Tab</span></a>
        </ul>
    </UL>

    TOC.png

    The <ul> tags indicate an unordered list (i.e., not numbered). Each <li> tag represents an item in the table of contents. In the example above The first <li> tag represents the "ArcFM Server Viewer for Silverlight" node in Figure 1. The nodes beneath it are indented using a second <ul> tag.

    1. Add the appropriate lines for your custom HTML files.

     

    Single Page

    If you're adding a single page under an existing node, you can copy an existing <li> tag and modify it to suit your needs. For example, I will copy the following line:

     

    <li class="tbc"  icon="11" isnew="False"><a href="ToolsTab.html">
    <img  class="icon"/><span class="nodetext">Tools Tab</span></a>

     

    I can modify the <a> tag to point to the correct HTML file and change the TOC entry between the <span> tags. It might look like this:

     

    <li class="tbc"  icon="11" isnew="False"><a href="Test.html"> 
    <img  class="icon"/><span class="nodetext">Test</span></a>

     

    New Section/Multiple Pages

    You may also wish to create a new section in the TOC to hold your custom HTML pages. In this case, you can use the sample HTML below and modify it to point to your custom pages.

     

    <li class="tbc" icon="-1"  isnew="False"><a  href="SilverlightOverview.html"><img  class="icon"/><span class="nodetext">ArcFM Server  Viewer for Silverlight</span></a>
      <ul class='tbc'>
      <li class="tbc"  icon="11" isnew="False"><a  href="Toolbar.html"><img class="icon"/><span  class="nodetext">ArcFM Server Viewer  Toolbar</span></a>
      </ul>

    In the example above, the first <li> tag is the node that contains the others. You can make this a simple header that doesn't link to a page by deleting the <a href…> tag and the closing </a> tag.

    Modify the <a> tags in each <li> line to point to your custom HTML pages. Modify the text between the <span> tags to change the node text visible in the TOC. So it might look something like this:

     

    <li class="tbc" icon="-1"  isnew="False"><a href="CustomOverview.html"><img  class="icon"/><span class="nodetext">Custom Pages</span></a>
      <ul class='tbc'>
      <li class="tbc"  icon="11" isnew="False"><a href="Test.html"><img  class="icon"/><span class="nodetext">Test</span></a>
      </ul>

    With all the changes discussed above, this is how the HTML looks now:

    <UL id="tocroot" class="toc">
    <li class="tbc" icon="-1"  isnew="False"><a  href="SilverlightOverview.html"><img  class="icon"/><span class="nodetext">ArcFM Server  Viewer for Silverlight</span></a>
      <ul class='tbc'>
      <li class="tbc"  icon="11" isnew="False"><a  href="Toolbar.html"><img class="icon"/><span class="nodetext">ArcFM Server Viewer Toolbar</span></a>
      <li class="tbc"  icon="11" isnew="False"><a href="MapDisplay.html"><img  class="icon"/><span class="nodetext">Map Display</span></a>
      <li class="tbc"  icon="11" isnew="False"><a  href="AttributeViewer10.html"><img class="icon"/><span class="nodetext">Attribute Viewer</span></a>
      <li class="tbc"  icon="11" isnew="False"><a  href="SearchTab.html"><img class="icon"/><span class="nodetext">Search Tab</span></a>
      <li class="tbc"  icon="11" isnew="False"><a  href="GraphicsTab.html"><img class="icon"/><span class="nodetext">Graphics Tab</span></a>
      <li class="tbc"  icon="11" isnew="False"><a  href="ToolsTab.html"><img class="icon"/><span class="nodetext">Tools Tab</span></a>
      <li class="tbc"  icon="11" isnew="False"><a  href="Test.html"><img class="icon"/><span class="nodetext">Test</span></a>
    </ul>
    <li class="tbc"  icon="-1" isnew="False"><a  href="CustomOverview.html"><img  class="icon"/><span class="nodetext">Custom  Pages</span></a>
      <ul class='tbc'>
      <li class="tbc"  icon="11" isnew="False"><a  href="Test.html"><img class="icon"/><span  class="nodetext">Test</span></a>
      </ul>

    EditedTOC.png

    1. Save and close webtoc.html