25 Years of Programming
An open source source for C, C++, OWL, BASIC, MDB, XLS, DOT, and more...

Home Projects Sitemap Search Blog Forum+Chat About Us Privacy Terms of Use Feedback FAQ Images Services Payments Humor Music

Language translation
by Google is available
when JavaScript enabled.
Google Translate
is an alternative.

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
Part 5 - Converting FrontPage forms to use the NMS FormMail handler script

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

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.
Your non-webbot navbars will easily import to other web design programs like Expression Web and Dreamweaver.
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 an unusual assortment of page links in them, you can do that, too.
If you remove the navigation webbots and also remove all 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

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 link or button added to or deleted from your navbars, you must do it manually in the HTML source code. If you want a new button, you have to create it yourself (except there's a workaround for that at the end of this article).
As a result, to create and work with your replacement navbars, you will need to get some practice working with HTML in Code View, until you are comfortable with it. The walkthrough below will help understand what an HTML navbar consists of.
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 copy 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.

If you can't find the _derived folders:

These are hidden folders. Sometimes they show in the Folder List pane, and sometimes they mysteriously don't. I haven't found a way to force them to appear.

If they're not showing for you, you can do the copy in Windows Explorer. If they don't show there, either, go to Windows Explorer > Tools > Folder Options > View, and set "Show hidden files and folders" = CHECKED.

You will see that each _derived folder has a subfolder called _vti_cnf. When you copy the files from _derived to derived, don't copy the subfolder or its contents.

2) Identify all the pages where you use webbot navbars

The likely locations are:

a) On individual pages where you have created custom link bars.

These will be relatively straightforward to convert, using the procedure in Section 3) below. If you have any of these, do them first so you become familiar with the procedure and with the HTML code.

b) In "included content" files such as top, bottom, left, and right borders.

The conversion procedure for these is more complicated. The reason is that navigation webbots refer to the site's Navigation structure to determine which pages are global, which pages are siblings of each other, and which pages are children of other pages.

When the webbot is in an include file, none of that information is applicable to the include file itself because it doesn't participate in the site's navigation structure. Therefore, when the include file is saved, no HTML navbar code is generated, and there is no code to copy as described in the steps of Section 3) below.

When a page that "includes the included file" is saved, the navigation webbots do generate and insert HTML navbar code, but the code generated is specifically calculated based on that page's place in the Navigation structure. If you use an include file to include the same webbot (for our example, we'll assume it is an s-type="children" webbot) into 1000 different pages, you will wind up with 1000 different navbars, a different one on every page, because every page has different children.

Therefore, the bad news is that you cannot craft a single block of HTML navbar code and reuse it in all 1000 pages. Each page must have its own code.

The good news is that each page does already have its own unique navbar code, calculated by FrontPage, in it. You can view it by opening the page (not the border file or include file) in Notepad.

When viewing the page, you will discover that the code does not have all of the webbot code that you'd expect to find. The content of the "included page" is indeed between  tags as it usually is, but the code for each navbar is not contained inside its own  tags as it usually is. It is "loose" on the page, undelimited by anything. That is not much of a hindrance once you know what the code looks like, but if you are trying to use webbot tags to locate the code at first, you should be aware that there won't be any.

If you need to convert webbot navigation bars that are within borders or include files, read Section 3) for its background information, but then use the method in Section 4).

3) Do these steps for each webbot navigation bar

Use Notepad, not FrontPage, to open the page.
Find the HTML code for the link bar. It is between two tags that look similar to this:



Select and copy all the HTML code here between the tags, everything highlighted in green. The tags might not be on lines by themselves. Be sure to get everything from the end of the upper tag to the start of the lower tag.
After selecting and copying the code, close the file in Notepad without modifying it.
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.
Reformat the code to make it intelligible, because it needs editing. The formatting used in the examples below can serve as a guide.
Revise each image reference so it points to your own copied images instead of FrontPage's. That is, the copied code refers to files in the "_derived" folder. Change those to point to your own images, which are in "derived".
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:

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

After removing all the code in red, the end result is navbar code that looks like this. This is a navbar with two buttons:

A lot better, don't you think? Here is one section with its parts color coded:

The pair of <a></a> tags defines an "anchor" (hyperlink). Its href property tells you what page the link will go to when it is clicked. Whatever is between <a> and </a> is the object the user clicks on to follow the hyperlink. In this case, it is the image defined by the <img> tag. The image's src= property is the filename of the image. You can see that I changed it to point to the image in the derived folder rather than _derived.

This can easily be converted to a plain text navbar. Without the clutter of the code for the image, you can see that it is fairly simple:

<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.

As an exercise, can you see how I would add another link to this bar, one that goes to rectext04.htm? I would copy the second line, paste it underneath, and in two places change 3 to 4. That's all!

Simply put, a navigation link is just a plain old fashioned hyperlink, and a navigation "bar", whether it is text or graphical, is several of those hyperlinks next to each other or one above the other.

4) Converting navigation bars inside "include" files

Each page that gets its navbar from an include file does already have its navbar code embedded in it, when it is viewed with Notepad. The problem is that whenever the file is opened and saved, FrontPage reprocesses the include file and recalculates the navbars inside it. We must stop it from doing that, but we must do it in a way that preserves the webbot navbar code which FrontPage has already generated for us.

