Humboldt Institute for Technological Studies   Connecting Kids with Technology  since 1996

School Programs
Our Webshop
About Us
Portfolio

hits: School Programs: Curriculum


  Curriculum



Want us
to build
you a site

Educators:
Here's how you
can teach
Web design

What you can
do to
help HITS

Web Design Curriculum for Grades 7-12
What follows is an outline for a Web design curriculum we are developing for the Southern Humboldt Unified School District for students grades 7-12. For K-6 students, we use Wired Digital's Webmonkey for Kids site. - Melanie Chausse'

The Humboldt Institute for Technological Studies (HITS), is a technology education project created by San Francisco-based Web professionals, community members, teachers at Casterlin School and Osprey Learning Center, and local students. HITS was founded four years ago by Kristin Windbigler, who grew up in Blocksburg and is now the executive producer of Webmonkey at Wired Digital in San Francisco. HITS has evolved into a Southern Humboldt Unified School District Web design academy based at Osprey Learning Center

The goal of HITS is four-fold: to offer students from rural schools the skills necessary to compete in a global work force; to have students learn by teaching others; to offer free Web production services to schools and local nonprofits, and to assist the local economy by offering these services to small home-based businesses.

Students will also learn the following job skills: the importance of being on time, meeting deadlines, working with clients, decision making, accepting responsibility for decisions, working with others, compiling a portfolio of work.


First Semester
Credit and Evaluation: Each week's assignment will be valued at 5.5 hours. Students will keep a weekly journal describing what they have learned as well as the development of their Web pages. Student journals will be evaluated by a HITS teacher each week. Students will post their Web pages to an intranet directory for evaluation by student editors, a HITS teacher, and Web professionals. Hard copies of each student's work will be kept in student portfolios.

Week 1: New to the Net
Students will be exposed to and learn from the following tutorials:

Week 2: Using the Internet
Students will be introduced to some of the different uses of the Net:

Week 3: First Web Page
Students will build a practice HTML page that includes basic HTML tags and a basic table using the following:

Week 4: Using Images
Students will learn how to:

Week 5: Tables
Students will learn how to lay out information using tables:

Students will continue to build their practice page which will include:

  • JPEGs
  • GIFs
Week 6: Work on Practice Page
Students will continue to build their practice page which will include:
  • several JPEGs
  • and/or several GIFs
  • table cells of different colors/images/text: 4 columns x 4 rows

Week 7: Frames
Students will build a practice frames page including proper navigation using the following Webmonkey tutorials:

Week 8: First Web Site
Students will begin work on a school- or project-based Web site. Students will:
  • map out their site, including image placement, text, and color scheme.
  • create a template for the pages on their site, which will include a unifying design element and nav bar.

Week 9: Work on Web Site
Students will continue work on a school- or project-based Web site.

  • Students will incorporate images as links into their Web site project.
Week 10: Work on Web Site
Students will continue work on a school- or project-based Web site, incorporating the following:
  • basic HTML tags
  • JPEGS and/or GIFs
  • images as links
  • tables and/or frames
  • a navigation bar
  • copyright
  • a unifying design element

Week 11: Work on Web Site
Students will continue work on school- or project-based Web site, incorporating the following:

  • basic HTML tags
  • JPEGs and/or GIFs
  • image links
  • tables and/or frames
  • a navigation bar
  • copyright
  • a unifying design element
Week 12: Work on Web Site
Students will continue work on school- or project-based Web site,incorporating the following:
  • basic HTML tags
  • JPEGs and/or GIFs
  • images links
  • tables and/or frames
  • a navigation bar
  • copyright
  • a unifying design element

Week 13: Transferring Files
Students will learn how to transferring files to intranet directory set up on the HITS server for posting student work for evaluation purposes. Students will learn how to transfer files to a server using:

Students will continue work on school- or project-based Web site, incorporating the following:

  • basic HTML tags
  • JPEGs and/or GIFs
  • images links
  • tables and/or frames
  • proper navigation
  • copyright
  • a unifying design element
Week 14: Virtual Includes
Using the following tutorials, students will learn how to save time with virtual includes by using them for global site elements like copyrights and nav bars:

Students will continue work on school- or project-based Web site, incorporating the following:

  • basic HTML tags
  • JPEGs and/or GIFs
  • images links
  • tables and/or frames
  • proper navigation
  • copyright
  • a unifying design element

Week 15: Accessible HTML
Students will learn about and discuss the following issues:

Students will continue work on school- or project-based Web site, incorporating the following:

  • basic HTML tags
  • JPEGs and/or GIFs
  • images links
  • tables and/or frames
  • proper navigation
  • copyright
  • a unifying design element

Week 16: GIF Animation
Students will learn how to make GIF animations using:

Students will continue work on school- or project-based Web site.

Week 17: Validation
Students will learn how to make sure their HTML is top-notch with a validator. Students will using the following the tutorial:

Students will continue work on school- or project-based Web site.

Week 18: Design/Image Editing
Students will learn:

Students will continue work on school- or project-based Web site.

Week 19: Design/Image Editing (cont.)
Students will continue work on school- or project-based Web site, incorporating the following:

  • basic HTML tags
  • JPEGs and/or GIFs
  • images links
  • tables and/or frames
  • proper navigation
  • copyright
  • a unifying design element

After evaluation by student editors, a teacher, and Web professionals, students will post their projects on the live hits.org site.

How to be Accomplished
Using both Macintosh and PC platforms, browsers Netscape Navigator/Communicator and Internet Explorer, the online (and print) HITS and/or Webmonkey tutorials provided by the HITS volunteers at Wired Digital, the O'Reilly Book series listed below, the Associated Press Style Guide, and various software programs (Adobe Photoshop, Adobe Premier, BBEdit, Simple Text, Notepad, Macromedia Dreamweaver, Macromedia Flash, GifBuilder, Fetch, and CuteFTP) students will create and maintain a school- and/or project-based Web site. At the end of the first semester students will have completed a school- or project-based Web site and will have earned 5 credits or 100 hours of work.


Second Semester
Credit and Evaluation: Each week's assignment will be valued at 5.5 hours. Students will keep a weekly journal describing what they have learned as well as the development of their Web sites. Student journals will be evaluated by a HITS teacher each week. Students will post their Web pages to an intranet directory for evaluation by student editors, a HITS teacher, and Web professionals. Hard copies of each student's work will be kept in student portfolios.

Week 20: Using Dreamweaver
Students will learn how to use Macromedia Dreamweaver to build pages faster without losing control of their code. Students will use the following tutorial:

Week 21: Using Dreamweaver (cont.)
Students will continue learning how to use Macromedia Dreamweaver.

Week 22: Flash
Students will learn how to make animations using Macromedia Flash as well as learn when and when not to use Flash. Students will use the following tutorials:

Week 23: Flash (cont.)
Students will continue with the Flash tutorials.

Week 24: New Project
Students will be assigned their second school- or project-based Web site.

  • Students will map out their site, including placement of images, text, color and navigation
  • Students will create a template for the pages on their site, which will include a unifying design element and navigation bar.

Week 25: New Project (cont.)
Students will continue to work on their second school- or project-based Web site. Students will:

  • map out their site, including placement of images, text, color and navigation
  • create a template for the pages on their site which will include a unifying design element and navigation bar.

Week 26: RealAudio/RealVideo
Students will be exposed to and learn from the following tutorial:

Week 27: RealAudio/RealVideo (cont.)
Students will continue with the tutorial.

Week 28: Adobe Premier
Students will:

  • learn video editing using Adobe Premier
  • create a one-minute practice video that includes fades, sound, etc.

Week 29: Adobe Premier (cont.)
Students will continue Adobe Premier instruction, lengthening their video to three to four minutes.

Week 30: Work on Project
Students will continue to work on their second school- or project-based Web site, incorporating, when appropriate, video and sound.

Week 31: Work on Project
Students will continue to work on their second school- or project-based Web site, incorporating, when appropriate, video and sound.

