Another application for this template is to create an "electronic portfolio" for one student (or for yourself), exhibiting a range of different projects, writing, artwork, photographs, etc.
The advantages of using this template, rather than designing a Web site from scratch using a Web editor program, are three-fold: (1) the template approach is much simpler, requiring no knowlewdge of HTML coding; (2) the emphasis remains on the content of the site, not on its decorative design; (3) if you create several such class projects using this 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.
You can view a simple class project based on this template. You can also view an "empty" template on-line, just to get a feel for the structure of the template and to see its placeholder text (in upper-case). A large set of class projects created by elementary students using our template approach is available on-line. Several other schools and teachers have adapted our templates for their own Web-published class projects.
You can download the template to your computer in ZIP format for PCs and in HQX format for Macintosh .
Procedure
1. It is assumed that you already have the "content" for the site, consisting of
a text portion (sentence, paragraph or essay) written by each student using a
word processor and an accompanying artwork or artifact.
(It is a good idea to assign each student a unique file name, based on their first
name and initial, to be used to save their text and graphic files. Have the
students save their write-ups using their assigned file name. This will
help you keep track of whose works is whose). Collect all
the student's files, making sure that each is named correctly.
2. Scan each student's artwork with a color flat-bed scanner or photograph it with a digital camera. (Consider training your students to do this work themselves). Save the files in JPG format using the same file names previously assigned. (This will help you keep the text and graphics file of each student together). You will probably want to reduce the size of the images so that will fit on a Web page conveniently. You can use any image editor for this task (e.g. Paint Shop Pro for Windows or Graphic Converter for Macintosh).
3. If you do not already have the Class Project Template set, download it from the links above, or copy it from the Template Workshop CD. Rename the template folder for your project, but do not use spaces or other punctuation in the folder name (or in any of the html or graphics file names, for that matter, as it will eventually cause problems when the site is posted to a Unix host).
4. Transfer all the processed graphics (.gif and .jpg) files to the project folder.
5. Open the project folder, then open the title page (title.htm) in a text editor (Simpletext on the Mac or Notepad on the PC). Type in the project title, sub-title, and main text, replacing the upper-case placeholder text. If these is to be a graphic on the title page, type the name of that graphic file into the <img align=left src="TITLE GRAPHIC"> tag, replacing the upper case placeholder text between the quotes. Leave all of the brackets (< and >) and all of the lower-case text unchanged; this is the HTML portion of the page. Save the file without changing its file name and close its window.
6. Open the page 1 (page1.htm) in the text editor. Decide on what order the student pages will be displayed. Open the first student's word processor file, Copy the body text, then Paste it into page1.htm, replacing the placeholder text "TYPE OR PASTE TEXT HERE".
7. Replace "PAGE 1 TITLE" with an appropriate title and "SUB-TITLE" with the student's first name.
8. Replace "pic1.gif" with the complete file name of the student's graphic file, including the extension (e.g. "johnd.jpg"). This must match the graphic file name exactly, even with respect to capitalization and file name extensions. DO not use space or punctuation in any of the file names, otherwise your site sill not work on the Internet.
9. Save the file without changing its file name and close its window (to avoid cluttering up the screen).
10. Repeat steps 6 - 9 for page2.htm, page3.htm, and for all the other students.
11. Open the index page (index.html ) in the text editor. Replace the upper case labels ("PAGE 1", "PAGE 2", etc) with the titles of the corresponding project pages. If there are fewer than 25 pages, simply delete the index page entries for the pages not needed. Save the file without changing its file name.
12. Optional: Open "How.htm" in the text editor, type in a description of how your class did this project, and Save. Open "Biblio.htm" in the text editor, type in a list of books and other reference works that your class used, and Save. Open "Others.htm" in the text editor and type in a list of related Web sites that you and your students have found. These optional pages will make your site much more useful to other teachers and students. If you choose not to complete these pages, remove the links to them from your title page.
13. Open your Web browser (Netscape or Internet Explorer). Check out the entire site by opening the TitlePage with your browser and navigating through the entire set of pages. If you find errors, open the offending HTML pages in your text editor, make corrections, Save the file, switch to your Web browser, and click Refresh. Note: the most common reason that Web pages do not work or that graphics do not show up is that the file names do not match the HTML links to them. Double check and triple check your file names and make sure they agree exactly with the HTML links to them on the pages.
14. If you wish to customize the layout of your site, you can do so by editing the HTML code of the pages, either by using the built-in Web editor of your Web browser or by learning basic HTML. (See "How To Make A Web Page" and "An Introductory HTML Tutorial" for instructions). For example, you can change the text formatting, the background color and pattern, and you can add sound and video content.
15. As you create other projects in the future, place each one in its own folder. You can then create a main index of projects, in the directory level above the project folders, the link to each project. For each project, place a line like this in the main index:
<a href="FolderName/TitlePage.html">Project Title</a>
where FolderName is the name of the project folder and Project Title is the title of the project as you wish it to apprear in the main index.
16. The class projects that you create can be distributed on floppy diskettes (if they fit), on CD-R disks (recordable CD-ROM diskettes that can be created with a CD-ROM writer add-on to your computer), or on ZIP disks. I recommend CD-R disks, because the blank disks are cheap, they hold a great deal, and every computer has a CD-ROM disk reader.
If your school or your school district has a Web server, you can also put your class project on the Internet, so that it can be seen by your parents at home and by students and teachers all over the world. Simply send a disk containing your project folder to the Web server administrators asking that it be posted and that a link to your project be added in an appropriate place on your school's Web site. One of the delights of publishing a class project on the Internet is when you get email from people outside the school who have discovered your students' work and write to complement them. Here are some examples of such email we have received.
Note: Web sites on the Web are naturally compatible with PC or Macintosh, but if you distribute your sites on disks, and you want them to be readable on both PCs and Macs, you must format the disks in PC format and limit all file names (graphic and HTML files) to eight characters with a three character extension.
Download set of three templates, in sit format for Macintosh
http://www.wam.umd.edu/~toh/templates/template.sit
Download template for KidPix Slideshows, in binhex format for Macintosh
http://www.inform.umd.edu/MCTP/Technology/slideshow/template.sit.hqx
Download template with pictoral thumbnail index, in ZIP format for PCs
http://www.wam.umd.edu/~toh/templates/thumbnailtemplate.zip
Download alphabet book template, in ZIP format for PCs
http://www.wam.umd.edu/~toh/templates/AlphabetTemplate.zip
This page is maintained by Prof. Tom O'Haver , The University of Maryland at College Park. Comments, suggestions and questions should be directed to Prof. O'Haver at to2@umail.umd.edu.