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

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 1

The articles in this series are:

This series of articles describes in detail how to convert several FrontPage ways of doing things to more standard and portable methods. In addition, they explain how some of the webbots work. Reading those explanations will probably give you a better understanding how to work with all webbots, even ones that aren't yet discussed here individually.

Introduction

Microsoft FrontPage 2003 is a big help for a beginning webmaster because it has simple WYSIWYG and fill-in-the-dialog-box "webbot" methods for doing things for which the HTML methods aren't obvious.

As it turns out, though,

It doesn't take long for the webbot methods to become constraining,
At least one of them (shared borders) is buggy and unpredictable,
Most of the HTML methods are reasonably simple once you know them,
Removing the webbots makes your site more portable into other web design programs such as Microsoft's Expression Web replacement for FrontPage, or Adobe Dreamweaver.
If you remove the right webbots, your site won't be dependent on the FrontPage Extensions.

FrontPage webbots are automated HTML code generators. There's no hidden magic. FrontPage manipulates the HTML in your documents, and that is something you can do yourself, with or without its help.

At least three of the FrontPage webbots, "Include Page", "Substitution", and "Table of Contents" (or "Outline"), which put text into a document at the time the file is saved, are useful and reliable, and there is no particular reason to remove them unless you plan to switch from FrontPage to another web design program or you want more flexibility than the webbot's automated methods provide.

However, there are good reasons to remove some of the other webbots from your site:

One, Shared Borders, is just plain bad, and should be avoided at all costs.
Some only work when your server has the FrontPage Extensions installed. The FPE's are very handy, but they are notorious for easily becoming corrupted. Once corrupted, they must be uninstalled and reinstalled, which empties all the site's folders that start with an _underscore. This causes your site to lose its themes, link bars, and shared borders, and they sometimes can only be fully restored by republishing the entire site from scratch, which you might not always be in the mood to do.
One feature, themes, is implemented as CSS, but the theme is stored in the FrontPage /_themes folder, which is one of the folders emptied by a FPE reinstall. You can stop this behavior, and get more control over your theme, if you move the theme into your own folder and take control of it away from FrontPage.

The procedures below require that you be comfortable working with HTML in FrontPage "Code View", and some steps will require that you use your own judgment, so you need to have sufficient experience for your judgment to be useful. Test each step on a single page first, to make sure it does what you expect, and proceed carefully. Most important, make a backup of your entire site before starting.

Removing FrontPage Shared Borders

Shared Borders are unstable. No website should use them. Even Microsoft itself tries to discourage their use by having support for them disabled by default in a new FrontPage installation. The last straw for me was when FrontPage spontaneously replaced all my shared border files with blank HTML files.

Shared borders should be replaced with "includes". There are several ways to do this. I will discuss replacing them with FrontPage included content webbots because a) that method stays within the inherent capabilities of FrontPage, and b) even if your ultimate goal is some other include method, the transition will less confusing if you do it in two steps, this one being the first. The second step I recommend is replacing FrontPage included content webbots with PHP includes. The method described there can also be used to convert to Apache Server Side Includes (SSI).

Step by step procedure

The FrontPage shared borders are stored in a folder called _borders. The first step for the conversion is:

1) Create a new folder in your site.

You could call it borders. Three rules about working with folders in FrontPage:

Never prefix any folder you create with an _underscore.
Never store your own files in an existing folder that starts with an _underscore.
Always have an up-to-date backup copy of your entire website.

FrontPage thinks that it, not you, owns any folder whose name starts with an underscore. It will manage the folder and its contents in whatever way it thinks is necessary. It may delete the folder or modify or delete its files at any time and without notifying you. The backup website copy is your insurance against unwelcome surprises.

2) Copy all the files from _borders to borders.

When you turn off shared borders, FrontPage will delete the files in /_borders, but you'll still have them, in your own /borders folder.

Read this Note before doing the copy:

If your border files contain no references to any other files in the _borders folder (which is probably the case), then you can copy them directly from \_borders to \borders in the FrontPage Folder List pane.

If the files do contain references to other files, or if you are unsure, you should use a roundabout copying method:

