Migrating a FrontPage Site to Expression Web

More and more hosting companies have dropped or are dropping support for FrontPage server extensions (FPSE). Perhaps it is time for those of you still using FrontPage to consider moving to a more standards compliant web editor like Expression Web. BEFORE you even consider the move, you should read Prerequisites for Using Microsoft Expression Web. After reading the article, you can then download a free copy of Expression Web 4 Free Versiona. Even though the file name includes trial, this is NOT a trial version. NOTE: As of June 2020, Microsoft has removed the download. You can still find the free download on various sites but make sure it is a reputable site and that you check the download with your virus and malware programs.

Once you have decided to make the move to Expression Web and have downloaded and installed the software, take some time to set it up before you start using it by using Tina Clarke's FREE Setting Up Expression Web E-Book. Make sure and download the one for the version of EW that YOU are using.

This article is a shortened version of SOME of what is included in Migrating from FrontPage to Expression EBook which contains instructions in much greater detail.

Preparation of your site

Step One: IMPORTANT!! Before you even think of opening your site in Expression Web, make sure you have made several good backups of your current site. That way you have something to revert back to if you make a major mistake. See  FrontPage 2002 Tutorials - How to Backup FrontPage by Tina Clarke.

Step Two: Clean up unwanted images, pages, and scripts. Over a period of time we tend to have images that are no longer in use, pages that are no longer needed, and perhaps, scripts we no longer are using. Now is the time to clean up this clutter!

You can clean up images you no longer use in one of two ways. Use the unlinked files reports OR use the hyperlinks tab from Site View. I prefer using the hyperlinks tab. Open the image folder and go down each file in the folder to check and see if it is linked to a page. If not, right click and mark Exclude from Publishing. NOTE: Images used within scripts will show as unlinked as well as images that may be stored on the site for use elsewhere. You will need to make a note of these images. Once you have completed checking all the images, you can move them to another folder for storage or delete them.

Next do the same thing with pages on your site. Are there pages that are no longer being used or copies of pages that you have revised and saved? Go through each of your pages and make sure they are still linked and provide relevant content for your site visitor. Check especially any page marked Exclude from Publishing. You can then delete the pages or move them to a new folder for storage. NOTE: For any pages you delete, that have already been indexed, you will need to create a 301 redirect so your site visitor will not get page not found if they happen to click on a search link.

Removing Unwanted FrontPage Features

If you are using FrontPage Themes or Shared Borders, these are best removed by using your FrontPage software rather than Expression Web.

Removing FrontPage Themes

How can you tell if you are using a Theme? You will see a line of code in the head section of your page that looks like <meta name="Microsoft Theme" content="aftrnoon 1011">

FrontPage 2003
- Open your website in FrontPage 2003.
- Select the menu item Format > Themes > the Theme Task Pane will open.
- Select the option No Theme >  Apply as default theme. You should receive a warning that any pages with an individual them will NOT be modified.

FrontPage 2000 and FrontPage 2002
- Open your website in FrontPage 2000 or 2002.
- Select the menu item Format > Themes.
- Select No Theme and make sure All Pages is selected
- Press the OK button and the themes will be removed.

FrontPage 98
- Open your website in FrontPage Explorer.
- Select View > Themes
- Select This Web Does Not Use Themes and press Apply.

Your FrontPage Theme can be replaced by using a Dynamic Web Template (DWT). For more information on this feature of Expression Web see:
Free Expression Web Dynamic Web Templates E-book

Removing FrontPage Shared Borders

How can you tell if you are using the Shared Borders feature? You will see a line of code in the head section of your page that looks like <meta name="Microsoft Border" content="tlrb"> which equals top, left, right, and bottom borders.

FrontPage 2003
- Open your website in FrontPage 2003.
- Open any page to make the Shared Borders menu selection available.
- Select Format > Shared Borders
- Uncheck each of the boxes and make sure All Pages is ticked.

FrontPage 2000 and FrontPage 2002
- Open your website in FrontPage 2000 or 2002.
- Select Format >  Shared Borders.
- Uncheck each of the boxes and make sure that All Pages is selected

FrontPage 98
- Open your website in FrontPage Explorer.
- Select Tools > Shared Borders.
- Select All Pages
- Uncheck each shared border
- Press the OK button

NOTE: If you no longer have FrontPage installed on your computer, you can use Expression Web to remove both the themes and shared borders BUT the process is easier if done through FrontPage.

Once you have removed the Shared Borders, they can be replaced with Design Time Includes or Server Side Includes.

