There are three ways to use the Class Project 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.

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.

Procedure
1. It is assumed that the "content" for the site, consisting of a text portion (sentence, paragraph or essay) written by each student using a word processor. (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 work 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 using the file names and format required by the template (Pic1.jpg, Pic2.jpg, ...). Reduce the size of the images so they will fit on a Web page conveniently (say, down to 300 - 400 pixels wide) using any image editor (e.g. IrfanView for Windows or Graphic Converter for Macintosh, copies of which are on the CD-ROM). Smaller images will also download faster when the page is viewed on-line.

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. (If you copied the template from a CD-ROM, you must do the following to remove the "read-only" file attributes: Double-click on the copy of the folder. Select "Select All" from the Edit menu. Right-click on any one of the files and select "Properties" from the pop-up menu. Click on the "Read-only" box so that it is not checked and click OK.)

If each student is creating an entire multi-page site, then give each student a separate copy of the template folder; they can re-name the folder with their own unique name. If the class is creating one site, with each student doing one page, you can give each student a copy of their page from the template (e.g. page1.htm, page2.htm, ...) and have them type or Paste their text content into that file, then return the edited file to you (without changing the file name). Even better, if you have a file server that supports folder sharing, place a copy of the template on the file server, set it for shared read/write access, and then each student can open and edit their own page from any computer on the network, save the edited page, and all you have to do is to edit the title and index pages (or assign a student to do it).

When you rename the template folder for your project, 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.

Note: To add more pages to the site, simply go to the last page, select Edit with Notepad, and INCREASE EACH NUMBER ON THE PAGE BY 1 (for example, change 30 to 31, 29 to 30, 31 to 32, etc). Make sure you do this in all the places where page numbers appear - in the graphics and sound links, too. Save the page with a filename that is one higher, e.g. if it was "page30.htm", save it as "page31.htm". Repeat for as many pages as you need. Also, edit the index page (index.htm) to add index references for the additional pages.

4. Transfer (drag and drop) all the processed graphics files to the template folder. Make sure that the file names and formats of the graphics files match those required by the template (Pic1.jpg, Pic2.jpg, ...).

5. To edit the title page: 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.jpg" 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 spaces or punctuation in any of the file names, otherwise your site will not work once you have uploaded it to the Internet. Alternatively, if you prefer, you can change the name of the graphic file itself to Pic1.jpg.

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. To edit the index page: Open the index page (index.htm) 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 30 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 Title Page (title.htm) 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 (For example, to change the text formatting, the background color and pattern, and you can add sound and video content), refer to the handout Customizing Templates. You can also edit the pages using any Web editor listed under the pop-up Edit menu on the right-hand side of Internet Explorer's toolbar. Or you can learn some basic HTML by reading "How To Make A Web Page" and "An Introductory HTML Tutorial".

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/title.htm">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-RW writer on 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. Use CD-R blank disks, not CD-RW blanks, because CD-Rs will work on any computer's regular CD-ROM drive.

If your school or your school district has a Web server, you can also put your site 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.

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.