Website developers have many excellent page design tools available to them, but designing a web page is just the first step. The web developer must know how to take his design and apply it consistently to every page of his website.

Each page must have the same look, feel, and functionality as every other page. Templates—used in word processing to ensure that documents have an identical layout and style—can be a useful tool for the web designer as well.

Creating and Applying the Template

Create a rough draft of the website. Sketch out the site by hand using a pencil and paper. Many designers are comfortable prototyping with a graphics editing program such as Photoshop. Plan all the different features needed on the page—the types of menus, images, animations, and text each page of the website could have.

Experiment with a different positions and orientations for each of these components. The goal of a good design should be to attract the visitor and focus his attention on the content.

Create the Website Template Prototype

Take the finished prototype design and re-create it using the web design tool of choice. WYSIWYG (What You See Is What You Get) web editors can make this step less tedious. An excellent free WYSIWYG editor is Amaya Web Editor available from the World Wide Web Consortium (W3C). Enter some identifying text into the sections of the design that will change from page to page. For example, label the section where the bulk of the page’s content will go, “Main Content Section.”

The HTML code should also include comments to show where the variable content will be inserted. Save this file under a readily identifiable name such as “template.fil”, or “mysite.tpl”.

Make Actual Web Pages Using Your Template

New pages can now be created using the template created in the previous step. Open the template file with the web editor. Immediately save the file under the name of the page to be add to the website. If the first page created is the “Home” page, save it as “index.html.” Saving the file under a new name prevents the original template from being altered by mistake. Add the page content to the appropriately labeled sections.

Apply the Template to All Web Pages in Your Site.

Repeat the process above for each new page in the website. Perform tests to ensure a uniform look and feel across the whole site. If it is necessary to alter a non-changing section of the template–such as a menu item–the process will need to be repeated for every page. Different web browsers can display the same web page in slightly different ways. Test the whole site with more than one browser.

Further Tips For Creating Website Templates

  1. Many website development applications automate the template creation process and eliminate the need to edit the raw HTML code. When changes are made in the template, these tools automatically apply the changes and generate new pages.
  2. Templates can also be constructed using programing languages, such as PHP or ASP, to create new pages on demand. The editable content is kept in files separate from the template. The template contains programming language instructions for the web server telling it what content needs to be inserted and where to insert it. The new pages the server creates are not stored, but sent directly over the Internet to the user’s web browser.
  3. Save the template as a read-only document. Doing so will prevent the unintentionally altering of the template. Some website editors allow templates to be saved as a read-only document. A template file can also be made read-only by changing the file permissions using the operating systems file browser.
  4. Take advantage of W3Schools : a source of excellent resources for website designers.

Summary

Taking advantage of the power of web page templates not only makes the job of the website designer easier, it helps those who must maintain the site after you. The maintainer need only make changes to the content or make changes to the template. One change will not accidentally effect the other. Moreover templates improve the experience of your visitors: every page looks the and functions the same.

Tags: