Convert FrontPage 2003 webbots to plain HTML and CSS - Part 4

• Part 1 - Removing Shared Borders
• Part 2 - Converting webbot link bars to HTML link bars
• Part 3 - Converting a FrontPage theme to CSS
• Part 4 - Converting a Table of Contents web component (Outline webbot) to HTML
• Part 5 - Converting FrontPage forms to use the NMS FormMail handler script

The reasons these conversions can be worth doing are given in the Introduction for this series of articles, which is in Part 1 (see above).

How to convert a Table of Contents webbot component to HTML

You can convert a FrontPage Table of Contents webbot to a plain HTML list of hyperlinks to the files in your site.

The advantage of doing the conversion is that it gives you control over which pages are shown (or not), what text is displayed for each link (the webbot uses the page titles), and how the list is organized and formatted.

The conversion provides no advantage with respect to the FrontPage Extensions because the Table of Contents (or Outline) webbot does not require them, anyway. It is one of the webbots that performs its function while you are working in FrontPage on your local copy of the site. On your server, the page is just static HTML text.

The disadvantage of doing the conversion is that the list won't be automatically regenerated or updated anymore. From now on, anytime you create a new page that you want to appear in the TOC, you must add it yourself, but it's not difficult to do.

1) Find all the pages where you use Table of Contents webbots

Find (Ctrl+F): All pages, In source code, for: <!--webbot bot="Outline"

2) Do these steps for each Table of Contents webbot

This is one of the situations where the text in the file as viewed by Notepad is different from what you see when you look at it in FrontPage Code View.

In similar situations in previous articles, we have gone to Notepad, retrieved the HTML code from there, and then used that text to replace the webbot code in FrontPage. Here, instead, we can use a simpler method: just edit the code in Notepad. All we need to do is remove the webbot tags.

1. Use Notepad to open the page. The code that the webbot created is between two tags that look like this:
   
   <!--webbot bot="Outline" U-URL="index.htm" B-Aggressive-Trimming="TRUE" B-Show-Orphans="FALSE" B-Manual-Recalc="TRUE" I-Heading="2" TAG="BODY" startspan -->
   
   The HTML code for the table of contents is here. Don't delete this code.
   
   <!--webbot bot="Outline" i-checksum="35238" endspan -->
    
2. Delete each webbot tag, including its opening < and closing > (highlighted in yellow above), being careful not to delete anything else.
    
3. Save the file and close Notepad.
    
4. Now open the file in Frontpage Code View. You will discover that all the HTML code is on one line which is so long that FrontPage won't even display it all.
    
5. Right-click anywhere in the text of the page, and then click Reformat HTML (near the bottom of the list).
    
6. You will see that the TOC is structured as a set of nested "unordered lists". There is a top-level list (<ul>) which has list items within it (as <li> tags), but some of its list items are themselves unordered lists. The higher-level list is not closed with a </ul> tag until all of its list items are finished, including the ones that are themselves unordered lists, closed with their own </ul> tags. You can make this somewhat more clear if you do a global Find and Replace to insert a line break before each <ul> tag, as follows:
   
   In the Find box, enter: <ul>
   In the Replace With box, type Shift+Enter (which enters a line break), and then <ul>. Replace in the Current page, In source code, Replace All.
   
   This will put all the <ul> tags on their own lines.
    
7. When adding items later to the Table of Contents, it is important not to corrupt its nested list structure. Alternatively, you could unravel the existing nested unordered list structure and create your own more flexible one in its place, though the process could be rather tedious. I haven't bothered to do that.
    
8. You can insert HTML line breaks (<br>) at various locations to break up the list into sections. You can see how I did that on this site's Sitemap (created using the process above) by using View Source to view the HTML code. It basically involves inserting <br>&nbsp; between the </a> and </li> tags wherever you want a break, like this:
   
   </a><br>&nbsp;</li>
    

Hint:

If you want a Table of Contents (sitemap) for your site, but don't already have one, you can use this method to simplify its creation. Use Frontpage's automated methods to do most of the work, then get rid of the webbot and keep the HTML it created:

1. Create the web page for your Table of Contents.
2. In Design View, put the cursor where you want the TOC to begin.
3. Click Insert > Web Component > Table of Contents > For This Web Site > Finish. In the dialog box, select the options you want, and click OK.
4. FrontPage will create the Table of Contents for you.
5. Follow the steps on this page to turn it into a plain HTML Table of Contents.

Assistance is available in the forum.