The way to do that is to delete all the webbot tags which surround the text we want to keep, in every file.

This can be done with Find and Replace using regular expressions based on the ones from Walkthrough of a Regular Expressions Find and Replace.

This thread in our forum also has some details not repeated here.

a) Demonstration how the method works, on ONE page, manually

Included content webbot tags look like this when they are viewed with Notepad. It is these tags we are going to remove:

The text of top.htm is here. If top.htm contains a navigation webbot, the HTML for the navbar is here, too, but it doesn't have its own webbot tags surrounding it as it usually would.

To delete these tags:

Choose one of your "real" pages (a page that includes the include page, not an include page itself) and open it in Notepad.
Find the opening webbot tag (similar to the first line above) and delete it. It might not be on a line by itself. Be careful to delete only the tag, shown in yellow above. Don't delete anything else that might be on the same line with it.
Find the closing webbot tag (similar to the second line above) and delete it. As before, be careful to delete only the tag, and not anything next to it.
Save and close the page.
Now preview it. It should still have its navbars, just as before.
When you open the page in FrontPage Code View, you'll see that the file now contains embedded in it all the text that used to come from the include file, including the HTML navbar code. By deleting the webbot tags, you transformed these items into static text in the source code of the page. FrontPage no longer has control over this text, either by its included-content mechanism or by its navigation webbot mechanism. You are in complete control of this code.

To complete the conversion, do that procedure on every page.

On a small site, you can do it manually without too much trouble.

On a large site, you need an automated method, but it introduces complications that make it necessary to use regular expressions for the Find and Replace.

b) Remove a pair of webbot tags from ALL pages in a website, automated

Make a complete backup copy of your site before you do this because if it doesn't work, it will make a mess of the site and you will have to revert to the backup. You cannot "undo" the steps below.

Do the following procedure once for every include file that you need to replace. For example, if you have a top.htm border file with a Navigation webbot in it, and also a left.htm border file with a Navigation webbot in it, do the procedure twice, once for each file.

Open in Notepad one of your pages that gets its navbar by including into itself the external include file that actually has the navbar webbot in it.
In that file, find the webbot code corresponding to the first yellow webbot line in the example in Section a) above. Its format should be exactly the same as above, except for the filename. It should have "startspan" in it.
Copy and save that line into a Notepad file somewhere else on your computer (not in FrontPage).
In FrontPage, close ALL files, so none are open in Design View or Code View.
Use Ctrl+H to launch Find and Replace.
Find where = All pages
Direction = (grayed out)
Advanced =
    Regular expressions CHECKED.
    Find in source code CHECKED.
    All others cleared.

Copy the text below so you can paste it into the Find what box. However, you need to customize it first:

Note that the example below searches for instances of "includes/top.htm".
In the opening webbot tag text that you saved from Step 3 above, locate and copy the filename, the part inside the quotes after U-Include=. If the filename has a path in front of it (such as includes/ below), copy that, too, but if there are leading "../" in the path, leave all of those out. For example:

If your webbot says: U-Include="../../includes/top.htm",
You copy and paste only the part in green.
Now paste the copied text to replace the green text in the example below.
Then make sure to put a backslash before the dot in the filename, same as in the example below. If there is more than one dot, put a backslash before each of them.
Copy and paste your text into Find What.

{.@\n(.@\n)@(.@)}

In the Replace with box, put just two characters:

This Find and Replace will locate the opening and closing webbot tags, save the text that is between them, strip off the webbot tags, and paste the saved text back into the page.

If you have thousands of pages, each Find and Replace may take several minutes. When it finishes, it might turn out useful for later reference if you make note of how many replace operations were done.

Change all _derived/ folder references to derived/

The next step is to find all locations where the source code refers to a _derived/ folder and change it to point to derived/ instead, as discussed earlier in Section 3).

The most straightforward way to do this is with a global Find and Replace, searching for every instance of _derived/ in the source code and changing it to derived/. First determine whether any page of your site uses the text _derived/ for any purpose other than as a path to a navbar image. It probably doesn't, but try to be sure.

If you are able to use a simple Find and Replace for this operation, here are the settings:

Find where = All pages
Direction = (grayed)
Advanced = Match case CHECKED, Find in source code CHECKED, all others cleared.
Find what = _derived/
Replace with = derived/

If you are not able to use the one simple _derived/derived replacement, you'll need to do a series of Find and Replace, using more specific search terms such as full or partial names of individual files whose paths start with _derived/, etc., so you only replace the correct instances of _derived/ and leave the others alone.

When finished, test some pages to make sure they all have their navbars and have survived the procedure without getting corrupted.

Now that you are done, each individual page of your site contains embedded in it the full code that it previously got from the external include file. Therefore, the external include file is no longer being used for anything. It is now ok to delete it unless the next paragraph applies to you.

As a side-effect of this conversion, your pages now also contain all the other text (non-webbot code) that it previously got from the external include file. If you would prefer to put that code back into a shared include file, you can do that with a new set of global Find and Replace operations. How to do that is beyond the scope of this article.

You might also be able to put some of the HTML navbar code back into include files. If you can find groups of pages whose navbar code is exactly identical, you can pull that code out into a common include file.

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.

I made a copy of a backup copy of my website, to make a third, temporary, copy.
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.
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.
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.