Migrating from FrontPage to Expression Web

Microsoft MVP - Expression Web 2003 - 2013
Published:
Updated:
Expression Web 4.0 was retired in 2013 and has now come to the end of the Fixed lifecycle product support. The free Expression Web download from Microsoft is now no longer officially available (June 2020). If you have an older version of Expression Web or FrontPage you might like to migrate from FrontPage to Expression Web.  

Take the plunge and and cut down your maintenance times so you can spend more on content editing instead. Note: Microsoft still has the free product SharePoint Designer 2013 from Microsoft.

The article will cover the following topics:

  What should you do to prepare your site?
  How to remove unwanted FrontPage features
  Cleanup Procedures
  Implement a new template or DWT

What should you do to prepare your site?

  Backup your site   Setup Expression Web   Clear out clutter - images pages and scripts
1) First and most important of all MAKE A BACKUP, within FrontPage
I suggest three backups. One to keep in the original, one to work on and one for experiments. Just publish your site to new empty web giving it a new name each of the three times.

2) Open up Expression Web and execute the set up process. The Free Setting up Expression Web Ebook tells you what to do for your Expression Web version. This gives you the ground work to help you in a variety of ways, and is absolutely essential for newbie's.

3) Removing unwanted images, pages and files reduces the amount of clutter you have to clean up.

Clean up images that you no longer use.  You can do this either in Reports or checking if they are connected to anything via the Hyperlinks View in conjunction with the Folder list.

NOTE: Images within scripts will show as not linked, usually there are not many scripts implemented within a site so its fairly easy to remember which graphics those are and remember not to delete them.

Review the site content thoroughly. Are there any pages you no longer need that you marked don't publish? Are there actually pages in use that you don't want or wish to merge? With the latter pages, for the needs of SEO (search engine optimization) you will need to make a note of them and create a 301 redirect either to another page or your homepage so that you don't lose the ranking of that page, you can do this using .HTACCESS if your web site is hosted on a Unix server.

How to remove unwanted FrontPage features

This is best done with FrontPage itself, it will save much time and effort. If you have a FrontPage Theme installed.

Removing FrontPage Themes

FrontPage 98 - Themes
1) Open FrontPage Explorer and the website you want to work on.
2) Go to the menu item View then Themes
3) Select 'This Web Does Not Use Themes' and press Apply.

FrontPage 2000 and FrontPage 2002 - Themes
1) Open FrontPage 2000 or 2002 and the website you want to work on.
2) Go to the menu item Format then Themes
3) Select 'No Theme' and make sure 'All Pages' is selected
4) Press the OK button and the themes will be removed.

FrontPage 2003 -Themes
1) Open FrontPage 2003 and the website you want to work on.
2) Go to the menu item Format then Themes and the Theme Task Pane will open
3) Select the option No Theme then Apply as default theme. This brings up the warning that individually themes pages will not be modified.

How to remove FrontPage Borders

FrontPage 98 - Shared Borders
1) Open FrontPage Explorer and the website you want to work on.
2) Go to the menu item Tools then Shared Borders
3) Select All Pages
4) Uncheck each shared border
5) Press the OK button

FrontPage 2000 and FrontPage 2002 - Borders
1) Open FrontPage 2000 or 2002 and the website you want to work on.
2) Go to them menu item Format then Shared Borders
3) Uncheck each box and make sure that 'All Pages' is selected

FrontPage 2003 - Borders
1) Open FrontPage 2003 and the website you want to work on.
2) Open any page to non-grey the Shared Borders menu selection
3) Go to the menu item Format then Shared Borders
4) Uncheck each box and make sure 'All Pages' is ticked.

Removing Themes and Shared Borders with Expression Web 1.0 or 2.0 or 3.0
1) Open Expression web and select your website
2) Open one of the pages within your website and use the 'Split View' at the bottom of the 'Editing Window'.
3) Scroll to the top of the page and between  the <head> </head> tags you should see something similar to the following two meta tags.
<meta name="Microsoft Theme" content="cypress 1111, default">
<meta name="Microsoft Border" content="tlb, default">

