This site will look much better in a browser that supports web standards, but it is accessible to any browser or Internet device.


Web Projects: Templates


In professional Web design, the key to effective Web production is the use of templates. For students unfamiliar with the concept of templates, this can be a particularly useful concept to learn, as templates are used in the production of other kinds of electronic documents as well.

A template is the basic skeleton of a Web page. These are simply files with some basic HTML tags already in place for the static elements that will appear across many of your pages, such as the navigation bar and or site logo. To make a new page, you simply make a copy of the template and drop in your non-static content. Many sites use just a few templates. One approach that many people use is to build a template for each level of the site, assuming your site has a top-down, hierarchal structure.

In addition, many Web-authoring tools have built-in templates. You may want your class to experiment with these as well.

Templates are important for two reasons:

  • Efficiency. Not only does this approach save a significant amount of time and effort, but it also reduces HTML errors.
  • Consistency of design. Your goal should be to create a site where a user can expect the navigational elements and overall look of the site to be the same. This doesn't mean all the pages have to look exactly alike. But the menu bars and navigational elements should have a consistent look and placement on every page so that the user isn't confused about how to navigate the site.

We suggest starting by creating a sample page, with all of the content you're expecting will be on that page included. The next step is to review the sample. Is there anything missing? Are there any issues you did not anticipate? Anything you want to change?

After reviewing and approving sample pages with your team, you can delete all of the content while saving the elements that you'll want repeated on other pages, such as the navigational menu, or a site logo. The resulting file can then be saved as a template. See the illustrations below for an example.

View of browser-Put title here

Web page with about us section

Next »

Last Updated October 23, 2003