When you copy files in FrontPage, FrontPage automatically adjusts all hyperlinks so they continue to point to the correct targets. However, if you are also copying the target files to a new location, you don't want the hyperlinks automatically adjusted.

For example, if a file that is in \_borders refers to another file in \_borders, and you copy both files to the new \borders folder, the references in the first file will be adjusted so that they continue to point into \_borders as they did previously. That's not what you want. You want the hyperlinks to be left alone so they point to the new version of the target file in \borders.

The way to accomplish this is:

Go outside FrontPage to Windows Explorer,
Navigate to your website's old \_borders folder.
Copy all its files to a folder that is outside your website, like \My Documents.
Go back to FrontPage.
Click on your new \borders folder so it is highlighted in the Folder List pane.
Click File > Import...
Add File.
In the popup dialog, navigate to the folder that you copied the files to, select them, click Open, and in the next dialog box click OK to import them.

When files are copied this way, hyperlinks are not adjusted.

It can also work if you close FrontPage and then use Windows Explorer to copy the files directly from \_borders to \borders, but FrontPage does not always recognize that files copied that way are part of the website until FrontPage has been opened and closed, maybe more than once, after the copy. It is safest to use Import instead.

3) Convert your Top and Bottom borders to include files

To get an idea how this works, on one of your pages,

Open the page in Code view.
Place the cursor immediately to the right of the opening <body> tag.
Go to the menu item: Insert > Web Component > Included Content > Page. If the menu item is grayed, save the page first. It must not be in a modified state. If it still doesn't work, close the file and reopen it.
Click Finish
Click Browse
Navigate to your new borders folder, and select your TOP border (top.htm)
Click OK
(Notice that FrontPage has automatically adjusted the path as needed for the file where it is being included.)
Click OK again.
Use the same procedure to insert the BOTTOM border immediately before the </body> tag.

You will need to do this for all your pages. This sounds like a real pain, but you don't have to use that method for all the pages.

On the page you've just done, you can see what the result was. FrontPage inserted this:

Now that you have that text, you can copy it and use FrontPage's excellent Find and Replace feature to do whole batches of pages at once. I started at the top of my site and did an entire folder at a time.

The only trick is to make sure you get the correct relative path name on each one, such as

"borders/top.htm",
"../borders/top.htm",
"../../borders/top.htm", etc.

That's why it helps to do a whole folder at a time, because it will be the same for all the files in each folder. Open all the files in the folder, then use Find and Replace on "Open page(s)". Your find and replace strings will be something like this:

Find:

<body>

and Replace with:

Tip: to enter the line break in the Replace box, use Shift+Enter.

Here's what a page might look like after this procedure:

<p>Page content goes here</p>

</body>

The example shows an extra item that I found useful to put between the bottom border and the closing </body> tag: the copyright notice. It previously had been inside the shared bottom border. However, when it's inside a shared border, it shows the last date the border was changed, which is useless. Moving it out of the border file and into the page makes it show the date the page was changed.

A convenient placement for your Google Analytics code is inside the bottom border file (bottom.htm). In the example above, that would put it on the page above the copyright notice instead of just before the </body> tag as Google recommends, but it doesn't matter. It is near enough the bottom of the page that it works fine.

4) Move Left and Right border content into tables

The left and right borders are trickier to convert because you must essentially put all your page content into an HTML table that has the borders you want.

You'll still be able to use include files for the contents of the borders, but setting up the tables is a manual job that must be done on each page. It's not that complicated, though, once you have the table template you want to use.

Here's a hypothetical table template that could be used for the conversion. The <body> tag and the include webbots for all the borders are shown so you can see where things go in relation to each other:

<body>
<!--webbot bot="Include" U-Include="borders/top.htm" TAG="BODY" --> 

<table cellpadding="0" cellspacing="10" width="100%">
<!-- MSTableType="layout" --> 
    <tr> 
        <td valign="top" align="left" width="1%"> 

            <!--webbot bot="Include" U-Include="borders/left.htm" TAG="BODY" --> 

        </td> 
        <td valign="top" align="left" width="100%"> 

            Page content goes here. 

        </td> 
        <td valign="top" align="left" width="1%"> 

            <!--webbot bot="Include" U-Include="borders/right.htm" TAG="BODY" --> 

        </td> 
    </tr> 