These meta tags might refer to the name of the theme, which here is called "cypress 1111, default". Also it might include the shared borders you have enabled, it will show which borders you have enabled in this case "tlb, default".
t = top
l = left
r = right
b = bottom

How to remove Themes, Shared borders and Navigation Bars
1) Select both meta tags as listed above and right click and press copy. Press <Control + H>  and the 'Find and Replace' Dialog box will appear.  If your copy selection does not appear in the 'Find' pane, place the cursor within and right click and press 'Paste', overwriting any other text that might be there. On the 'Replace' pane make sure that it is empty of any text or code.

2) Select 'All pages' under the Search Options  > Find Where: and make sure  'Find in source code' is selected under the Advanced section on the right. Then click the 'Replace All' button.

Now unless you have a craving for a background used in a theme which I do not recommend this unless you made the graphic yourself or know it to be unique. You can now delete the left over folders associated with the themes shared borders and navigation bots. This might also include hover buttons class files too. However if you DO have custom graphics that are unique to you, merely save them into your images folder for later use.

How to remove FrontPage Folders

Typical folders that you might see are:
_borders
_fpclass
_overlay
_private
_themes

NOTE: If you cannot see these, then you may have turned off 'Show hidden files and Folders', which is off by default.
Go to Site - Site Settings - Advanced Tab and make sure the 'Show hidden files and Folders' radio button is ticked under Options. (EW 3.0 - This setting does not exist in EW 3.0, however make sure the 'Hide files and folders that begin with a underscore character ('_')' selection is NOT ticked, under the same location as above.)
 
In 'Folder List View' select these folders by holding down the shift  key and selecting the first folder, then still holding the key down, select the last one you wish to delete inline. If they are not inline the select them individually using the control key, press it down and click each individual folder you wish to remove. Then right click and press Delete.

All vestiges of themes shared borders and navigation bots will now have been removed from your website.

Recalculate hyperlinks which will be under Site or Tools depending on your version.

There will be other FrontPage bots that you may have used. Don't worry a replacement can be found for all of them.

Remove Themes  - Replace with DWT (Dynamic Web Template)
Free Expression Web Dynamic Web Templates Ebook

Remove Shared borders - Replace with Page Includes or SSI (Server Side Includes) used for menus within a dwt. Expression Web Page Includes

Remove Search Bot - Replace with a new free search solution Google and FreeFind amongst others. If you can, make the file name exactly the same as the old one, so that you will not lose standing for that page in the search engines.  

Remove FrontPage Forms - Replace with Form scripts and generators. If you have a very complicated form then it might be worth saving this and working to clean it up and use it with a script instead. There are free form scripts such as:
Reusable Forms - Using PHP and Bootstrap
Free Contact Form - Requires PHP

You can easily build your forms with the Accessible form builder too.

Remove Guest book - Replace with a Blog. Delete the page and institute a 301 redirect to the homepage of your new blog. If you are not on a flavour of windows server that allows this or Unix, then delete the page of content and put a normal link (do not insert a redirect meta) on the page with the page title of the page your redirecting to select it and insert a full link and save the page. Make sure you change the link in your sitemap and menus, to the new location. You can Launch a WordPress blog or there are other free blogging formats like Blogger

Remove FrontPage Photogallery - Replace with Web album generators. All that you need to salvage from a FrontPage Photogallery, are the photo's. When you made your PhotoGallery, if you selected a new named folder or choose the images folder when asked to save the images within FrontPage, then that is where your photos will be within the web. If you saved them by default to the root then the large files will be found there. There will also be a folder called photogallery which will have a further folder called photo00022245 (The numbered part could be any numbers) this is where you will find your thumbnails.

If your larger images are within the root, make a folder and name it with the keyword(s) of what the gallery will be about and drag your larger photos within it. Then rename the folder photo00022245 to the name of the main folder lets call it for example big-red-flowers and with thumbnails at the end so it looks like big-red-flowers-thumbnails and drag this folder into your main big-red-flowers folder. They are then safe for when you remake your gallery. There are free photogalleries such as Web Album Generator

