Web Page Templates
The use of web page templates greatly facilitates the creation and maintenance of web sites. Templates are web pages that contain the html code common to the pages used on a web site and clearly identify locations where content unique to individual pages is to be inserted. They also many times use links to external style sheets and server side includes which contain much of the common code and content as single files. They facilitate the creation and maintenance of web sites by eliminating the need to create duplicate code for new pages, by providing identical code for the common page elements, and when using linked style sheets and server side includes, provide single files that can be modified to change all the linked pages on the site.
The code example below illustrates a simple template that provides common code to create a web page. In this case the page content must be added where indicated, styles are added between the style tags, and a linked style sheet file path is added to the link tag. In cases where there is common content such as a header, menu, or footer section, it would be included in the template either as html code or as server side includes. Common styles would be included by providing the file path to the stylesheet in the link tag.
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
<!--**************Enter the page title between the <title> tags****************-->
<title>Put page title here</title>
<!--******Enter the path to a linked style sheet after the "href" attribute********--><link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
/*-------------------------------Embedded styles go here--------------------*/
</style>
</head>
<body>
<!--******************Web page content begins here******************-->
<p>Replace this statement with all the content of your page.<p/>
<!--***************Web page content ends here******************-->
</body>
</html>
The example template code illustrated below is more complex (and more useful) in that it uses a table to format the page and a linked stylesheet and serverside includes to set the styles and insert the content for the header, menu, and footer. This template must be used as part of a web site "system" that includes the structure of the site and the linked stylesheet and serverside include files. Without that system, the required file paths would not be known and the styles and content added by the linked files would not be available.
Notice also the use of comments to clearly indicate the function of the various sections of the code. In complex pages comments are critical to facilitate the use of the template.
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
<!--***************Enter the page title between the <title> tags****************--><title>Put page title here</title>
<!--******Enter the path to a linked style sheet after the "href" attribute******-->
<link rel="stylesheet" type="text/css" href="demo/demo.css" />
<style type="text/css">
/*-------------------------Embedded styles go here--------------------------*/
</style>
</head>
<body>
<table>
<tr>
<!--*********************Start of header section*********************-->
<td colspan="2"><!--#include file= " ssi/head.ssi "--></td><!--********************End of header section******************-->
</tr>
<tr>
<!--******************Start of menu section*******************-->
<td width="100"><!--include file= " ssi/menu.ssi "--></td><!--*****************End of menu section*******************-->
<!--*******************Start of body section************************-->
<td>Page body content goes here</td>
<!--*****************End of body section********************-->
</tr>
<tr>
<!--*******************Start of footer section******************-->
<td colspan="2"><!--include file= " ssi/footer.ssi" --></td><!--********************End of footer section*********************-->
</tr>
</table>
</body>
</html>
When opening a template such as the one above using an HTML editor such as Composer, FrontPage, or DreamWeaver; the user only sees the statement "Page body content goes here". The content of the new page is added by replacing that statement with the content that is to go into the body of the new page. The header, menu, and footer sections are then added using serverside includes when the page is loaded to the web server. The body can include any content including tables, images, and hyperlinks. The only other information that needs to be entered is the page title between the opening and closing title tags.
In many organizations, several templates are made available to provide different page layouts and instructions are prepared to instruct users about their proper use.
Steps to add a template to your web pages
- Create a complete prototype web page
- Use comments to clearly indicate the styles and xhtml that will be moved to CSS and SSI files
- Move the template styles to a linked style sheet, and link to it
- Move the SSI code to SSI files and add the SSI links
- Change the extensions from html to shtml
- Test the pages, if you get a permissions error, fix the permissions.
Other template issues
Last Modified Tuesday, 23-Oct-2007 18:33:06 EDT
ITT 281 - Internet Web Site Development
John A. Zaner
University of Southern Maine