</table> 

<!--webbot bot="Include" U-Include="borders/bottom.htm" TAG="BODY" --> 
</body>

To omit the left or right border, delete the <td></td> tags that define it, and everything between them.

The basic structure of an HTML table like the one above is:

<table><!-- MSTableType="layout" -->
<tr>
	<td>
	</td>
	
	<td>
	</td>
	
	<td>
	</td>
</tr>
</table>

Each <TR></TR> set defines a Table Row. This table has 1 row.
Each <TD></TD> defines a Table Data, an individual data cell within the row. This table has 3 TD's, and thus 3 columns (the left border, page content, and right border).
The HTML comment  determines how the table behaves in FrontPage Design View. When the mouse hovers over a border in the table, it becomes highlighted in green or blue. Clicking on the highlighted border displays width and height attributes and allows changing the size or position by dragging. If this behavior is useless to you or is a confusing nuisance, leave out the  code.

The other text inside the tags are properties. Explanations of some of the non-obvious ones above:

Table properties:

cellpadding="0" I don't want any space between the edges of the cells and the cell contents.
cellspacing="10" I do want 10 pixels separating adjacent cells from each other.
width="100%" The table will expand to fill the entire screen at any browser size.

Table Data properties for both border columns:

width="1%" If the border has no content, it will consume 1% of the screen width. Any actual content will be wider than that, which will cause the border (table cell) to expand to fit the content. A table row or cell always expands as needed to fully display its contents.

Table Data properties for the main content (middle) column:

width="100%" The middle (content) cell will attempt to expand to 100% the width of the table. However, it will be automatically shrunk by whatever amount is used by the border(s). The net effect is that the borders only take (at most) the width they require to fully display, and the center content always consumes the rest, to fill 100% of the screen width.

4a) The procedure for converting each page is:

First, create the template text for your table, similar to the above. Make it as complete as possible to save yourself typing. Store it somewhere that you can retrieve it repeatedly. Then...

Open the page.
Insert the table template text immediately after the closing ">" of the webbot code for your top border.
Select all the text of your page's content (everything that is now below the table, down to but not including the webbot code for your bottom border (if you have one) or the closing </body> tag).
Cut the text.
Paste it into the center column of the table so it replaces the text "Page content goes here."

Once you have added the code for your top and bottom borders, and added the tables to hold your left and right borders, you should now see duplicates of every border when you preview your pages.

5) Last step is to remove the FrontPage shared borders and leave only your own:

Go to Format > Shared Borders...
Clear the checkboxes for all borders,
Check Apply To All pages,
Click OK.

You have removed all your shared borders. Now when you preview your pages, you should only see one of each border.

The above steps probably left in the <head> section of your pages this line:

To remove this line from all the files in your site and also turn off FrontPage support for Shared Borders:

Click Tools > Page Options > Authoring
Clear the Shared Borders check box.
Click OK
If you have previously ever manually edited the <meta name="Microsoft Border"...> line in any of your files to customize the border settings, you'll need to hunt for each occurrence and remove the line from those pages manually.

Notes about include files

Now that your pages are converted, you can use a single common border on all pages, or have a library of borders you choose from, or customize the border of any page(s) however you want.
Anything you use on more than one page should be stored in its own file and included wherever you need it. Then you can modify it in just one place and the change will be propagated throughout the site. Examples of other uses besides page borders: code for Google Analytics, Google AdSense, other ads, and common menus and link bars.
After I first did this conversion, I wondered if there was a way to make a standard page template that would incorporate all these elements when I created a new page. There probably is, but there's no point looking for it:

To create a new page, I find an existing page that is similar to the one I want to create, then create "New from existing page" (or copy and paste it in the Folder List pane with Ctrl+C and Ctrl+V), and modify the copy to make the new page. It's much faster. I don't use templates for anything. Every page is a template.

Ask questions in the discussion forum.