Using Templates to Produce Web-Publishable Multimedia Projects
http://www.wam.umd.edu/~toh/templates/
Last Updated: April, 2005
Presented by Tom and Mary O'Haver
toh@umd.edu ohaverma@verizon.net
Workshop Contents:
How to use 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 amy specific commercial Web editor which would have to be 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.
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:
working with multiple applications and windows simultaneously; text editing, Copy and Paste,
file organization, directory navigation, project planning, using a
Web browser.
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.
Three-hour hands-on workshop format: 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. Requires a Windows or Macintosh computer lab.
Each workshop participant will receive a free custom-made CD-ROM containing: Copies of all handouts; step-by-step instructions for assembling sample sites using text and graphic content provided; a set of eight re-usable templates usable for Windows or Macintosh; a large set of examples of class projects created by students with these templates.
Tutorials and Examples on the workshop CD (Version 12)
Step-by-step procedure for assembling the Alphabet Book sample site. (Open with Wordpad or MS Word)
Step-by-step procedure for assembling the Zoo Sights and Sounds project. (Open with Wordpad or MS Word)
Step-by-step procedure for assembling the Chalk Art sample site. (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)
Picasa Photo 2 Organizer.rtf: Using Picasa, a free photo organizer and editor that automatically finds all the photos on your computer (WordPad or MS Word document).
Generic Guidelines for Class Project: Some classroom suggestions for managing a Web publishing project. (Open with Wordpad or MS Word)
Making a Web Project with the Class Project Template (Web page on the CD-ROM)
How to Make a Web Page: Make your own Web pages from scratch. (Web page on the CD-ROM)
An Introductory HTML Tutorial (Web page on the CD-ROM)
Reference Table of HTML Tags (Web page on the CD-ROM)
Adding sound to your Web pages (Open with Wordpad or MS Word)
Examples of multimedia file types that can be linked to a Web page (Web page on the CD-ROM)
Templates on the workshop CD (in the Templates folder):
Click here to download the entire set of 11 templates in ZIP format
- Slide Show Template: (on the workshop CD in the "Slide Show Template" folder; for use on PCs or Macs). This template is designed 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. Download ZIP file of this template.
- Slide Show Template with sound: (on the workshop CD in the "Slide Show Template with sound" folder; for use on PCs or Macs). This template is designed 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. Sounds can be recorded with a microphone connected to your computer's sound card or by dowbloading from the Internet. See the "Slide Show Idea Sampler" on the CD for some ideas using this template. The ReadMe file in this template's folder has step-by-step directions.Download ZIP file of this template.
- Alphabet book template: (on the workshop CD in the "Alphabet book template" folder; for use on PCs or Macs). This template is designed 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. See the "finished ABC book" on the CD for an example using this template. The ReadMe file in this template's folder has step-by-step directions. Download ZIP file of this template.
- Alphabet book template with sound: (on the workshop CD in the "Alphabet book template with sound" folder; for use on PCs or Macs). This template is designed 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".... The ReadMe file in this template's folder has step-by-step directions. Download ZIP file of this template.
- Class project template: on the workshop CD in the "Class project template" folder (for use on PCs or Macs). This template is designed for project 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, a 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. For some examples of ths use of this template, see
Original Tall Tales or Storyteller Dolls.
The ReadMe file in this template's folder has step-by-step directions. Download ZIP file of this template.
- Class project template with sound: on the workshop CD in the "Class Project Template with sound" folder (for use on PCs or Macs). 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. Download ZIP file of this template.
- GIF Class project template: on the workshop CD in the "GIF Class Project Template" folder (for use on PCs or Macs). 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). The ReadMe file in this template's folder has step-by-step directions. Download ZIP file of this template.
- Class project template with pictoral thumbnail index: on the workshop CD in the "Thumbnail index template" folder (for use on PCs or Macs). Similar to the Class Project Template, but the index has 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. For some examples of the use of this template, see Famous Marylanders or Black History Commemorative Stamps. The ReadMe file in this template's folder has step-by-step directions. Download ZIP file of this template.
- Class project template with sound and pictoral thumbnail index: on the workshop CD in the "Thumbnail index template with sound" folder (for use on PCs or Macs). 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. Download ZIP file of this template.
- Thumbnail index template with 2 pictures and sound: on the workshop CD in the "Thumbnail index template with 2 pictures and sound" folder (for use on PCs or Macs). 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. Download ZIP file of this template.
- KidPix template for Macintosh: KidTempl.hqx (Decode with Stuffit Expander).
Examples of Class Projects created by Students using our Template Method:
Large collection of template-based student projects on this CD.
Fairland Elementary School, Montgomery County, Maryland (Mary O'Haver)
Internet links to other K-8 schools and teachers that have used our templates for Web-published student projects.
Other Material on the CD-ROM:
QuickTimeInstaller.exe: Quicktime 5 for Windows. Use this to install video and sound capabilities into you computer and Web browser.
picasa-google-free.exe: Installer the Picasa Photo Organizer, a free photo organizer that finds all the photos on your computer. Double click picasa-google-free.exe to install and keep clicking Next until the installation is finished. Instructions for use are in Picasa Photo 2 Organizer on this CD.
NoteTab_Setup.exe: Installer for NoteTab Light, a freeware multi-file text editor useful for editing templates. It allows all the files in a template to be opened at once and performs search and replace functions within all the files of one template simultaneously. Great for changing background and text color throughout an entire template, adding image and sound links, or changing graphic or sound file types.
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.
Last updated April 2005. This page is maintained by Prof. Tom O'Haver , Professor Emeritus, The University of Maryland at College Park.
Comments, suggestions and questions should be directed to
Prof. O'Haver at toh@umd.edu.