Remove Table of Contents - Replace with Sitemappers. Delete the Table of Contents page and make a new page called sitemap.htm for your new sitemap. You should use the title of the page for the anchor text, include a title attribute (tag or screen tip) and a short description for each link, the list should be made into a unordered (bulleted) list. Once again do a 301 redirect when changing a page name. You should also implement a xml sitemap. You can generate both of these by using:

XML Sitemappers
Sitemap Generators

Remove Hit Counters - Replace with either Google Analytics from Webmaster Tools, or a stat counter

Cleanup procedures


1/ Insert a Doctype - It is probable that you don't have a DOCTYPE or that it is incorrect or that you even have different types. It is worth moving to a XHTML transitional doctype to future proof your website. With Expression Web it is fairly 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'. You can use Find and Replace to replace your old DOCTYPEs. In order to use a XHTML Transitional DOCTYPE if you followed the Setting up Expression Web Ebook at the beginning of this tutorial when you make a new page, the page will already have this inserted and you can use that DOCTYPE code
.
2/ Proceed to clean your pages of old left over code. You can select all the content and use the Remove Formatting under the Format menu. Clear Styles under the Apply Styles Pane/Panel. Using Optimize HTML and Reformat HTML on right click in Code View will also sort some issues out. If you are going to remove tables and use a div layout you can use Table - Convert Table to Text. You can also use Expression Web Queries and to some extent Clean Code on Paste Text might be of some use as well.

There are many other cleaning techniques and if done in a certain order or globally can save you a whole lot of time. Third party tools such as some FireFox Browser addins like HTML Validator, Total Validator, Table2Clipboard and Web Developer provide a wealth of help in cleaning and validating your page and figuring out just where the problems lie. I suggest you always work in Split View so you can unconsciously begin to recognize what code should be there and what shouldn't. You should be sure your site is as clean as you can get it before apply the new template or DWT.

3/ Implement Semantic Mark-up and simple SEO practices as you clean each page. Semantic Mark-up is about denoting the structure of your page by using Heading tags. Never use more than one Heading 1 tag on a page at a time. When it comes to graphics make sure you use Alt Attributes (tags) If you followed the setting up expression web eBook, now each time you insert a graphic it should remind you 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.

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 must specially be used on menus, as often a menu is necessarily restricted to a shorter keyword anchor text. If you do not have a description and keyword meta then use the Page Properties in Design View on right click to insert these and check you have a Page Title as well. It is important for SEO that you use the same key worded phrased Page Title text for the Heading tag and the Description meta. Take the time to look over the page and note any miss-spellings, these should show up with a wiggly red line underneath.

4/ Use Site Reports to implement a site wide link check. I suggest doing this after all of the above as it gives a scattered double check on some of the pages, just in case you missed anything, it also allows you to double check if you missed inserting a Title Attribute.

Implement a new template or DWT


If you cannot afford a new template or dwt or are not sure if what you are buying contains correct coding and validates, then you might want to use these free basic Site Templates which can be utilised directly from within Expression Web itself. (As DWTs) You will be able to get a feel of what you want your site to look like and the colours you want to implement through the style sheet. In addition they come with a range of tutorials explaining how to implement various aspects. You should develop your own look and start a new site in a folder within your web, so you have all the files to hand.

I advise getting feedback on your new design, asking for a site critique on the layout, colours and look of the Site Template. Check your colours contrast well as quite often clashing, over bright or too faint colours can change the whole look of a site. Not to mention impact accessibility. Another set of eyes (several is better) always helps.

Once you are happy with the end result, and your pages are as ready as they can be, then its time to apply the new dwt to your pages. The Free Expression Web Dynamic Web Templates Ebook will guide you on how to do this, it also provides a many more links and resources in the making of a new site design.

Of course this article is just the tip of the iceberg, there are lots more techniques and insightful tricks you can apply when Migrating from FrontPage to Expression Web
0
14,924 Views
Microsoft MVP - Expression Web 2003 - 2013

Comments (1)

Author

Commented:
Thanks McKnife.

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.