Free website hosting on JSM-Hosting

JSM-Hosting
FrontPage to Dreamweaver

 Technical info for free website hosting  
Sorry, we have stopped accepting new applications.

 

Converting a website from FrontPage to Dreamweaver can be reasonably fast and easy
if you follow our recommendations - and our step-by-step instructions.

Principle

When saving a file, FrontPage automatically converts most of its "Webbots", such as "link bars", "page banners" and "shared borders", into regular HTML code. So these pages contain the full HTML code - unlike when you edit them with FrontPage - and can readily be edited with Dreamweaver.

However, you may want to converts your FrontPage borders into a Dreamweaver Template — and we strongly recommend it! But Dreamweaver 8 does not have a command for installing a template into all pages of a website - and installing a template page by page would be a long and tedious operation, especially for a large website.

The good news it that it is possible to add into all webpages the specific HTML tags which will fool Dreamweaver into believing that a template is already installed - subsequently, updating the template will automatically update all webpages.

Adding these specific HTML tags is a rather tricky procedure. But it can be done quite fast sitewide, whatever the size of the website.

Below are the detailed, step by step instructions. Even if you are an expert, this procedure may seem complex or obscure: don't worry, just apply it blindly, it works! At the end of the process, your website will be fully converted to Dreamweaver, with just the same look and functionalities as before - and your FrontPage "shared borders" will be made into a Dreamweaver template.

Depending on your skills, the whole procedure may take you 2 to 3 hours, even for a very large website. It does require that you are familiar with the basic functionalities of both FrontPage and Dreamweaver, and that you have a minimal understanding of HTML.

Essential recommendation

Before you do anything, save a copy of your website onto your disk: you never know, you may make some bad errors in the process that can't be easily recovered, and you may need to recover your website to start the process over.

Furthermore, it is a good idea to make a safety copy after each major successful step of the process... it may save you a lot of time in case of irreversible error.

Step by step instructions

Here are the detailed, step by step instructions for converting fast a FrontPage website with borders into a Dreamweaver (version 8) website with templates. If you don't understand the reason for some of the instructions, don't worry, just apply the procedure blindly: it will save you a lot of time and effort!

We strongly suggest that you print these instructions, follow them scrupulously in the same sequence and cross them out as soon as done.

To avoid typos, we suggest that you copy the HTML code to be inserted directly from this webpage and paste it in your HTML code (or in the "Find and Replace" menus).

A. Preliminary steps with FrontPage

You will use FrontPage a last time to remove your "shared border" and install the code defining some Dreamweaver template items. But you must first create a folder and file in a copy of your website in view of your future Dreamweaver template

  1. Open FrontPage:
    1. Create a sub-folder "Templates" in the root of your website.
    2. Copy a file containing all your "shared borders" from a sub-folder of the root into this sub-folder (for instance open it and do "File - Save as").
      You will need this file later to create your Dreamweaver template (in point D.).
    3. Using Windows Explorer, make a safety copy of your full local FrontPage website onto your disk.
    4. Delete the "Templates" sub-folder.
       
  2. With FrontPage, remove the "shared borders" from all pages. Two possibilities:
     
    1. If none of your borders contain a FrontPage "page banner" (with the title of the page - or any other "webbot" item that is different in each page), try doing: " Format - shared borders - deselect the borders - select 'apply to all pages' - OK".
       
      If it doesn't work, just open the shared borders files (in the folder "_border"), remove all their content and save them empty.
      Go to point 3.
       
    2. If you do have a FrontPage "page banner" in a border (containing the title of the page), you must make it recognisable by Dreamweaver as a template object:
      • Open the "shared border" file (in the folder "_border")
      • In the HTML view, remove all the code in-between the <Body> & </Body> tags, except for the "page banner" code:
        <!--webbot bot="Navigation" ... -->
      • In the HTML view, insert the following code:
        • just before the "page banner" code:
          <!-- I*nstanceEndEditable -->
          <!-- I*nstanceBeginEditable name="Title" -->
        • just after the "page banner" code:
          <!-- I*nstanceEndEditable -->
          <!-- I*nstanceBeginEditable name="Body2" -->
        • Ensure that the "<" and ">" are proper fonts -
          not the HTML code '& lt' and '& gt'.
      • Save the "shared border" file.
         
    3. If you have another FrontPage "Webbot" item whose content is different on each page (we can't think of any - unless you want to include FrontPage "link bars", but we recommend simply putting them in the Dreamweaver template - see further***), you must also make it recognisable by Dreamweaver as a template object, using a similar procedure:
      • Open the "shared border" file (in the folder "_border")
      • In the HTML view, remove all the code in-between the <Body> & </Body> tags, except for the "webbot" item code: <!--webbot bot=... -->.
      • In the HTML view, insert the following code:
        • just before the code of the "webbot" item:
          <!-- I*nstanceEndEditable -->
          <!-- I*nstanceBeginEditable name="name-of-the-item" -->
        • just after the code of the "webbot" item:
          <!-- I*nstanceEndEditable -->
          <!-- I*nstanceBeginEditable name="Body3" -->
        • Ensure that the "<" and ">" are proper fonts -
          not the HTML code '& lt' and '& gt'.
      • Save the "shared border" file.
           
    4. If you still have other FrontPage "webbot" item whose content is different on each page (we really can't think of any - but who knows!), you must also make them recognizable by Dreamweaver as template objects, using a similar procedure ("Body3" obviously becomes "Body4", and so on).
       
    5. Open the other (unedited) border files in the "_borders" folder, remove all their content and save them empty.
         
  3. You can now close FrontPage - forever!

B. Removing FrontPage folders

Using Windows Explorer:

  1. Copy your borderless website onto a new folder, which you will use with Dreamweaver.
     
  2. Remove all FrontPage folders from this new folder:
    - the "_borders" and "_derived" folder, and
    - all "_vti" (and "_vti***") folder - beware, there are several in the root and one in each sub-folder!
     
  3. Make a safety copy of this new folder containing your "clean borderless" website.

C. Installing Dreamweaver template tags

In this section, you will include in all webpages the specific HTML tags which will fool Dreamweaver into believing that a template is installed in these pages.

  1. Open Dreamweaver and define a new website located in the folder created in B.1. (click here if you don't know how).
     
  2. In all HTML pages of your site, install next to specific HTML tags the tags indicating to Dreamweaver that a template is attached to the page and how the template zones are defined.
     
    1. </body> & </html> tags
      Replace sitewide, in the HTML code (command <ctrl F>):
      </body>
      </html>
      with:
      <!-- I*nstanceEndEditable -->
      </b*ody>
      <!-- I*nstanceEnd -->
      </h*tml>
       
      There may be some pages (for instance created with older softwares) that don't contain the final </html> tag. Therefore, replace sitewide:
      </body>
      with:
      <!-- I*nstanceEndEditable -->
      </b*ody>
      <!-- I*nstanceEnd -->
      </h*tml>
       
      Ensure that all pages have been converted by searching side for </html>.
      If there are any pages left with </html> tags, open them and solve the problem.
       
      Now replace sitewide :
      </b*ody> with</body>
      </h*tml> with </html>

      All pages should now end with:
      <!-- I*nstanceEndEditable -->
      </body>
      <!-- I*nstanceEnd -->
      </html>
       
    2. <body> tag
      You must put a specifc code before and after all instances of your <body> tag. However, this tag may have varying attributes in different pages. Therefore:
       
      1. Replace all instances of your <body> tag containg your most standard attributes:
        <body (standard attributes)>
        with:
        <b*ody (standard attributes)>
         
      2. Search the website for remaining occurrences of:
        <body (without ">")
        If there aren't any, you're done - go to point next step (b.3.).
         
        If there are, it means that some page have different <body> attributes than the standard one. Open one of these pages and replace sidewide all intances of:
        <body (other attributes)>
        with:
        <b*ody (standard attributes)>
         
        Take note of these other attributes for later steps: your are now loosing them. Note that Dreamweaver only accepts one set of <body> attributes for all pages under a same template. At a later stage, you may create different templates with other <body> attributes for pages that must have a different look (such as photo album pages).
         
        Repeat this step until there are no more occurrences of "<body" in your website - meaning all <body> tags have been replaced with:
        <b*ody (standard attributes)>.
         
      3. Now replace sitewide:
        <b*ody (standard attributes)>
        with:
        <body (standard attributes)>
        <!-- I*nstanceBeginEditable name="Body" -->
         
    3. </head> tag
      Replace sitewide:
      </head>
      with:
      <!-- I*nstanceEndEditable -->
      <!-- I*nstanceBeginEditable name="head" -->
      <!-- I*nstanceEndEditable -->
      </head>
       
    4. <head> tag
      Replace sitewide <head> with:
      <!-- I*nstanceBegin template="/Templates/my-template-name.dwt" codeOutsideHTMLIsLocked="false" -->
      <head>
      <!-- I*nstanceBeginEditable name="doctitle" -->
       
    5. Finally, close all open files and replace sitewide all occurrences of:
      <!-- I*nstance
      (which is not a Dreamweaver code) with:
      <!-- Instance
      (which is the correct Dreamweaver code).
       
      Note that this change will not be applied correctly to pages that are still open!
       
  3. Using Windows Explorer, make a safety copy of your website onto your disk.

You have now installed to code to fool Dreamweaver into believing that all your HTML pages are attached to a template called "my-template-name.dwt". Dreamweaver will be able to recognize in your webpages the location of the former FrontPage items defined in A.2.b, c. and d., such as the "page banner" (page title), and to integrate them properly in a template if you follow the next points.

D. Creating the Dreamweaver template

Using Dreamweaver, you can now create the template and apply it to all pages.

  1. Using Windows Explorer, copy the "Templates" sub-directory from the root of the safety copy of your full FrontPage website (done in point A.1.c) onto the root of your current website.
     
  2. With Dreamweaver, create a template: File - New - select "Template page " - "HTML template" - select "Document Type (DTD)" (we use "HTML 4.01 Transitional") - click "preference" and make your selection (we use "Default extension = ".htm" and "Default encoding" = "unicode UTF-8").
     
  3. Open the HTML file in the "Templates" sub-directory (containing your FrontPage borders) and copy the "shared borders" into your newly created template.
    You may also remove the unneeded FrontPage HTML code from the code of your borders.
     
  4. Create the editable zone "Body" (in which the body of each webpage will go)
     
    If you had a FrontPage "page banner" and saved it as in A.2.b above,
    create an editable zone "Title" (in which the "page banner" will go).
     
  5. Save the template in the "Templates" sub-folder as "my-template-name.dwt".
     
    If you had a FrontPage "page banner" and saved it as in A.2.b above,
    Dreamweaver will ask you where to put the <Body2> zone: select <Body>.
     
    If you had another FrontPage "webbots" and saved them as in A.2.c above,
    Dreamweaver will ask you where to put the <Body3> zone: select <Body> as well.
    Same for any other "webbots".
     
    If not all of your pages were using all of your "shared borders" were the "webbots" were defined, Dreamweaver will ask you where to put the zones defined in A.2.b, c, and d (for instance the <Title> zone): select "nowhere".

     If you get all sorts of error messages, it means that you haven't applied the procedure rigorously - or made an error. Start over from a previous safety copies.
     
  6. Using Windows Explorer, make a safety copy of your website onto your disk.
     
  7. All your HTML pages are now attached to the template "my-template-name.dwt" containing all your former FrontPage "shared borders". However, some of your webpages may not require all "shared borders": for instance, we don't use the "top shared border" in photo album pages.
     
    In all these files, replace in the HTML code:
    my-template-name.dwt
    with:
    my-photo-template.dwt
     
    This can be done very fast sitewide:
    - select all the folders containing these pages,
    - do <crtl F>,
    - selecting "Selected Files in Site" and
    - "remplace all".
     
    Create the second template (typically by editing the first one) and save it as
    "my-photo-template.dwt": all pages calling "my-photo-template.dwt" will be updated.
     
  8. Dreamweaver accepts many templates. Repeat a similar procedure as often as needed.

Your website should now fully be converted to Dreamweaver, with all your HTML pages attached to an adequate template. It should have just the same look and functionalities as before, and is OK for uploading.

F. Further improvements

  1. Using Windows Explorer, make a safety copy of your website onto your disk.
     
  2. You can remove sitewide the FrontPage specific tags in the head section that are now obsolete, such as:
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta name="Microsoft Border" content="tb">

    If you use tags such as the following ones, they should preferably be in the non-editable head section of the template - and should not be repeated in the editable head section of each page. Remove them sitewide, and copy them back in the non-editable head section of the template.
     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="../clockarium.css">
     

 

 

JSM-Hosting wishes you a nice day!

  Contact
Last update on 22-jan-19
Top