Converting an Existing Front Page Web Site
Use your browser "Back" arrow to return to the main page.

 

Basic Considerations and Suggestions

This is just another introduction, not a detailed guide. There are doubtless numerous good ways to proceed, depending on web complexity and personal preferences.  I don't mean to harp on this but be sure to make a backup copy of a page before you begin working on it. Put the backup in a special folder or copy the page in-place, giving it another name. If you are renaming an active page (let's suppose you made your backup inside the same folder or web) for whatever purpose - replacement being one - EW will want to re-calculate links. Avoid this because the new pages you style and format will eventuially be named same as the ones they are replacing.

My experience includes two methods, both of which work well for me. 

Overview of Methods:

  1. With EW create a new empty replacement page for a legacy page. Attach the External style sheet to the new page (this assumes you already have one completed - see "Detailed" section below), then highlight and copy content only (preferably ... in practice not always easy) from the legacy sheet. Finally, go through the new page applying styles as required from the "Apply Styles" menu. If some of the legacy styling got copied - which is likely - it does no harm because the CSS styling reference is automatically placed following the old code so over-rides it. You can clean out the dead wood later by editing the HTML directly. When the new page is finished and tests OK, rename it to the old page name (after renaming the old page to something else and possibly backing it up again).
  2. Modify the legacy page directly. Attach your style sheet, then highlight content, applying styles from "Apply Styles". This leaves in place all the legacy styling from FrontPage. It does no harm being left in there but looks messy. You will probably want to go through and scoop all of that out one day.

Method #1 produces a much cleaner result right from the start if you are careful to copy content only but when highlighting large blocks of content incorporating style changes, the interior styling markup gets copied too. Method #2 may be better for some content. Occasionally, copying complex material can produce unexpected results because some needed styling markup gets left behind. This may be a nuisance to correct in the new version. It's up to you, how careful you are and how you prefer working.

 

Detailed description of the process

For both methods:

  • Select a legacy page that incorporates most of the appearances of your site ... headers, titles, inline and isolated links, tables etc. examples of all the different sorts of content you might have. Create a backup.
  • Load the page into EW and create a new external style sheet as already described and attach it to the legacy page.
  • For each individually styled chunk of content in the legacy page (header, horizontal line, etc), determine the content styling properties from visual appearance and/or the HTML code and build a "New Style" (using the "Apply Styles" option) with those properties. Drag it into the External Style sheet after giving it a meaningful name. Check accuracy by applying these new CSS styles to the appropriate content. Keep in mind a Style is almost always re-used and pretty soon you will find yourself simply clicking on styles in "Apply Styles" rather than building so many new ones.
  • Be sure to initiate building the style sheet with the .body style because this is where your page defaults go, such as font, background color/pattern, page borders (if any). You will find the body styling properties in the legacy page Code View near the top in a line beginning <body ... and in a line of the form (example) <!--
    .webname { font-family: Verdana; border: 3px solid #0066FF; }
    -->

You now should have a reasonably complete External Style Sheet containing the styles characterizing your site.

For Method 1

Simply proceed as already described in "Basic Considerations/Overview of Methods".

For Method 2

In Code View notice at the top of the legacy page something that looks like this:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 12.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>MITROverview</title>
<style>
<!--
.mitros { font-family: Verdana; border: 3px solid #0066FF; }
-->
</style>
</head>

<body leftmargin="5" topmargin="5" style="border-style: solid; border-color: #0066FF; padding: 4; color:#FFFFFF" stylesrc="index.html">

That's legacy header code which (unless I am very mistaken) could one day cause problems as the web world moves on. You should replace the lines in green with the following ones in blue. (Depending on vintage of EW and revisions in the standard, this material is subject to change.)

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Empty_Page</title>
</head>

I hope that's good advice. The old header doesn't seem to do any harm right now but if your new page is going to be CSS compliant it should probably be that way in every respect. If using Method 1 you don't have to worry about this because the new page was generated by EW in the first place and is already standards compliant. Before making the replacement be sure to save the body styling attributes for building the .body part of your External CSS sheet, if not already done.

Now Attach the External Style sheet. The legacy page will still look just fine (providing you have your .body style built). Go through the page highlighting each distinctive piece of content and applying your CSS styles just as with Method 1.  100% of your old hard-coded styling markup will still be there so don't expect any appearance changes to pop up. You can clean out the legacy code later. If the new CSS style is complete, the reference to it will go last and the hard-coded styles preceding it will be ignored. If the CSS style is incomplete, any legacy code needed to "fill in the blanks" will be retained following the CSS reference. This also applies to Method 1.

No matter how you organize and proceed with conversion, remember to save good versions of converted pages and your evolving Style Sheet. If things get tricky, take backups at major editing points. This should be obvious.

Back to top of page