Migrating from FrontPage to Expression Web

Migration: The Short Version

Short version on clean-up up a page created in FrontPage (any version) and migrating it to a standards complaint web page using Expression Web. Before you begin make sure that you have a full and complete back-up just in case.

When time permits I will be creating a longer version with screen shots and probably a video version as well.

Note: You should be working in split view. It is a good habit to work in split the majority of the time since it allows you to learn while Expression Web creates you code. In this quick bit tutorial we will be moving back and forth between code view and design view. Don't let the fact that some of the actions take place in code view scare you since they rarely involve writing any code. The most you may have to do is use Intellisense to fix a missing or wrongly placed closing tag.

Step 1 - Doctype

Begin by opening each page in Expression and in the code section of split view if you do not have a doctype use ctrl+enter to add a doctype at the top of your page. If you are not using bots choose XHTML Transitional. If you are using bots choose HTML 4.01Transitional. (Bots do not output valid code but they cause less problems with HTML 4.01 than XHTM 1.0)

If you did not choose XHTML Transitional skip to the next step. Otherwise, right click and choose "Apply XML Transitional Formatting Rules".

Step 2 - code view actions

Still in code view right click and "Reformat HTML".

Now in code view skim down the page and look for any red squiggles or yellow highlights. If you see any mouse over and read the pop-up to see what needs to be fixed. Fix them.

Do you have FrontPage <font> elements used for formatting?

If you are using fonts for presentation (<font color="red">, <font size="6"> in design view  highlight in the design section and use Format | Remove Formatting and get rid of them. While I typicallyuse the mouse to remove formatting you can use the keyboard. Two separate ways to use the keyboard to remove formatting are :

  • CTRL + SHIFT + Z which is the official keyboard shortcut
  • CTRL + SPACEBAR

Repeat as necessary.

Do you have Word content?

If you have a "msonormal" in your code because you pasted content from Word in your web page you may want to use "Optimize HTML" from the code view right click menu but the only options that I recommend using are the following:

  • Merge adjacent tags
  • Empty tags
  • Generator and ProgID tags
  • Word HTML

The other options should be used with caution and rarely at this point in a migration.

Step 3

Use the drop down on the format menu to replace <p> elements that had been using styles to look like headers with real headings level 1 through 6. (Note rarely have I seen a website that needs more than h1-h4.)

Step 4

Create styles to style your page defaults for body, headers, links, etc. and replace any special formatting you had created using font size/font face/bold, etc. attach move the styles to an external stylesheet and attach it to your page.

Finally,

My recommendation is to create a dwt from your nice clean page if you are not using a DWT already with your static elements which may or may not include your menu. My preference is to use an include file for the menu on all but the smallest sites (less than 10 pages) but that's a preference not necessarily a recommendation since individual preference can vary quite a bit.

When you are done, move to the next page. remove all the common elements that will now be in your dwt. Repeat up until the structural elements have been add then attach the DWT and apply styles from the stylesheet (which will be linked with the DWT), save and move on to the next one.



Outstanding Hosting