Using Templates to Produce Web-Publishable Multimedia Projects

http://www.wam.umd.edu/~toh/templates/

Last updated June, 2008

Presented by Tom and Mary O'Haver
toh@umd.edu     ohaverma@verizon.net

Introduction to Web Templates

Tutorials and Examples

Step-by-step procedure for assembling the Alphabet Book sample site. (Open with Wordpad or MS Word). For a quick demo project, you could use the pictures in Florida ABC pix (or its ZIPed version: FloridaABCpix.zip)

Step-by-step procedure for assembling the Zoo Sights and Sounds project. (Open with Wordpad or MS Word)

ABC book of project topics. Some possible topics for Web-based classroom projects (made with the Alphabet Book Template)

How To Create an Alphabet Book on Any Topic.

ABC Books and Activities: Collection of Alphabet Book ideas and examples, compiled by Sue LeBeau.

ABC Books Aren't for Babies!: More than 200 ABC book ideas -- spanning the grades and the curriculum -- by Gary Hopkins. (WordPad or MS Word document)

Using Picasa 2 with Web Templates The best way to get your digital photographs ready for use with our web templates. (Open with Wordpad or MS Word)

Customizing Templates: changing colors, patterns, arrows, adding graphics, sounds, video. (Open with Wordpad or MS Word)

NoteTab: How to Edit Templates in NoteTab Light . (Open with Wordpad or MS Word)

Generic Guidelines for Class Project: Some classroom suggestions for managing a Web publishing project. (2 pages, PDF format)

Making a Web Project with the Class Project Template


Free templates to download:

To download the complete set of templates, click here (or right-click and select "Save Link As..." and click Save.) This will result in a "ZIP" file being downloaded (probably to the My Documents folder). Right-click on that ZIP file and select "Extract All". This creates a folder called "Templates", which you can copy to a USB drive or a CD-R so that you will have a fresh set of templates whenever you need them. The Templates folder contains all of the following templates (each in a separate folder):

Slide Show Template: A simple template for creating simple Web slide shows consisting of up to 30 slides, each with one image and a optional caption. Navigation arrows allow you to go the next slide, previous slide, or back to the title page. All you need to create a slide show is a set of images named "p1.jpg", "p2.jpg", "p3.jpg", etc, in the order that they are to appear. The ReadMe file in this template's folder has step-by-step directions.

Slide Show Template with sound: A simple template for creating Web slide shows consisting of up to 30 slides, each with one image, a sound byte, and a optional caption. Navigation arrows allow you to go the next slide, previous slide, or back to the title page. All you need to create a slide show with sound is a set of images named "p1.jpg", "p2.jpg", "p3.jpg", and a set of sound bytes named "s1.wav", "s2.wav", "s3.wav", in the order that they are to appear (or "s1.mp3", "s2.mp3", etc, if you are using the MP3 version of the template). Sounds can be recorded with a microphone connected to your computer's sound card or by downloading from the Internet. The ReadMe file in this template's folder has step-by-step directions. See the Slide Show Idea Sampler for some ideas using this template.

Video Clip Slide Show Template: A simple template for creating simple Web slide shows consisting of up to 30 slides, each with one video clip (in mpeg format) and a optional caption. (Many digital cameras record video in mpeg format). Navigation arrows allow you to go the next slide, previous slide, or back to the title page. All you need to create a slide show is a set of video clips named "v1.mpg", "v2.mpg", "v3.mpg", etc, in the order that they are to appear. The ReadMe file in this template's folder has step-by-step directions.

Alphabet book template: A template for creating alphabet (ABC) books. Its index already has all the letters of the alphabet arranged in a table, and each page is already titled "A is for...", "B is for...", "C is for...", etc. All you need to create an alphabet book is a set of images for each letter, named "a.jpg", "b.jpg", "c.jpg", etc. The ReadMe file in this template's folder has step-by-step directions. See the finished ABC book for an example using this template.

Alphabet book template with sound: A template for creating alphabet (ABC) books with a sound byte for each letter. All you need to create an alphabet book is a set of images for each letter, named "a.jpg", "b.jpg", "c.jpg"..., and a set of sound bytes for each letter, named "a.wav", "b.wav", "c.wav"....(or "a.mp3", "b.mp3", etc, if you are using the MP3 version). The ReadMe file in this template's folder has step-by-step directions.

Class project template: A template for projects that have a larger quantity of student writing; it consists of a title page with graphic, an index page that links to each of the 30 "student" pages, an optional Bibliography page, a "How we did it" page, and a "Related Sites" page. Each student page has provision for a main heading, sub-heading, a graphic in JPG format, and a paragraph (or more) of body text that wraps around the graphic. Name the graphics "p1.jpg", "p2.jpg", "p3.jpg", etc. Detailed instructions for the use of this template are on the CD-ROM. The ReadMe file in this template's folder also has brief step-by-step directions. For some examples of the use of this template, see Original Tall Tales or Storyteller Dolls.

Class project template with sound: Identical to the Class Project Template, with the addition of a sound byte on each student page. The ReadMe file in this template's folder has step-by-step directions.

GIF Class project template: Same as the Class Project Template, but for graphics in GIF format rather than JPG format. (GIF is best for KidPix drawings and other cartoon-like drawings; JPG is best for digital photographs and scanned artwork). Name the graphics "p1.gif", "p2.gif", "p3.gif", etc. The ReadMe file in this template's folder has step-by-step directions.

Class project template with pictoral thumbnail index: Similar to the Class Project Template, but the index displays postage-stamp-size ("thumbnail") images that link to each of the student pages when you click on them. Use your image editor program (or the "Batch Thumbs" program on the CD) to create thumbnail images for each picture (roughly 100 X 70 pixels in size). Name the graphics "p1.jpg", "p2.jpg", "p3.jpg", etc., and the thumbnails "T1.jpg", "T2.jpg", "T3.jpg", etc. The ReadMe file in this template's folder has step-by-step directions. For some examples of the use of this template, see Famous Marylanders or Black History Commemorative Stamps.

Class project template with sound and pictoral thumbnail index: Similar to the Class project template with pictoral thumbnail index, but with a sound controller on each content page. The ReadMe file in this template's folder has step-by-step directions.

Thumbnail index template with 2 pictures and sound: Similar to the Class project template with sound and pictoral thumbnail index, except that it displays two pictures on each content page (for example, you could have the first picture be of artwork created by a student and the second a photo of the student, or whatever two pictures you want).. The ReadMe file in this template's folder has step-by-step directions. For an example of the use of this template, see Electronic Self-portraiture.


Examples of Class Projects created by Students using our Template Method:

Large collection of template-based student projects from Fairland Elementary School, Montgomery County, Maryland (Mary O'Haver, teacher)

Internet links to other K-8 schools and teachers that have used our templates for Web-published student projects.

Ancillary Material:

Background patterns. A folder containing some background patterns to add to your Web pages. See the ReadMe file in that folder for instructions.

Alternative navigation arrows. A folder containing some alternatives to the normal navigation arrows. See the ReadMe file in that folder for instructions.


Learning More

Three ways to make your own templates (Open with Wordpad or MS Word)

How to Make a Web Page: Make your own Web pages from scratch.

An Introductory HTML Tutorial

Reference Table of HTML Tags

Adding sound to your Web pages (Open with Wordpad or MS Word)

Picasa Photo 2 Organizer.rtf: Using the Picasa Photo Organizer, a free photo organizer that finds all the photos on your computer (WordPad or MS Word document).

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

Unique visits since May 17, 2008: