Blogging:

Monetize website:

Convert FrontPage 2003 webbot shared borders, link bars, and themes to include pages, HTML link bars, and CSS - Part 2

• 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

Introduction

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

What is a FrontPage navigation webbot?

Like the other FrontPage webbots, the Navigation Webbot (as seen in Code View) is merely an HTML comment in the code of a web page. It is only FrontPage that interprets the comment as a set of instructions. The text inside the comment specifies the navbar's properties: whether it is for vertical or horizontal use, whether the links will be text or graphical, which types of pages will be included (children, siblings, etc.), whether it will include a link to the site's Home page, and whether an Up link should be calculated based on the Navigation structure defined in the Web Site > Navigation pane.

Also like the other FrontPage webbots, the Properties dialog you see in Design View is just a "user-friendly" interface to the webbot text you saw in Code View. There's no hidden magic. The Properties translate directly to text, and vice versa.

Also like the other FrontPage webbots, the end result of a navbar webbot is HTML (plus, in this case, some JavaScript) in the code of a web page. FrontPage creates the HTML as it saves the file, similar to what is described at How Webbot Includes Work: The original webbot tag is converted to two webbot tags, with the generated HTML code inserted between them. You can see the HTML when you open the page in Notepad instead of in FrontPage.

Advantages of converting navbars to plain HTML

1. Navbars are one of the features corrupted by a FrontPage Extensions uninstall and reinstall. You will no longer have to fear that your navbars could become corrupted or fail to be displayed.
2. Your non-webbot navbars will easily import to other web design programs like Expression Web and Dreamweaver.
3. You will no longer be dependent on your site's Navigation structure. If you want a page to be included in the navbars of two, three, or more other pages, you can do it. If you want to make special exceptions, or create custom link bars with a weird assortment of page links in them, you can do that, too.
4. If you remove the navigation webbots and also remove any Table of Contents (Outline) webbots, you can abandon the Navigation pane entirely, and no longer have to keep it updated. This is an advantage because although I've never seen the Navigation pane become corrupted, if it does happen, it must be manually rebuilt, entirely from scratch, one page at a time.

Disadvantages of converting navbars to plain HTML

1. Currently, whenever you add or delete site pages or rearrange the Navigation structure, FrontPage automatically recalculates every affected navbar, based on its individual properties. It adds or deletes links as needed. If new button images are required, it automatically creates them in the correct size using your theme's font and colors. You might have found these to be very convenient features, and you will lose all of them. Nothing will be automated anymore. If you want a page added to or deleted from your navbars, you must do it manually in the HTML source code. If you want a new button, you create it yourself (except there's a workaround for that at the end of this article).
2. As a result, to create and work with your replacement navbars, you will need to learn at least a small amount of HTML and become comfortable working in Code View. (The walkthrough below will help understand what an HTML navbar consists of.)
3. If you want to store your navbars in their own files and include them into the pages where they're needed, you'll additionally need to learn how to use FrontPage Included Content webbots or, better, another type of include method such as PHP, ASP, or (only as a last resort) Apache SSI.

To close with a technical point, as you might have inferred, webbot navbars actually are already HTML. In "webbot" form, they are HTML comments. In "saved" form, they are HTML+JavaScript. When you "convert" them, what you're really doing is taking control of the code (and the image files) away from FrontPage.

How to convert webbot navbars to HTML

1) Create new folders in your website

For each page that participates in a navigation link bar, FrontPage creates a set of button images that it stores in folders named _derived.

Search through your entire site. In every directory where there is a _derived folder, create your own folder named derived, without the underscore, and (in the FrontPage Folder List pane) copy all files from _derived to derived. You might wind up using only a few of these image files, but it's best to save them all in case you want to use others later.

If FrontPage ever deletes the _derived folders or the files in them, you'll still have them in your derived folders.

2) Identify all the pages where you use webbot navbars

The likely locations are in your borders folder (formerly your shared borders, if you have converted them as described in the Part 1 article, above), and any other pages where you created custom link bars.

3) Do these steps for each webbot navigation bar

1. Use Notepad, not FrontPage, to open the page. In Notepad, you see the additional HTML code created by the webbot. It is between the <webbot> tags for the link bar. Copy that code out of Notepad (without the <webbot> tags). Close the file in Notepad without modifying it.
    
2. Go back to that page in FrontPage Code View and locate the "<webbot>" tag for that link bar. Delete the <webbot> tag and replace it with the code you copied from Notepad.
    
3. Reformat the code to make it intelligible, because it needs editing. The formatting used in the examples below can serve as a guide.
    
4. Revise each image reference so it points to your own copied images instead of FrontPage's. For example, the copied code refers to files in the "_derived" folder. Change those to point to your own images, which are in "derived".
    
5. Edit the code to remove whatever you don't need or want. I was able to remove a lot of code.

