Return to the title page

Introduction to Web Templates

Tom O'Haver
Professor Emeritus
The University of Maryland at College Park
toh@umd.edu
http://www.wam.umd.edu/~toh
Last updated June, 2008

This Web site provides materials and handouts suitable for in-service workshops for elementary and middle-school teachers, technology coordinators, and media specialists. The subject is using templates and simple text editing to create multimedia projects for publication on the Web; incorporate prepared graphics, images, and recorded sounds into Web pages.

The advantages of using a template, rather than designing a Web site from scratch using a Web editor program, are three-fold:

  1. The template approach uses only generic tools such as a text editor and a Web browser; it works equally well on PC or Mac platforms and does not depend on any specific commercial Web editor which would have to be purchased and learned and which might become obsolete.
  2. The emphasis remains on the content, not on the decorative design of the site; using a Web editor encourages students to focus too much on the cosmetic aspects.
  3. If you create several such class projects using these templates, the structure and navigation of the sites will be consistent from project to project, making it easier for you, your students, and your site visitors (parents, other teachers and students, etc) to use your class sites.

Using these templates is very easy. For example, to make a slide show web site (a series of pages each with a picture and "navigation arrows" for going to the next or previous page), all you need is a copy of the "Slide Show Template" and a set of JPEG images (like from a digital camera or downloaded from the Internet); just rename the pictures "p1.jpg", "p2.jpg", "p3.jpg", etc, in the order that they are to appear and copy (drag and drop) them onto the template folder. Presto, you're done!

To make a Alphabet Book web site, all you need is a copy of the "Alphabet Book Template" template and a set of JPEG images; just rename the pictures "a.jpg", "b.jpg", "c.jpg", for each letter of the alphabet and copy (drag and drop) them onto the template folder. That's all there is to it! If you wish, you can use a simple text editor, word processor, or web editor of you choice to customize the text on the template pages.

There are at least three ways to use these templates: (a) you can have the students create the writing and artwork separately, then combine their content with the Web templates yourself; (b) you can have the entire class participate in the creation of the site, each student taking responsibility for developing one of the content pages, or (c) you can have each student create an entire site with multiple pages, for example to create a Web Book with multiple chapters or an "electronic portfolio", exhibiting a range of different projects, writing, artwork, photographs, etc. Obviously the latter is more suitable for older students.

Skills introduced and practiced: folders and files; working with multiple applications and windows simultaneously; text editing, opening and saving files, renaming files and folders, Copy and Paste text between applications, file organization, directory navigation, project planning, using a Web browser and text editor. Concepts addressed: Advantages of using templates. Basic ogranization of Web sites. Types of files involved in a Web site (text, HTML, graphic, etc). Encouraging student to think of themselves as producers as well as consumers.

We have taught this material in a three-hour hands-on inservice teacher workshops in Windows or Macintosh computer labs.: Part 1: examples of Web projects created by elementary and middle-school students; Part 2: demonstration of the construction process; Part 3: hands-on practice with step-by-step directions.

Possible Time Schedule for a three-hour workshop

Hour 1: Introduction and overview. Why use templates? Some examples of projects produced by elementary students.

Hour 2: Demonstration of some example template projects. Choosing a topic. Researching the topic. Creating or finding pictures and sounds. Using Picasa 2 to prepare digital photos. Recording sound bytes with the microphone.

Hour 3: Free time to work on your template projects (ABC book, etc.)

(c) Tom O'Haver (toh@umd.edu), 2008

Unique visits since May 17, 2008: