Search This Site:
 

Converting a Theme Based - Shared Border Web to DWT

All screenshot views will open in new window. You may need to increase the size of the image by clicking the enlarge button.

DWT's are available only with the 2003 version of FrontPage and the new Expression Web. The includes feature is available in earlier versions.

Recently I helped someone convert their site from one based on a theme, shared borders and the navigation system component available in FrontPage to one based on two separate dynamic web templates or dwt's and the includes page feature. I thought it might be helpful to others to go through some of the steps involved and share some of the resources I found along the way. These were basically the same steps I followed in converting my own site to a dwt based site.

Helpful Links:

Because she already had a working site published, we chose to use that site as a basis for the revised site. It had not yet been indexed so at the same time we tried to make it a little more SEO friendly by renaming files and images and some other tweaks. Her original design was appealing but the html code itself was full of styling and without some of the required elements.  The navigation system was graphics based so we changed it to a text based menu but retained the "button" look by using a table with colored background.

Because there would be two of us working on this project, it was easier to create a new one page web in FrontPage.  File > New > One Page Web > Under Options, give the web a new name. NOTE: Both of us were using FP 2003.We started by moving all of her style formatting to an external style sheet. Decide how you want the basic site to look and define those styles in an external style sheet:

  • background color or image
  • size and color of text as well as the font used
  • color of header tags h1-h6
  • color and height of horizontal lines
  • color of the various links
  • special formatting for certain elements

The next step was to create an index page that the dwt would be based on. We used a table based layout because it was what she was familiar with. I converted the shared top border to a one row table with the graphic she had chosen on the left and the page title on the right. The page title was styled using a class in the external style sheet. A top menu of the main sections was done as an included page. View screenshot of two top borders and top menu.

A second table with three columns served as the main layout area. The far left column would contain the menu, a gutter column next and the balance for the main content area. A third one cell table was added at the bottom for the contact info. A liquid design was used so pages would resize according to the viewer's browser window. WHY use three separate tables instead of one bigger one? So the site would not take so long to load.

View screenshot of main content area

Because different sections would use different menus, three menus were designed as included pages. Rather than use a graphic menu with buttons as the FrontPage navigation component uses, I used a table with alternating cells with a color fill, styled again using the external style sheet with a class.

View screenshot of included menus

Once the main template design was finished, it was saved as a dynamic web template and the editable regions were added.

View screenshot of finished dwt for Monroe County, New York.

Pages were then edited for content so the dwt could be attached. Formatting was removed by highlighting code Ctrl+Shift+Z. Further editing removed all html between <body> </body> tags except for the main content itself. Content saved - including info between <head> </head> tags. Page was validated and dwt attached.

The finished project for County Records, Monroe County, New York and My Family Genealogies.

FREE E-BOOK FOR DOWNLOAD -

DWT - Dynamic Web Template FrontPage 2003 by Tina Clarke. Microsoft MVP - FrontPage

My thanks to Linda H. Gutiérrez  for allowing me to use her site as an example and to Cricket of GNC Web Creations for use of the sm-windows.gif. The site is owner maintained.

Additional Resources:

How Search Engines Read Web Pages  -

To perform search engine optimization properly you need to understand how the search engines read web pages. From Html Basic Tutor.

Create a Dynamic Web Template

FrontPage 2003 introduces Dynamic Web Templates, a new and sophisticated type of Web page template that enables you to share a layout among several pages in a site, preserve specific regions of content from unwanted changes, and save time when you begin to manage the Web pages on your Web site.