Converting a Theme Based - Shared Border Web to DWT
DWT's are available only with the 2003 version of FrontPage and Expression Web. If you want to learn more about Dynamic Web Templates (DWT's for short) I suggest you download Tina Clarke's FREE DWT EBook.
The includes feature is available in earlier versions of FrontPage as well as Expression Web. You can learn more about this feature from:
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.
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.
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.
Planning a Genealogy Website 2nd Edition is available as a 42 page EBook in pdf format for you to download. It has been totally revised and updated with new content. The EBook is zipped for faster download. Save it to your desktop, extract the file and it is ready to use.
April 2007 - April 2013
Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.