Week 32: JavaScript or Photoshop
Students will continue to work on their second school- or project-based Web site, incorporating, when appropriate, video and sound.

Advanced student may begin learning either JavaScript or advanced Photoshop through the following tutorials:

Week 33: JavaScript or Photoshop (cont.)
Students will continue to work on their second school- or project-based Web site, incorporating, when appropriate, video and sound.

Advanced students may continue work on either:

Week 34: JavaScript or Photoshop (cont.)
Students will continue to work on their second school- or project-based Web site, incorporating, when appropriate, video and sound.

Advanced students may continue work on either:

Week 35: JavaScript or Photoshop (cont.)
Students will continue to work on their second school- or project-based Web site, incorporating, when appropriate, video and sound.

Advanced students may continue work on either:

Week 36: JavaScript or Photoshop
Students will continue to work on their second school- or project-based Web site, incorporating, when appropriate, video and sound.

Advanced students may continue work on either:

Week 37: Advanced JavaScript or Information Architecture
Students will continue to work on their second school- or project-based Web site, incorporating, when appropriate, video sound, and/or elements of JavaScript.

Advanced students may begin work on either:

Week 38: Advanced JavaScript or Information Architecture
Students will continue to work on their second school or project based web site, incorporating, when appropriate, video sound, and/or elements of JavaScript.

Advanced students may continue work on either:

Week 39: Advanced JavaScript and Information Architecture (cont.)
Students will continue to work on their second school or project based Web site, incorporating, when appropriate, video sound, and/or elements of JavaScript.

Advanced students may continue work on either:

Week 40: Evaluation of Projects
Students will post their projects on the intranet directory for evaluation by student editors, teachers and Web professionals. Students will complete their second Web site, which will include:

  • Basic and advanced HTML tags
    • tables and/or frames
  • images and/or animations
  • video and/or sound (when appropriate)
  • JavaScript and/or advanced JavaScript (when appropriate)

Week 41: Post to Live Site
After proper evaluation by student editors, teachers and Webmonkeys, students will post their projects on the live Hits.org site.

At the end of the second semester students will have completed a school- or project-based Web site and will have earned 5 credits or 100 hours of work.

How to be Accomplished
Using both Macintosh and PC platforms, browsers Netscape Navigator 3.0, 4.0, and Communicator and Internet Explorer 4.0, the online (and print) HITS and/or Webmonkey tutorials provided by the HITS volunteers at Wired Digital, the O'Reilly Book series listed below, the Associated Press Style Guide, and various software programs (Adobe Photoshop, Adobe Premier, Bbedit, Simple Text, Notepad, Macromedia Dreamweaver, Macromedia Flash, GifBuilder, Fetch, CuteFTP) students will create and maintain both school and project based Web sites.

O'Reilly Book Series
Building Your Own WebSite
Designing for the Web
Designing with JavaScript
Dynamic HTML: The Definitive Reference
Essential System Administration, 2nd Edition
GIF Animation Studio
HTML: The Definitive Guide, 3rd Edition
Information Architecture for the World Wide Web
Internet in a Nutshell
JavaScript: The Definitive Guide, 3rd Edition
Photoshop for the Web
Photoshop in a Nutshell
Shockwave Studio
Web Design in a Nutshell
Web Navigation: Designing the User Experience

Workshops
The HITS volunteers from the Bay Area will provide further instruction with quarterly in-services on various topics.

Credit
Students will be able to earn 5 units per semester (100 hours) for a total of 10 units (200 hours) per year. Continuous credit will be available to students who wish to continue in HITS for more than one year, for a total of 40 units (800 hours).

This course outline was designed with the computer-literate high school student in mind. Because each student brings with them to the class a different level of competancy and desire to learn, students should be encouraged to move at their own pace, mastering specific skills as demanded by their own Web page design. The beauty of using the Webmonkey tutorials as a guide in teaching Web design is their inherent flexibilty and fun.

- Melanie Chausse'

 
  Resources
  Curriculum
  Internships
  School Sites
  Board Policies
 
 
More Sites:

Copyright © 1996-2000 Humboldt Institute for Technological Studies. All rights reserved.