Removing Themes and Shared Borders with Expression Web 1.0 or 2.0 or 3.0 or 4.0
- Open your website in Expression Web.
- With one of your pages open, select the Split View tab  at the bottom of the Editing Window.
- At top of the page, between the <head> </head> tags you should see something like the two lines of code shown below:
<meta name="Microsoft Theme" content="aftrnoon 1011">
<meta name="Microsoft Border" content="tlrb">

The two meta tags refer to the name of the theme, which in this case is called "aftrnoon 1011" and the shared borders you have enabled. In this case: top, left, right, and bottom.

- Select both meta tags shown above >  right click > press Control + H.  The 'Find and Replace' dialog box will appear with the code you highlighted in the 'Find what' pane. On the 'Replace with' pane make sure that it is empty of any text or code. NOTE: You can also use Copy and Paste to transer the code to the 'Find what:' pane.

-  Select 'All pages' under the Search Options > Find Where. Make sure 'Find in source code' is selected under the Advanced section on the right hand side. Then click the 'Replace All' button.

Rather than use any of the graphics associated with the canned themes, you might want to create your own background images for your new updated website. You can now delete the folders associated with both the themes and shared borders. If you have created any images for use with your theme, you may want to save them to an images folder within your website.

Removing FrontPage Folders

Some of the typical folders that are part of themes and shared borders include:
_borders
_fpclass
_private
_themes

NOTE: If you have been using themes and shared borders but these files do not display in the file list, you may not have changed the default settings to 'Show hidden files and Folders'. To turn on this feature, go to Site > Site Settings > Advanced tab and make sure  the 'Show hidden files and Folders' radio button is ticked under Options. In both Expression Web versions 3.0 and 4.0, this setting does not exist. In EW 3.0 and 4.0, make sure the 'Hide files and folders that begin with a underscore character ('_')' selection is NOT ticked, under Site > Site Settings > Advanced tab.

To delete the above listed folders, in 'Folder List View' select these folders as a group or individually > right click > Delete. Be careful that you do NOT delete any other folders by mistake as there is no Recycle Bin in Expression Web. Once you finish this, themes and shared borders will have been removed from your site. If these folders reappear, it is because somewhere in your site, you still have a page or pages with a them or shared border still attached.

Once you have finished these steps, you should Recalculate hyperlinks. You will find this feature under the Site menu in EW 3.0 and 4.0 and the Tools in EW 2.0 and 2.0.

Replacing Other FrontPage bots

Other FrontPage bots you may have used on your website can also be replaced.

If you have used the FrontPage Search Bot, replace it with a free Search feature. If you have a commercial site, you may prefer one of the Search engines that do not require Ads on your results page.  Some resources to help you replace this feature include:

• Search Boxes - Site Search Boxes
• Zoom Search and Expression Web

Remove any FrontPage Forms you may be using and replace them with Form scripts or generators. Some resources to help you replace this feature include:

• Working With Forms (many additional resources listed)

If you are using a very complicated form on your site, it may be worth saving and working to clean it up. You will then have the basics of the form and you can add whatever form script you choose to process it.

There really is no comparable replacement for the FrontPage Guestbook feature. You can do a Google search for "guestbooks" but I can not recommend any of them. You might wish to try adding a Blog rather than a Guestbook either as a separate domain or a subdomain of your site. You can post articles that refer back to your site in some way and your viewers can add comments. 

You FrontPage Photo Gallery can be replaced with a photo album generator. Two of the ones I can recommend are Web Album Generator and jAlbum. There is also a commercial add-in for Expression Web that will create a photo album, Ajatix Lightbox Add-In for Expression Web.

You can salvage both the images and thumbnails from your FrontPage Photo Gallery if you choose or just the images themselves.

The Table of Contents feature can be replaced with a Site Map. Delete the old Table of Contents page and create a new page named site-map.html or sitemap.html. You can either use a sitemap generator to create you new page or create it from scratch. A Good example of a site maps is:

• Any Expression Designs Sitemap

 As you can see on each of the above site maps, the title of the page is used for the anchor text, a title attribute (tag or screen tip) is included, and a short description for each link. You should use an unordered (bulleted) list. You should also implement a xml sitemap. You can generate either or both types of site maps by using:

• XML Sitemappers
• Sitemap Generators

Replace your FrontPage Hit Counters with either Google Analytics from Webmaster Tools, or use the stats from your site available thru your Control Panel on your hosting account. Both of these will give you much more information and be more reliable than the FP Hit Counter.

Cleanup procedures

Once you have completed the steps listed above you can begin the actual cleanup of your pages.

