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 EBooks.
The includes feature is available in earlier versions of FrontPage as well as Expression Web. You can learn more about this feature from:
- Expression Web and Design Time Includes
- FrontPage Includes Tutorial
- Part I - Introduction to Includes and Using FrontPage Includes
- Using FrontPage Includes
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.
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.
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.
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.
To perform search engine optimization properly you need to understand how the search engines read web pages. From Html Basic Tutor.