I consider it desirable to remove the JavaScript bloat that FP puts in navbar code. All it does is change the color of a button when the mouse pointer hovers over it.

Here is some FrontPage navbar code from my site, with the parts I removed in red:

This was the original webbot code:

<!--webbot bot="Navigation" s-orientation="horizontal" s-rendering="graphics" s-type="siblings" b-include-home="FALSE" b-include-up="FALSE" -->

Replacing that line with the code copied from Notepad resulted in this (after reformatting it):

<script language="JavaScript"><!--
MSFPhover =
(((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion) >= 3 )) ||
((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt(navigator.appVersion) >= 4 )));
function MSFPpreload(img)
{
var a=new Image(); a.src=img; return a;
}
// --></script>

<script language="JavaScript"><!--
if(MSFPhover) { MSFPnav1n=MSFPpreload("_derived/rectext02.htm_cmp_myjournal1010_hbtn.gif"); MSFPnav1h=MSFPpreload("_derived/rectext02.htm_cmp_myjournal1010_hbtn_a.gif"); }
// --></script>

<a href="rectext02.htm" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav1'].src=MSFPnav1h.src" onmouseout="if(MSFPhover) document['MSFPnav1'].src=MSFPnav1n.src">
<img src="_derived/rectext02.htm_cmp_myjournal1010_hbtn.gif" width="144" height="21" border="0" alt="A-Ba" align="middle" name="MSFPnav1"></a>

<script language="JavaScript"><!--
if(MSFPhover) { MSFPnav2n=MSFPpreload("_derived/rectext03.htm_cmp_myjournal1010_hbtn.gif"); MSFPnav2h=MSFPpreload("_derived/rectext03.htm_cmp_myjournal1010_hbtn_a.gif"); }
// --></script>

<a href="rectext03.htm" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav2'].src=MSFPnav2h.src" onmouseout="if(MSFPhover) document['MSFPnav2'].src=MSFPnav2n.src">
<img src="_derived/rectext03.htm_cmp_myjournal1010_hbtn.gif" width="144" height="21" border="0" alt="Bb-Bn" align="middle" name="MSFPnav2"></a>

After removing all the code in red, the end result is navbar code that looks like this:

<a href="rectext02.htm">
<img src="derived/rectext02.htm_cmp_myjournal1010_hbtn.gif" width="144" height="21" border="0" alt="A-Ba" align="middle" name="MSFPnav1"></a>

<a href="rectext03.htm">
<img src="derived/rectext03.htm_cmp_myjournal1010_hbtn.gif" width="144" height="21" border="0" alt="Bb-Bn" align="middle" name="MSFPnav2"></a>

A lot better, don't you think?

The <a> tag defines an "anchor" (hyperlink). Its href property defines the target page that the link goes to. The <img> tag, because it is between <a> and </a>, specifies that the image object is what the user clicks on to follow the hyperlink. And that, in essence, is what a graphical or button navbar is. This is a navbar with two buttons.

It can easily be converted to a plain text navbar:

<a href="rectext02.htm">Go to LP Records Listing, Page 2</a>
<a href="rectext03.htm">Go to LP Records Listing, Page 3</a>

All I did was remove the <img> tags and replace them with text between <a> and </a>. Now the text is the object that the user clicks on to follow the hyperlinks. This is the essence of a text navbar. This is a navbar with two text links.

Webbot tips

A) How to "trick" FrontPage into creating navbar images for you

On my site, I wanted new navbar buttons for pages that didn't already have buttons.

1. I made a copy of a backup copy of my website, to make a third, temporary, copy.
2. Opening the temporary copy in FrontPage, I moved pages around in the navigation structure so they would be included in the global link bar. This caused FrontPage to create the needed buttons for them.
3. You could also make fake pages with names for which you want buttons and add them to the site's Navigation hierarchy so FrontPage creates those buttons for you, too.
4. Then I copied all the new buttons from the /_derived folders in the temp website into the /derived folders where I needed them in my real website.

B) How to "trick" other FrontPage webbots into writing HTML for you

I don't mind FrontPage's automated methods. I just don't like being locked into them. If I ever need a custom link bar...

Well, the end result above turned out to be so simple, I can now create it easily. But if I couldn't figure out how, I'd go ahead and create a <webbot> link bar, then do the procedure above to convert it. That's my plan for any webbot method for which I don't know the corresponding HTML: let the webbot do it, then get rid of the webbot and keep the HTML it created.

Additional note 1/2/2008:

Last week, I changed the top site-wide navbars from button links to plain text links. It saves about 15KB per page, creates fewer server requests per page load, and I like it better. There are still some examples of manually created button navbars on the pages that start at LP collection plain text database / tips for searching for classical music on the internet. Use View Source to see the code used.

The next article is Part 3 - Converting a FrontPage theme to CSS

Need help? Ask in the forum.