Web Project Guidelines

5 Little Musts
 Design Tips
 Final Checklist

Students at Hopkinton Middle and High Schools are encouraged to prepare school- and course-related materials for publication on the school's official web site. Our site is provided courtesy of Comcast, and student pages will be added as long as space is available.

This page explains the "little musts " (the little things that must be in place before your project will be published). It also includes a few design tips, plus pointers to several good "how to make a home page" sites.

The checklist will help you cover all the bases before you submit your work for publication.
Five Little Musts

  • First, our school Guidelines for Student Use of the Internet list several requirements for student web publishing:
    • each project must have a faculty sponsor who will serve as webmaster
    • each project must comply with current copyright law
    • no project may include text, images, movies, sounds, or other elements that contain profanity, obscenity, hate speech, or other offensive language
    • no project may contain links to pages containing profanity, obscenity, hate speech, or other offensive language
    • student identities must be protected
      • students may publish no more than an initial plus their first or last name (J. Doe, Jane D.)
      • students appearing in pictures, movies, or sound clips may be identified or referenced only by their initials (ex., JQP for John Q. Public)
    • students may not publish other identifying information (email address, street address, home phone number, etc.) about themselves or others
  • Second, please follow these conventions for naming folders & files (aka directories & subdirectories):
    • Create a folder (directory) for your project, and give it a one-word name that conveys the subject of your work. Use lowercase letters (no capitals!) for this name.
    • Within that project folder, create a folder (subdirectory) named images. Again, use all lowercase letters. (Now you have two folders, one inside the other. The outside folder is named for your project, and the inner one is named images .)
    • As you work, place your .html file(s) in the project folder, and the graphic files (.gif, .jpg, etc.) associated with it in the images folder. No capital letters here, either -- not even in the extensions (.gif, .html, etc.)
    • Name the opening (or main) page of your project index.html.
    • Be sure to give all of your other files meaningful names. If a page is about deep space, name it deepspace.html; if it's about Ralph Waldo Emerson, name it emerson.html. Use the same logic with your image files: name the .gif of the black hole blackhole.gif, and the picture of Emerson's wife ellen.jpg.
    • Also, if you are working on a Windows 95 or 98 machine when you make your pages, stick to the old 8.3 (filename.ext) naming system used in DOS and Windows 3.11. (Visit NameCleaner to see why.)
    • Finally, once your project is complete, copy the files (still in their proper folders) onto a floppy disk and give them to your faculty sponsor along with a copy of the Checklist . Your sponsor will upload them on the site for you.
    • TIP: It is a very good idea to take that floppy for a test drive on a completely different computer than the one on which you created the pages. Put in the floppy, fire up Netscape or Explorer, and open your pages to see if all of the links and images are just as you want them.
  • Third, copyright matters:
    • The fair use provisions that allow students to use sound clips, pictures, and other bits of copyrighted material for classroom projects do *not* apply to student publications for the web.
    • If you plan to use material that is not your own, you must get permission from the person who created it.
    • Then, place a note at the bottom of your page giving them credit for their work, and indicating that you have gotten their permission to reproduce it on your page.
    • As a further courtesy, include a link to the original.
  • Fourth, put links to the Student Projects page and to Hopkinton Middle & High Schools at the bottom of each of your main pages:
    • For a"Return to Student Projects " link, paste this into your code--
      • Return to<A HREF="http://www.hopkintonschools.org/hhs/projects/hhsprojects.html"> Student Projects</A>
    • And for the Hopkinton Middle & High Schools link, paste this--
      • <A HREF="http://www.hopkintonschools.org/hhs/">Hopkinton Middle &amp; High Schools</A>
  • Fifth, represent your school well. The web is a window on the world, and the Hopkinton Middle & High School site is the world's window on our school. Watch your spelling!




Design Tips

The bookstores -- and the net itself -- are full of html design guidelines and how-to-do-it information. (For some of the best, click here).

Here are three general principles to keep in mind, along with some specifics to explain them.
  • Be Aware of Your Audience
    • Think about the people who will use your web pages.
      • Who are they?
      • What will they expect?
    • Then think about the content of your site.
      • What is it you want to tell or show those people?
      • Do you have that information ready for publication?
    • Finally, think about the overall design of your pages.
      • Plan your site from the perspective of the people who will use it.
      • Use a design that helps you get your points across.
      • Don't let flashy graphics, media clips, or fancy coding get in the way of your message -- substance first, glitz later.
  • Don't Neglect the Basics
    • People will want to know where your page is coming from, so be sure to include this information on your opening page:
      • your name (use first initial & last name, or first name & last initial, as you prefer)
      • your faculty sponsor's name and email address
      • the date you last revised the project
      • the URL of the opening page
        • student project URLs begin with http://www.hopkintonschools.org/hhs/projects/
        • add the name of your project folder after the slash to get your URL
        • example http://www.hopkintonschools.org/hhs/projects/astronomy/
    • There are all sorts of computers, web browsers, and operating systems out there; design your page so that it displays well on as many of them as you can manage.
      • Make sure your pages look good on both Netscape and Internet Explorer .
      • Remember that Windows machines and Macs use slightly different color palettes -- use the 216 colors they have in common.
      • Design for a screen size of 800 pixels x 600 pixels -- there are still a lot of 15" monitors out there!
    • Design for ease of use.
      • Include navigation menus or buttons, so that people can get around your project pages easily.
      • Be sure the "good stuff" is no more than 3 clicks away from the opening page
      • Short pages are better than long ones; many people never go beyond the first screen of information you show them -- so catch them quick and draw them in.
  • Watch Out for Speed Bumps
    • Not everyone has a fast connection.
      • Small pages load faster; try to keep the total size of your page (including images) under 60K.
      • Use thumbnail graphics, and link them to the full size picture so the user can decide which ones to load completely.
      • Specify both width and height for your images.
      • Use the gif format for line art or solid-colored pictures.
      • Use the jpg format for photographs.

Here are some good html helper sites:



Project Checklist

Click here to go to the online web project checklist.

Comments or Questions? Let Us Know.

Return to the Hopkinton Middle High School Home Page.

















Page Created by Michelle Lattke