Step One: In all probability, your pages have either no doctype statement or an incomplete one. The default doctype for Expression Web is the XHTML transitional doctype and I would encourage you to use it. With Expression Web it is easy to maintain the XHTML rules because all you have to do is go to 'Code View' right click and hit 'Apply XML formatting rules'. If you want more information on the difference between HTML and XHTML see Differences Between HTML and XHTML

EXAMPLE:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

Step Two: Now you can clean your pages of any old left over FrontPage code.

• Select all of the content > Format > Remove Formatting (Ctrl + Shift + Z)
• Clear Styles under the Apply Styles Pane/Panel.
• From Code View > Right Click > Optimize HTML
• From Code View > Right Click > Reformat HTML
• If you have used Tables for layout and plan to move to a CSS based layout using div's, you can use Table > Convert Table to Text.
• Clean Code on Paste can also help you clean up your code.
• Expression Web Queries should be part of your cleanup arsenal.

There are other third party tools you can use during the cleanup process such as HTML Validator and Total Validator and the Web Developer Toolbar (available for Firefox, Chrome and Opera)  is one I cannot do without. I recommend you work in Split View so that you can see as you do the various cleanup procedures, what clean code looks like. You should make sure that each of your pages is written in standards compliant code and validates BEFORE you apply the new DWT.

Step Three: As you work on cleaning your pages, you should also be implementing semantic mark-up as well as simple SEO practices. Exactly what is Semantic HTML?

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation (look). Semantic HTML is processed by regular web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.

 Any graphic images you insert into your HTML code should make use of the Alt Attributes. If you have followed Tina's Setting Up Expression Web E-Book, you will be reminded to insert a short descriptive sentence about the picture, remember to use a full stop (period) at the end so that screen readers can use the tab key to tab through graphics if wanted.

Make use of the Title Attribute as you work with your hyperlinks. Expression Web makes this easy to do. As you insert your hyperlink, click the Screen Tip button and add an explanation of where the link is going and what it is about. This is especially import for your menu hyperlinks as they are by nature restricted to shorter keyword anchor text.

When it comes to Hyperlinks, make sure you use the Title Attribute (tag) that explains where the link is going and what its about, this is must specially be used on menus, as often a menu is necessarily restricted to a shorter keyword anchor text.

Although the keyword meta tag is no longer used by Google, you may want to use it anyway. The description meta tag should be used. Both of these appear in the <head> section of your page. They can be easily inserted by right clicking in Design View and select Page Properties. Make sure you also insert a Page Title on each of your pages. How often have you seen New Page 1 or Untitled at the tope of the browser window or on the Tab in some of the newer browsers. See What Is Search Engine Optimization - SEO? Take the time to check for any misspelled words and bad grammar on your pages. You should see a red squiggly line under any word that is misspelled.

Step Four: Site Reports contains a number of reports that can help you check things such as whether you have given each page a title or check for broken links

Implement a new template or DWT 

Once you have finished cleaning up your site code and making sure each of the pages validate, it is time to implement your new Dynamic Web Template (DWT).

You may choose to purchase a new DWT for your now standards compliant site. If you do so, make sure you understand how the template works and that it validates BEFORE you attach it to your pages. All templates are not created equal.

Tina's free Expression Web DWT E-book will give you all the information you need to know about creating and implementing an Expression Web DWT. If you are looking for some Free DWT's you can use on your site or use as a learning tool, here is a list of some that are available to you. All have heavily commented DWT's as well as external style sheets. You are free to edit the colors and images included.

• Expression Web Site Templates - follow the instructions for installing and working with this series of templates.
• Equal Height Columns Site Templates
• Content First Expression Web Site Templates - these are for intermediate to advanced users.
• Mobile Friendly Site Templates - these are for intermediate to advanced users.
• Expression Web DWT's by Pat Geary
• Expression Web Site Templates  by Pat Geary
• Mobile Friendly Templates by Pat Geary

Once you have finished your new design for your own DWT, get some feedback.  Check your color contrast as well as the colors in general. Make sure you also check that your design displays well in ALL browsers not just your default one. Once you are happy with your final look and are sure it works correctly, you can begin to attach the new DWT to your newly cleaned and well coded pages. The Free Expression Web DWT E-book will give you all of the information you need to do this.

This article just touches on the information you need to clean your FrontPage site and migrate to Expression Web. You will find lots more techniques and tips you can apply when Migrating from FrontPage to Expression Web.

Pat Geary of Expression Web Tutorials and Templates,
All Rights Reserved
Written January 2012
Revised April 2013
Updated December 2019