Click here for the document download.Web

Information Technology
Industry Skill Standards

High School Curriculum
for
Web Design and Development

Note to Users: This curriculum was designed as an "on-line" instructional tool. Students
access the full curriculum and related resources via the web. The instructors who designed the
curriculum teach at different high schools but use the same curriculum. The web site is "live"
and updated regularly as students and teachers use the various curriculum resources. You can
access the complete curriculum by visiting the Bellingham School District's web site at:
http://www.bham.wednet.edu Click on the Technology link; then click on Web Design.
The CD-Rom included with this package contains a copy of the website and all related lesson
activities that were being used at the time this guide was printed (January 2003).


Document Information
For more information, or to order curriculum materials, please contact:

Linda Cowan, Consortium Director Laurie Stephan, Curriculum Program Coordinator
Whatcom County School-to-Work/ Northwest Workforce Center for Emerging
Tech Prep Consortium Technologies (NWCET)

Office Location: Office Location:
Bellingham Technical College Bellevue Community College
3028 Lindbergh Ave. 3000 Landerholm Circle, SE, N258
Bellingham, WA 98225 Bellevue, WA 98007-6484

Phone: (360) 738-3105, x-409 Phone: (425) 564-4215
Fax: (360) 676-2798 Fax: (425) 564-6193
Email: lcowan@btc.ctc.edu Email: nwinfo@bcc.ctc.edu
Web: www.nwcet.org

Permission to Photocopy and Quote
Copyright © 2002

General permission is granted to educators to photocopy limited material from prepared curriculum
for non-commercial instructional or scholarly use. Permission must be sought from School-To-Work
Consortium in order to charge for photocopies, to quote material in advertising, or to reprint
substantial portions of the document in other publications. Credit should always be given to the
source of the photocopies or quotes by citing a complete reference.

Funding for this Project
This curriculum guide was designed and developed using Industry Skill Standards grant funds made
available through Washington State School-to-Work Transitions, Federal Implementation Grant
Project (School-to-Work Opportunities Act of 1994). Funds distributed through Office of
Superintendent for Public Instruction - Department of Career and Technical Education.

Disclaimer
The curriculum content and opinions expressed herein are those of the authors (teachers) and do not
reflect those of NWCET or OSPI - Career and Technical Education.

Document Credits
Linda Cowan Project Coordination & Grant Funding
Laurie Stephan Curriculum Facilitator (NWCET)
Susan Parker Technical Assistance (Bellingham Technical College)
Scott Wilmot Cover Design (Wilmot Graphics)


Acknowledgements
The following Whatcom County teachers designed and developed three Information Technology
program curriculum guides:

Web Design & Development Curriculum Team
Don Helling, Sehome High School - Bellingham School District
teaches English and web design courses
Joe McAuliffe, Squalicum High School - Bellingham School District
teaches English, SAIL program and web design courses
Karll Rusch, Bellingham High School - Bellingham School District
teaches Tech Connections, technology education & web design courses

PC Hardware Fundamentals Curriculum Team
Steve Andres, Ferndale High School - Ferndale School District
teaches web design, video production & computer hardware courses
Bruce Woodcock, Lynden High School - Lynden School District
teaches math and computer hardware courses
Lee Falta, Bellingham Technical College
teaches computer networking technology courses
Greg Rehm, Bellingham Technical College
teaches computer networking technology courses

Video Production Curriculum Team
Chris Carlson, Squalicum High School - Bellingham School District
teaches video production and technology education courses
Jim Nelson, Blaine High School - Blaine School District
teaches video/broadcast television production and technology education courses

The project participants would like to thank our local IT business partners for providing the teachers
with guidance and project support, workplace tours, job shadow opportunities, summer internship
experiences and classroom visitations as guest speakers.

Bellingham/Whatcom Technology Alliance Group (TAG), John Gargett, President
Dealer Information Systems Bob Brim, CEO
Rivetek Robin Halliday, CEO
Think-a-Tron Media Labs John Mortensen, President
Mindfly Gary Pickering, President
FiberCloud Milissa Miller, Manager
Port of Bellingham John Molder, IT Manager
Tim Cool, LAN/WAN Specialist
KVOS TV/Studio 12 Roger Vater, Technical Director
Attachmate Corporation Kevin Boxx, IT Manager
VisionQuake/Baron and Company Gerald Baron, CEO
Jim Hassi, President - VisionQuake
ConocoPhillips Ferndale Refinery Vicki Whittlesey, IT Manager
James Carrell, Technical Supervisor
SPIE Brian Thomas, Technology Development Manager
Haggen, Inc. Ron Burke, IT Manager
Alpha Technologies Jim Dettman, IT Manager
Solera Group Lori Aswegan, Director of Business Development


Videosmith Productions Lars Kongshaug, President
InterConnect Systems Curtis Dye, President
City of Bellingham/IT Services Department James Baird, Telecommunications Administrator
DigiPen Institute of Technology Jason Chu, COO

The Whatcom County School-to-Work/Tech Prep Consortium gratefully acknowledges the technical
guidance and financial support of the following project partners and sponsors:

OSPI - Department of Career and Technical Education
Kyra Kester, Assistant to Superintendent for Industry Partnerships
Cindy Agnew, Pathway Supervisor - Information Technology Education

Northwest Workforce Center for Emerging Technologies (NWCET)
Peter Saflund, Associate Director
Laurie Stephan, Curriculum Program Coordinator


Project Introduction

For the past three years, the Whatcom County School-to-Work/Tech Prep Consortium has spent a
great deal of time and money helping our local high school partners develop a variety of Information
Technology-related courses. We have found the implementation process to be a challenge. Most of
our schools are faced with limited financial resources to purchase the necessary hardware and
specialized IT equipment, and limited access to teachers who possess the requisite skills and
certifications necessary to teach IT-related courses. We discovered many IT teachers are "self-
taught" with no industry experience or certifications related to IT program skills and competencies.
Many rely on a "canned curriculum" package/textbook to establish program structure and course
content.

As a Consortium we were fortunate to receive a special IT Industry Skill Standards grant made
available through Washington State School-to-Work Transitions funding. The grant project was
intended to help some of our schools begin building strong IT courses linked to our career pathway
model, grounded in current industry standards and providing real-world learning opportunities for
students. The curriculum foundation would be linked to the industry skill standards for Information
Technology careers as developed by the Northwest Workforce Center for Emerging Technologies
(NWCET) located on the campus of Bellevue Community College. We also required teachers to
align the curriculum with the appropriate Washington State EALRs (Essential Academic Learning
Requirements).

Our first challenge was to bring together a group of local high school and college instructors who
would be willing to work together for over a year on the development of this curriculum project! A
call went out to all 13 of our Consortium school partners asking for project volunteers. Nine teachers
expressed an interest. As it turned out, the seven high school and two college instructors represented
three IT career cluster areas which ended up forming the nucleus of this project:
Web Development and Administration: Web Design
Digital Media: Video Production
Technical Support: PC Hardware Fundamentals

Each curriculum team was comprised of instructors from different Whatcom County schools. The
task for each team was to design a "vendor neutral," one semester (two if possible), industry skill
standards-based curriculum appropriate for high school students. A primary goal of the project was
to make sure that all teacher participants have a variety of opportunities to work with local IT
business partners to help develop their IT workplace skills and expertise and to attend training
workshops to prepare for industry certifications. To support this goal, we provided teachers
opportunities to work with local IT professionals in "advisory" meetings, industry tours, site visits,
job shadows and summer internships. Teachers involved in this project were compensated for their
individual curriculum development time, provided with classroom substitutes for various workshops,
given an equipment/resources budget to help expand their program, and provided with paid summer
internships at various worksites across the county.

We hope you will find the curriculum useful as you begin to develop IT programs for your school(s).
As this is being written, the teachers involved in this project are "piloting" the curriculum in their
classrooms. Revisions will be made as new ideas emerge and old lessons discarded. If you have
questions about any of the curriculum components, please feel free to contact the teachers involved in
the project. They would be happy to share ideas about how they have revised the various lessons and
added new ideas. The curriculum we produced is only intended to be a starting place…an outline of
ideas that you can shape to suit the needs of your students and school community.

Table of Contents
Curriculum Introduction...............................................................................................................8
Introduction to Web Design and Development...........................................................................11
Unit 1:
Design and Planning Basics.......................................................................................................14
Unit 1, Module 1A:
Day One - Introduction.............................................................................................................17
Unit 1, Module 1:
Basic Site Evaluation and Rubric Creation...............................................................................25
Unit 1, Module 2:
Color Theory and Web Design Usability..................................................................................32
Unit 1, Module 3:
Initial Storyboarding and Site Mapping....................................................................................38
Unit 2:
HTML Basics...............................................................................................................................42
Unit 2, Module 1:
Basic Tags................................................................................................................................44
Unit 2, Module 2:
Text Formatting Tags...............................................................................................................50
Unit 2, Module 3:
Image Tags...............................................................................................................................56
Unit 2, Module 4:
Link Tags..................................................................................................................................71
Unit 2, Module 5:
List Tags...................................................................................................................................79
Unit 2, Module 6:
Table Tags................................................................................................................................85
Unit 2, Module 7:
Source (Cut & Paste)................................................................................................................94
Unit 3:
Preparing Images........................................................................................................................96
Unit 3, Module 1:
Photoshop Tutorials..................................................................................................................98
Unit 3, Module 2:
Applying Photoshop ..............................................................................................................102
Unit 4:
Intermediate HTML or Controlling Page Layout with Tables.................................................108
Unit 4, Module 1:
Controlling Alignment within the Cell Tag ...........................................................................110

Unit 4, Module 2:
Spanning and Nesting Tables .................................................................................................112
Unit 4, Module 3:
Revising the Home Page of the Personal Web Site Using Tables to Control the Layout........121
Unit 5:
Dreamweaver Introduction/Mock Web Site..............................................................................126
Unit 5, Module 1:
Dreamweaver Tutorials...........................................................................................................129
Unit 5, Module 2:
Applying Dreamweaver..........................................................................................................132
Unit 6:
Culminating Project(s)..............................................................................................................143
Unit 6, Module 1:
Culminating Project................................................................................................................145
Syllabus: Web Design & Development 1 & 2............................................................................149
Web Design 2: Advanced Design and Development:
Preliminary Tutorials..............................................................................................................152


Curriculum Introduction
Web Development and Design One: A Curriculum Based on IT Skill Standards

This document represents the work accomplished developing a beginning level course in web
design for the secondary school student, grades 9-12. Our Bellingham School District team
consisted of web design teachers Joe McAuliffe of Squalicum High School, Karll Rusch of
Bellingham High School, and Don Helling of Sehome High School. The course structure is
grounded in the principles of both the industry skill standards of the National Workforce Center
for Emerging Technologies (NWCET) and Washington State's Essential Academic Learning
Requirements (EALRs). The curriculum was shaped as well by essential hands-on experience in
the workplace, and discussions with members of Whatcom County's information technology
community.

The high school web design course in the Bellingham Public Schools was initiated at Squalicum
High School in 1998 and became a collaborative effort at the three schools beginning in the fall
of 2000. Last spring we were fortunate to be accepted in the Whatcom Tech Prep Consortium's
(WTPC) Industry Skills Standards/IT Career Pathway project. This project was funded by
Washington State's School-to-Work Transition grant through the Office of Superintendent of
Public Instruction (OSPI). The grant fund paid for staff development, site visits, internships with
business, curriculum design and helped us purchase needed equipment.

We came together with strong computer skills but relatively limited experience teaching web
design, as well as varied teaching backgrounds in general (English, Technology, Alternative Ed.,
etc.). It was clear from the beginning that this curriculum template would be a work in progress.
The curriculum would necessarily change with the unknown factors that always seem to crop up
when dealing with technology education, and the three of us would follow the overall structure
but tailor the curriculum to our individual teaching strengths. This is the way we expect other
teachers to use this document. We hope that the units contained in this document will help you
develop your own web design courses based on your individual needs and resources.

We agreed from the start (1) that this would be a project-based curriculum, (2) that it would be
relatively cross-platform -- not linked to a specific software manufacturer or computer, and (3)
that it would include "real-world" soft skill elements while teaching the basics of designing and
creating web pages. (Although we intend this curriculum to be valid using either Mac or
Windows operating system, we were limited to the use of a Windows-based network when
developing and teaching these units).

The summer of 2001 gave us the opportunity to participate in one-week internships in the local IT
community. Joe and Don worked with Mindfly, a local web design firm. Gary Pickering, Rusty
Swayne and David Ladiges offered us personal hands-on instruction in professional web
development. They offered us a close-up view of how important "soft skills" are in the
workplace. The constant communication between employees, as well as with clients, reinforced
our focus on the need for these to be included in our project-based curriculum. The actual projects
centered on the use of current database techniques, which will be the next step in our course
development for Web Design 2, the second course in the web design pathway. Karll spent a week
with a local similar web design firm, focusing on using Photoshop for web graphics.

In addition to this opportunity, we were visited by, and were able to visit, representatives of other
local businesses. Some of these companies were technology-based (such as FiberCloud, a state of
the art data center that hosts a number of web sites and company information databases), while
some were companies with a web presence (the Port of Bellingham, for instance). These visits

Whatcom County School-To-Work/Tech Prep Consortium 8


continued to reinforce the aspects of the course that we had deemed most important. The message
we heard over and over, was that communication, organization and other soft skills were as
important, if not more important, than knowing how to use the technology.

In addition to the general questions, there were a few specific questions that were answered for us
in the internships and community workplace visits. The most important was where we should
place our web page creation emphasis: WYSIWYG programs (such as Adobe's GoLive or
Macromedia's DreamWeaver) or text-based coding. The consensus is that you need some of both.
The reality in smaller web design firms was that most used a combination of programs such as the
Macromedia product HomeSite (basic coding) and DreamWeaver (WYSIWYG). Most employers
felt that a basic understanding of HTML code in a simple text-editor was important to understand
what underlies WYSIWYG editing and in order to work on problems that go beyond the scope of
these programs.

Our curriculum is divided into six units, but please note that they should not necessarily be
approached in a consecutive manner. For instance, Unit 2 outlines basic HTML coding, and
should probably be done along with Unit 1, which covers basic design principles. We leave this
up to the individual instructor's judgment and time constraints.

Additional resources the three of us have used to supplement and reinforce our curriculum
include guest speakers from the local IT community and visits to local IT businesses. These visits
fit nicely with the pathway focus of our curriculum as well as serving to introduce students to the
real world of the IT workplace and related employment opportunities.

The specific links between this curriculum and the NWCET's industry skill as well as
Washington State OSPI's EALRs should be clear in the curriculum unit and module overviews.
As it relates to these two documents, our focus in this course was on improving communication
skills as well as mastering technical skills.

We would like to thank Linda Cowan, Laurie Stephan, and all of our classmates and business
partners for the help they gave us developing this curriculum.

As this is a "work-in-progress" we would welcome feedback and suggestions for any aspect of
this curriculum. Please contact any or all of us at the following email addresses:
Dhelling@bham.wednet.edu Sehome High School
Krusch@bham.wednet.edu Bellingham High School
Jmcaulif@bham.wednet.edu Squalicum High School

We sincerely hope that this curriculum will be useful for those serious about implementing a web
design curriculum based on workplace skill standards and practices. General permission is
granted to educators to download and/or photocopy material from this curriculum for non-
commercial instructional or scholarly use. Permission must be sought from Linda Cowan in order
to charge for photocopies, to quote material in advertising, or to reprint substantial portions of
this document in other publications. Credit should always be given to the source of the
photocopies or quotes by citing a complete reference.

Don Helling Linda Cowan, Director
Joe McAuliffe Whatcom County Tech Prep Consortium
Karll Rusch 3028 Lindbergh Ave.
Bellingham, WA 98225
360-738-0221
lcowan@btc.ctc.edu



SAMPLE JOB
Web You will play a vital role in your company’s
TITLES
presence on the world wide web. You may use web
page development software to create or change web

Develop Web Administrator
pages, inserting text content, graphics and
interactive modules that are often supplied by others
in your organizational team. Before you start, you
Web Architect
ment will probably talk to the many stakeholders in your
company who depend on the organization’s web
presence. You’ll also look Web Designer and
at successful models

and
research software tools to help design the look, feel
and navigation. In some organizations you may be
Web Page Developer
responsible for making sure the web pages and
updates get installed and work with the hardware
associated with the web pages. Producer
Web

Web Site Developer

Web Specialist

Webmaster



Introduction to Web Design and Development

Course Description:
This class is an introduction to the design, creation, and maintenance of web pages and web sites.
Students learn how to work with images, and to properly create, link and maintain web pages.
The course projects progress from introductory work on web design software to the capstone
projects that demonstrate mastery of the NWCET skill standards for information technology.

Course Objectives:
 Students will gain the skills and project-based experience needed for entry into web
design and development careers.
 Students will be able to create web pages and web sites using a variety of strategies and
tools (industry standard software and hardware).

Textbook/Web Resource Recommendations:
Texts regularly used by students as supplements to the course material:
HTML For the World Wide Web, Elizabeth Castro, ISBN# 0-201-35493-4
Creating Web Pages with HTML Simplified 2nd Edition, ISBN# 0-7645-6067-0
Teach Yourself Visually HTML, ISBN# 0-7645-3423-8

Texts used less frequently but helpful for advanced students:
Web Design Studio Secrets, ISBN# 0-7645-3455-6
Designing Web Graphics.3, Lynda Weinman, ISBN# 1-56205-949-1
Master Visually HTML4 and XHTML 1, ISBN# 0-7645-3454-8

A few of the many web sites used as resources in the class:
 Builder.com
 Webmasterbase.com
 Yale Web Style Guide
 Web Page Design for Designers
 CoolHomePages.com
 PageResource.com
 Colormatters.com
 WebDesign at About.com (+web design tips)
 Design Tips, Tutorials and Tricks (175+ links)
 WebMonkey

Hardware/Software Recommendations:
This course was designed using the Microsoft Windows operating system.

These are the basic hardware and software configurations that we have used to create our web
design labs. We recognize that there are many different possible ways to effectively outfit a lab in
order to teach a similar course. In addition to the below software suite, we are currently
experimenting with "virtual tour" photo software, as well as Illustrator, and the 3D modeling
software Rhino as they apply to web design and development.



Operating System:
 Windows 98/2000 or later

Hardware:
 Individual computers
o Minimum 64 Mb of RAM -- preferably greater (128 - 256)
o 166 MHz processor -- preferably greater
o Color monitor -- 17-19 inch, minimum 800 x 600 resolution, 256 color
o CD ROM drive

Lab Hardware:
 One or more of the following
o Flatbed scanner -- (a good stand alone frees up a computer station)
o Digital camera
o Zip drive
o CD Burner

 One of the following:
o Video projector
o Networked server with access to shared drives and internet access, preferably
at T1 or greater

Software:
 Installed on Individual Computers
o Notepad or equivalent text editor
o Macromedia Dreamweaver 3.0 or later
o Adobe Photoshop 5.5 or later
o Macromedia Homesite 4.5 or later
o Microsoft Internet Explorer browser (latest version)
o Netscape browser (latest version)
o Suite of software that includes document, email and presentation software
(Microsoft Office)

Lab Software:
o One or more copies of optical scanning software (Omnipage or similar)
o Limited copies of Macromedia Flash, Adobe Illustrator, Rhino, etc.
o Software for downloading and storing digital camera images

Unit Titles:
The units of this course are presented as separate discrete sequential steps in the process. This
may be a bit deceiving, because as with any curriculum, when put into practice there will be
overlapping and modification between units to suit the individual instructor and class (intro skill
level, size of class and general temperament).

 Unit 1: Design Basics
 Unit 2: HTML Basics
 Unit 3: Preparing Images
 Unit 4: Advanced HTML (Tables)
 Unit 5: Dreamweaver Introduction



 Unit 6: Capstone Projects



Unit 1:
Design and Planning Basics
Overview:
This unit will give students a basic understanding of the beginning design principles that apply to
general web design and development. It will also help them establish criteria for evaluating
websites (their own as well as general sites on the Internet), and introduce them to the site-
planning concepts of developing a site plan and storyboarding. Portions of this unit can be done
away from the computers if necessary.

Industry Skill Standards Covered in this Unit:
Critical Work Function/Key Activity:
A1: Gather Data to Identify Customer Requirements
 Technical Knowledge:
Knowledge of customer interview techniques regarding requirements.
Ability to identify key sources of information.

 Employability Skills:
Ability to identify and prioritize the need for data.
Ability to pose critical questions.
Ability to encourage cooperation.

A7: Create and define preliminary design/mockup
Knowledge of mockup development options and methodologies.
Ability to translate functional features into application/site design.

Ability to generate/evaluate solutions and devise/implement plan of
action.
Ability to demonstrate creative thinking while problem-solving.

A10: Develop project plan
Knowledge of functional and technical specifications, all data models,
site maps, assumptions, constraints and risks.

Ability to analyze organization of information.
Ability to work with minimal supervision and pay attention to detail.
Ability to assess individual knowledge/skills and analyze work
assignments.

B1: Develop site map and application models
Ability to design content structure.
Knowledge of site mapping and information mapping techniques.
Knowledge of graphical user interface design.



Ability to analyze organization of information and transfer information
between formats.
Ability to demonstrate creative thinking process while problem-solving
and apply creative solutions to new situations.

B3: Produce graphic and layout elements
Ability to design user-friendly sites and applications.
Knowledge of company requirements and standards.
Ability to develop aesthetically pleasing elements.

Ability to create original documents and synthesize information.
Ability to follow policies and procedures and work with minimal
supervision.
Ability to interpret and clarify communication.
Ability to prioritize daily tasks and monitor adjust task sequence.

Learner Outcomes/Objectives:
The student will be able to:
 Analyze web pages for audience, purpose, message.
 Create a rubric to evaluate the effectiveness of web sites.
 Design a simple site using storyboarding and site mapping techniques.
 Understand basic color theory and optimal design theory for usability.
 Incorporate color theory and optimal design theory in a model web site.

EALRs:
 Reading:
o The student reads different materials for a variety of purposes.

 Writing:
o The student writes in a variety of forms for different audiences and purposes.
o The student writes clearly and effectively.
o The student analyzes and evaluates the effectiveness of written work.

 Communication:
o The student communicates ideas clearly and effectively.
o The student uses communication strategies and skills to work effectively with
others.
o The student analyzes and evaluates the effectiveness of formal and informal
communication.

Module Titles:
Note: As students work through the modules and lessons in Unit 1, some of the exercises may be
applied to the Personal Web site.

 Module 1A: Day One Class Preparation
 Module 1: Website Evaluation and Rubric Creation
 Module 2: Color Theory and Web Design Usability



 Module 3: Initial Storyboarding and Site Mapping



Unit 1, Module 1A:
Day One - Introduction
Overview:
This is not a separate module, but a day set aside prior to beginning the activities of Module 1 for
introducing the course and outlining the curriculum, class rules and expectations.

Module 1A Lesson:
Lesson 1: Introduction to the course: Length of Lesson: 50 - 60 minutes

 Description:
o Most teachers have specific introductory activities that they like to (or are
required to) incorporate into the first day or two of any class. On day one--or
prior to the start of Module 1--for this course, the teacher will want to cover some
of the following aspects of the course as they apply to a particular school and lab.
It is also helpful to have students complete a short survey of technology skills to
help with planning for the first activities

Here are some discussion points to cover:
a) Ethical elements of computer use in this course
b) Potential job paths (web master, web designer, web developer, etc.)
c) Rules and consequences
d) Grading criteria (sample), as well as incremental checks on capstone
projects
e) Syllabus
f) Documentation/recordkeeping/email management, which includes
electronic portfolio, hard copy file folder, and backup of all work on
Student and Resource drives. This includes an explanation of biweekly
report forms (sample follows) that students fill out-- essentially a journal
of daily activities done at the end of each class session.

Next, you may want to give a short written survey of the students' web design skills
and background to help you decide on initial activities and to decide on team
orientation for early projects, as well as set the pace and overall goals of the
course.

 Learner Outcome:
o At the end of this lesson, students will fully understand the scope of the class as
well as the basic rules, policies, and expectations.

 Activity:
o You may want to develop a short quiz covering ethics, rules and policies that
students must pass and sign in order to use the classroom computers. These can
be kept on file to help hold students accountable for responsible behavior in the
lab.



 Resources Needed:
o Survey form, as well as written syllabus and list of pertinent district and
classroom rules.

 Suggested Assessment:
o The quiz outlined above, or a thorough class discussion covering important
aspects of computer ethics, class rules and policies.



Sample Day One Survey Form
Basic Information and Survey of Web Design Skills

The following is a non-scientific survey intended to tell me something about your aptitudes and
skills that relate to designing web pages as part of a team. Please answer honestly. How you
respond to these questions will not determine your grade. It will, I'm hoping, give me some
information that may help us figure out how you can best contribute to the work we do as a
group. Circle the best response to each question.

Complete this form and email it to me as a Word attachment.

You may add additional information about your computer skills at the end of this survey.

Name:
Parents/guardian name:
Home phone #:
Birthday:
Favorite school subject:

Briefly describe your post-high school plans:

Briefly define your goals and expectations for this course.
For those in Web Design 1, complete the following: (delete all but the appropriate response)

1) My background designing web pages is best described by the following statement:
a. I create web pages not only for myself but for others (either for profit or as a pastime)
b. I have created a page(s) for myself on my own time
c. I have created pages as a school project
d. I have never created a web page

2) My experience with Microsoft Windows is best characterized by the following statement:
a. I am very familiar with the Windows operating system.
b. I'm somewhat familiar with Windows operating system.
c. I haven't used a computer with Windows operating system.

3) To what extent have you already located web design resources (i.e. tutorials, sites with
collections of graphics, icons or animated gifs)?
a. Yes, I have an extensive and up-to-date collection.
b. If I need something I can easily find it on the web.
c. I know what you're talking about but would need to search around.
d. I'm not sure what you're talking about.

4) Which statement best characterizes your skills associated with web page design?
a. I can make a web page from scratch using html code and a text editor (for example
Notepad) and have experience with using a web page editing program (for example
Dreamweaver).
b. I can make a web page from scratch using html code and a text editor, but have no
experience using a web page editing program.



c. I can create a web page but I'd have to rely on a web editor.
d. I use the Internet (the web), but I've never learned to create a web page.
e. When I hear words such as "internet" and "web" I'm curious but not sure what they are.

5) When you take one of those standardized tests on a bubble sheet that requires identifying
errors in sentences, your score is generally…
a. high
b. average
c. Identifying errors is not one of the things I do well.

6) When you get an essay back from a teacher, which of the following statements describes the
paper’s condition:
a. few if any corrections concerning my grammar, punctuation and spelling,
b. 2-5 corrections concerning grammar, punctuation and spelling on each page,
c. The ink from correction marks washes my pages like a sea of blood.

7) How good are you at proofreading your own writing and that of other writers?
a. I'm good at finding errors and can even spot them in the newspaper.
b. When I proofread others work I can usually only find the glaring errors.
c. I wouldn't recognize a run-on sentence if it bit me in the nose I didn't even notice this
one.

8) Which statement best describes your aptitude when it comes to aesthetic matters of art and
design?
a. I have a good sense of which colors, textures, lines and shapes work well together, and
can tell you exactly why things do or don't work together.
b. I have a pretty good sense of design but have difficulty explaining why things do or
don't work together.
c. I've never been too concerned with making things look nice.

9) How well do you perform in art courses?
a. I receive high marks
b. I receive average marks
c. Art is not one of my better subjects

10) Which statement best characterizes your attitude toward order and consistency?
a. My bedroom is meticulously maintained. Every item has a place and a purpose.
b. Once in a while I clean up my room, but I'm not really bothered by clutter
c. An orderly room is not something I value.

11) Which statement best characterizes you?
a. I'm comfortable assisting others with their work even if they haven't requested my
help.
b. I'm comfortable assisting others only after they have requested my help.
c. I'd rather not assist others with their work

12) When working in-groups I like to…
a. I feel very comfortable speaking and like to take an active role.
b. I'm reluctant to speak out but want to participate.
c. I'd prefer someone tells me what to do and I'll do it.



13) I would describe myself as…
a. very organized and I rarely lose things.
b. generally organized but tend to misplace things occasionally.
c. disorganized and lose things frequently.

14) My experience with computer data systems is best characterized by the following statement:
a. I can create directories and know the programs associated with common file
extensions.
b. I haven't any experience with computer data systems.

Additional information that might be helpful to the instructor:



Handout: Grading Criteria for Web Design

Required Daily Assignments: 20% of grade
This is primarily made up of the tutorial work and daily assignments that we complete in class
early in the semester.

Bi-weekly Reports: 10% of grade
Bi-weekly reports provide me with important feedback as to whether or not you are mastering the
course content.
There should be an entry for each day we meet.
The entries should be written in concise but detailed language.
The report is due every other Friday. Use email.
You are responsible for setting aside time to write.

Web Site Projects: 50% of grade
The greatest factor affecting your grade will be the web sites you produce.
We will collectively develop the evaluation tool used to evaluate the web sites you create;
however, there is no easy formula for assigning credit, since some projects may involve very
sophisticated features.
I will rely on self evaluation, peer evaluation, and my own evaluation

Group Participation: 20% of grade
Attendance/tardiness
Cooperation with classmates
No off-task computer use



Handout: Biweekly Report Form
Name:

Biweekly Journal – Online
The biweekly journal entry should be filled out at the end of each working class period.
Fill in the blanks with a detailed report of your activity on each day. For full credit, you
need to include specific skills and programs that you used that day, as well as specific
projects. A short paragraph is usually sufficient for full credit.

Please include absences (school-related/excused/unexcused).
On the due dates below, print out and put the completed Journal report in your folder.
Date Activities, projects, programs used, etc.

Grade
(Instructor will fill in)
Comments
(Instructor will fill in)

Due dates of Bi-weekly reports:
1. Feb. 11th to March 1st
2. March 4th to March 15th
3. March 18th to March 29th
4. April 1st to April 19th
5. April 22nd to May 3rd
6. May 6th to May 17th
7. May 20th to May 31st



Assignment: Personal Web Page

The purpose of this assignment is to create a personal website as we build our HTML coding
skills in Unit 2 of Web Design and Development.

Using the HTML skills that we learn in Unit 2 and the design ideas from our initial projects in
Unit 1, you are to create a personal web page to your own specifications. You are free to express
yourself as you wish so long as you do not violate district policy. You will be required to provide
documentation illustrating each of the following steps in the design process:

Purpose Statement-a brief word-processed document clearly defining your objectives (what you
wish to accomplish) for creating the web page and the audience you intend to reach. (10pts)

Project Plan-this should include a hardcopy of your site map (outline) and your storyboard
(sketch). The site map will list the page names and content in outline form. The storyboard will
illustrate the page layout and site organization, including links and image locations. (10pts)

HTML Code-the page itself must meet the following requirements: (using notepad text editor)
minimum of 4 pages with working internal links to and from home page
 Include a color scheme with a background color or image
 Include 2 tables one that includes external links, one that includes text and images.
 Include images appropriate size for page
 Thumbnail links to larger images if appropriate
 Captions/descriptions if necessary
 Include links to related sites
 Meet your specified objectives
 Utilize proper file organization
 Use proper spelling and grammar
(10pts ea.)

Peer Evaluations-Evaluate 4 peer web pages. Include 4 evaluations received from your peers in
your portfolio (using the class-designed rubric). Peer evaluations will be performed in class.
(10pts)

Redesign-Consider peer evaluation comments and feedback in redesigning your web page. This
is your chance to work out all the quirks!

You will turn in a portfolio containing the required documentation and present your web page to
the instructor at the end of this unit. You must be able to show how each HTML Code
requirement is met in order to receive credit for it, so make sure your page is working well before
you present it!



Unit 1, Module 1:
Basic Site Evaluation and Rubric Creation
Overview:
These two lessons give students a basic understanding of the principles behind effective web site
design and implementation.

Module 1 Lesson:
Lesson 1: Surveying the Possibilities: Time for Lesson: 60 - 90 minutes

 Description:
o Before we start creating web pages of our own, we need to decide for ourselves
what makes a "good" web site. This lesson opens up the discussion of design
principles and how they relate to the relevant rhetorical strategies of purpose,
audience and message, as well as technical issues and limitations.

 Learner Outcomes:
o At the end of this lesson, students will have a basic understanding of the elements
and principles of "good" web site design and construction. They will begin to
understand that this evaluative term changes in relation to audience, purpose and
message.

 Activity:
o Look over the “Surveying the Possibilities” assignment sheet (following) and
have students begin. As students finish the assignment, have them share what
they have found. Prompt students to look at different aspects of web site
evaluation if necessary.

 Things to consider:
o You may want to have a few sites stored on CD-ROM or a central file server in
case the connection to the Internet is down.
o This assignment may be done in small groups if computer access is limited.
o It is important that the students come up with the criteria themselves for this
initial lesson. Later, they can compare their criteria with other students as well as
with industry standards.

o Internet access.

o Discussion following the assignment.
o This assignment may be graded separately from the module.



Assignment: Surveying the Possibilities
The purpose of this assignment is to begin considering what makes a quality web site.

Examine the advice given at this site to start developing useful terminology for critiquing web
sites.

Learning space site : School HomePage Building Blocks

Criteria used by others:

Bill Hurd, Manager
Encyclopedia Britannica
Wall Data corporation

1. visual complexity 1. depth, accuracy, completeness, & utility
2. amount of information 2. quality & effectiveness of presentation
3. flow 3. credentials of the author
4. theme 4. elegance of design & ease of navigation
5. accessibility to other areas 5. frequency of revision
6. usage 6. quality of graphics or multi media
7. bandwidth issues
8. browser support
9. backend data publication

 Visit as many high school web sites as possible (and a few commercial web sites) while
keeping detailed notes about what you observe.
 Rate each site from 1 to 5 (5 being the highest).
 Comment on the site’s design. Does the site look good? What is the eye drawn to
immediately?
 Comment on the site’s content. What seems to be the main purpose of the site? Is the
purpose clear?
 Comment on the site’s noteworthy features. How do the features enhance the site’s main
purpose?



Create a table for your notes which looks something like this:
School/Co. URL Rating Design Content Features

1

2

3

4

5

6

+

 Look at schools in our district, state and around the world. Focus mainly on high schools,
but elementary school, middle school, and district pages may also be good models.
 Record as many excellent examples as you are able to find (at least two) and two horrible
examples.
 Visit at least two commercial sites and record one good example and one bad example.

List of Bellingham School
http://www.bham.wednet.edu/schools.htm
District schools
Washington state registry of
schools on the World Wide http://web66.coled.umn.edu/schools/US/Washington.html
Web
International registry of
schools on the World Wide http://web66.coled.umn.edu/schools.html
Web.



Module 1 Lesson:
Lesson 2: Developing a Web Site Evaluation Tool -- Part I: Time for Lesson: 60 - 90 minutes

 Description:
o We have had a discussion about principles of "good" web design, and made some
basic decisions concerning what we feel makes a web site effective. Using this
information, students will now construct a web site evaluation rubric and defend
it in a short presentation to the class.

o At the end of this lesson, students will have constructed a preliminary web site
evaluation tool, and presented it to the class.

 Activity:
o Give the students an overview of the assignment and a timeline for completion of
the presentation. This project is best done in small groups, possibly formed from
the previous lesson.

 Handout/Resources Needed:
o Presentation software (PowerPoint).

o Assess presentations and resulting discussion.



Exercise: Developing a Web Site Evaluation Tool
The purpose of this assignment is to challenge, test and ultimately come to general agreement on
evaluation criteria for web sites. This exercise is student-driven, although the teacher may need
to jump in and help if the need arises.

The Final Product:
 Will be a PowerPoint presentation between 8 to 11 slides.
 Will have one introductory slide with credits for tasks performed by each member of the
group.
 Will have one slide that displays the evaluation rubric in table form, including 4-7 main
traits.
 Will have a numeric scale to assess level of mastery, and descriptors that define major
point values on the numeric scale.
 Will have a rational that explains the importance of each trait (4-7 slides).
 Will have a completely scored evaluation rubric of the web site www.cheese.com/.
 Will have a slide detailing traits in which there was agreement and traits in which there
was disagreement explaining why.

Process:
 Pair up and take five minutes to share and discuss the merits and problems of two sites
each from lesson one's activity. One site should be a clear example of good design and
one an example of poor design. Discuss specific traits that could be used to evaluate sites.
 On a piece of notebook paper, write down the URL's for the four sites (two for each
person) with positive and negative traits and turn it in to the instructor.
 Join another pair and now in a group of four, review your lists of traits that were
generated in step one. Synthesize the list to no fewer than four but no more than seven
general traits that could be used to evaluate almost any web site. As much as possible,
make each trait discrete and clear. Combine similar traits. Eliminate redundant, obtuse, or
invalid traits.
 Once you reach consensus on the traits, decide on a numeric scale for judging how well a
web site fares for each of the traits.
 Brainstorm a list of descriptors that define major point values on the numeric scale. If
you get stuck, here is a list of descriptors that may help (following).
 Now that you have all the components for the evaluation rubric, sketch the complete
evaluation rubric with a marker on butcher paper, or using a table in Word or similar
program on the computer.
 Each person in your group will now individually use this evaluation rubric to evaluate the
following site: www.cheese.com. It is important that you evaluate the site without
collaboration or discussion
 After all members have had enough time to evaluate, compare how your group members
scored www.cheese.com with each major trait.
 If someone in the group rated a trait radically different from the rest, ask them to explain.
 Develop and present your PowerPoint presentation following the guidelines above.
Present your powerpoint to the class.



Handout: Sample Descriptors for Web Evaluation
Some Possible Comments for Explanation of Score: Point to specific details of site in your
explanation.

Navigation:
Specific links missing or not working properly
Links difficult to find on page or inconsistent
Navigation bar consistent and easy to use

Graphics/Design:
No pleasing graphical elements
Inconsistent color or design within site
"Square" internet graphics
Color scheme repeated and consistent within site
Effective use of animation

Access/Speed:
Graphics not streamlined for low bandwidth access
Formatted for IE or Netscape only
No options for low bandwidth access
Options for low bandwidth or high bandwidth access
Streamlined for access with low bandwidth access

Currency:
Information obviously out of date (be specific)
Some outdated links or information but not so that it detracts from the site
Nothing out of date/ structured so that currency isn't an issue (N/A is okay for Not "Applicable")

Relevant Content:
Pointless unorganized information
Connection between content and purpose of site not clear.
Have to leave site for some relevant information
Content clearly connected with purpose of site.



Module 1 Lesson:
Lesson 3: Developing a Web Site Evaluation Tool -- part II: Time for Lesson: 60 - 90 minutes

 Description:
o Now that the class has carefully examined possible student generated rubrics, it's
time to create and test a rubric that may be used to evaluate all student web sites
for the remainder of the course. It is best if this is a student-generated document
using the traits and descriptors that they presented in lesson two, but the final
decision may need guidance to avoid redundant traits, or big holes in evaluation
categories.

o Students will have critically examined and evaluated self-designed rubrics and
created a web page evaluation tool. They will have reinforced design principles
necessary for creating effective web pages later in the course.

 Activity:
o On the white board, projection system or overhead, create a table and have the
class hammer out the details of traits and descriptors to be used in this class web
site evaluation tool.

o Internet access.

o Have the students end the lesson by testing the rubric against a series of
previously chosen sites, and evaluating the rubric for any necessary revision.



Unit 1, Module 2:
Color Theory and Web Design Usability
Overview:
These two lessons teach and reinforce basic color and design principles in order to help students
build effective web sites.

*Teachers Note:
The final product in both lessons in this module is an addition to the "Personal Web
Page." This is usually begun in unit 2 and done concurrently with the design
principles of Unit 1. But if you have not begun coding the personal pages yet, you
can easily change the final product to be sketches (in Lesson 1) or a word processed
document (Lesson 2).

Module 2 Lesson:
Lesson 1: Color Theory in Web Design: Time for Lesson: 60 - 90 minutes

 Description:
o Students are now ready to explore the use of color theory in web design. This
lesson should be done following the "Personal Web Page" created in Unit Two.

o At the end of this lesson, students will recognize terminology, principles and
elements of the effective use of color in web page design. Students will also
create examples of using specific color schemes in web page layout.

 Activity:
o Begin by having students open the link to the Lesson 2-1 assignment page in unit
1 (following).
o They will then view the online slide presentation on Color Theory in Web Design
(Lesson 2-1a (on disk)).
o Individually, using markers and other color art supplies, students will design full
color rough sketches on paper of two web sites, modeling them after the example
sites and basing them on two of the following four color schemes:
• Monogamous
• Complimentary
• Triadic
• Analogous

o Using what they know of HTML coding for background colors, text colors and
images, they will create two pages following the color scheme sketches as
closely as possible. The pages should be labeled with the color scheme you were
using, but otherwise, the subject matter is up to you. Link these pages to the
personal page you began in Unit 2. (This may involve basic Photoshop use for
those that have been introduced to the program. Searching the web for images
can be time consuming, therefore, you may want to save a number of
monochromatic images in a folder for them to use for this assignment).




o Internet access.
o Images for page creation.
o Color markers and paper for color theory page storyboards.

o Discussion following the assignment.
o This assignment may be assessed separately from the module as one aspect of the
personal page, or the storyboard sketches may be evaluated separately.



Assignment: Color Theory in Web Design
Overview:
The purpose of this assignment is to gain a general understanding of the concepts of color use in
effective web design.

Activities:
View the online slide presentation on Color Theory in Web Design. Using markers and other
color art supplies, design full color rough sketches on paper of two web sites, modeling them
after the example sites and basing them on two of the following four color schemes:
 Monogamous
 Complimentary
 Triadic
 Analogous

When finished sketching the two page designs, have them checked by the instructor.

Now, using what you know of HTML coding for background colors, text colors and images,
create two pages following your design schemes as closely as possible. The pages should be
labeled with the color scheme you were using, but otherwise, the subject matter is up to you. Link
these pages to the personal page you began in Unit 2.

Resources/Online documents:
Experiment with color combinations at this interactive web site: Mundi Design Studios
Color Theory at About.com.

Explore the web site Color, Contrast & Dimension in News Design ...although this site focuses on
print news media, it is very useful to help understand the effects and uses of color theory in
design.

All done?
Show your instructor your completed pages attached as links to your personal page.

Visuals: Color Theory Slide Show (on disk)



Module 2 Lesson:
Lesson 2: Basic Design Concepts in Building Effective Web Pages: Length of Lesson: 60 - 90
minutes.

 Description:
o This lesson helps students understand some of the particular aspects of page
layout design that help to make a web page effective. The activities in this lesson
reinforce the aspects of "good" web page design that were explored in module
one, while focusing on the specific skills and tricks that help a page achieve
effectiveness in the areas of the rubric exercise.

o Students will recognize basic elements of effective page layout design
(reinforcing and building on the activities in Lesson 1-1-3). They will find
examples of effective (and ineffective) page layout.

 Activities:
o Have students open the link to the Lesson 2-2 assignment page in unit 1
(following). In this lesson, they will browse a list of CNET's web design tips,
paying special attention to design, layout and navigation tips, including the
following:
• Above the fold design
• Multiple navigation options
• Narrow column type
• Avoid scrolling text
• Locate logos consistently

o Students will choose three tips for effective page design from this site that they
understand and agree with and return to the school sites that we explored in
lesson one. Find at least three sites that either effectively follow one or more of
your three tips, or sites that run afoul of the principles you chose. Try to cover all
three design tips. Students then create a simple text-based web page describing
the three sites they found and include the following:
• Student name and a title.
• The name and a short description of each of the three design
tips.
• For each site: the name (linked to the site) and a one-
paragraph description of how this site either effectively
follows one of your design tips, or is ineffective because it
does not follow the tip.
• Students should try to follow as many of the design tips as
possible when designing their own pages.
• Finally, they will link this to the main page of your personal
site begun in Unit 2.

*Teachers Note:
You may teach this lesson without the web page construction component by simply
having them create a word processing document with the same information.



o If students have extra time, they may take a look at these other site design
resources for more examples of good and poor design:
• Thoughts on Web Design
• Sites That Bite
• CoolHomePages.com

*Teachers Note:
CoolHomePages is an excellent example site, but it changes examples periodically. You
may want to preview the current lineup before sending your students to it for examples.

o Internet connection
o Text resources on web design (ex: Great Web Architecture)

o Students may share their findings in small groups and come together for full class
discussion on their findings. The instructor may evaluate the web page product
separately or as a component of the personal page. If done on paper, the
instructor may collect it and assess separately.



Assignment: Page Design Elements
Overview:
This lesson will help you better understand some of the basic elements of effective page layout
design principles.

Activities:
Browse this list of CNET’s web design tips at
http://builder.cnet.com/webbuilding/pages/Graphics/CTips/ss06.html. Scroll down to part two
and pay special attention to design, layout and navigation tips, including the following:
 Above the fold design
 Multiple navigation options
 Narrow column type
 Avoid scrolling text
 Locate logos consistently

Choose three tips for effective page design from this site that you agree with and return to the
school sites that we explored in lesson one. Find at least three sites that either effectively follow
one or more of your three tips, or sites that run afoul of the principles you chose. Try to cover all
three design tips.

List of Bellingham School District schools
http://www.bham.wednet.edu/schools.htm

Washington state registry of schools on the World Wide Web
http://web66.coled.umn.edu/schools/US/Washington.html

International registry of schools on the World Wide Web.
http://web66.coled.umn.edu/schools.html

Create a simple text-based web page describing the three sites you found and include the
following:
 Your name and a title.
 The name and a short description of each of the three design tips.

For each site: the name (linked to the site) and a one-paragraph description of how this site either
effectively follows one of your design tips, or is ineffective because it does not follow the tip.

In your page design, try to follow as many of your own design tips as you can.

Finally, link this to the main page of your personal site begun in Unit 2.

Resources/Online documents:
Feel free to use the textbook library for this exercise.

If you have time, take a look at these other site design resources for more examples of good and
poor design:
 Thoughts on Web Design
 Sites That Bite
 CoolHomePages.com



All done? Show your instructor your completed page connected as a link off of your personal
page.
Unit 1, Module 3:
Initial Storyboarding and Site Mapping

Overview:
The purpose of this module is to practice the planning aspects needed to create a quality web site.
Students have visited and critiqued web sites and studied the basics of color theory and design
basics. Now we will use this knowledge to create a mock site plan and series of storyboards as if
we were creating a web site for a client.

Module 3 Lesson:
Lesson 1: Storyboards and Site Maps: Time for Lesson: 60 - 90 minutes

 Description:
o None.

o At the end of this lesson, students will have a basic understanding of the elements
and principles of "good" web site design and construction. They will begin to
understand that this evaluative term changes in relation to audience, purpose and
message.

 Activities:
o Students team up in groups of 2 or 3 and are asked to design a simple web site for
Premier Coffee Mugs, a small shop specializing in selling handmade coffee
mugs, whose owner has decided to take an initial (small) step towards selling her
mugs on the Internet. Your client would like a static information-based web site
(no online ordering for now) and would like the site to be made up of one main
page and 3-5 subsidiary pages.

o The teams begin by developing and printing out a one page initial mock
interview consisting of 5 - 8 questions ( because our client is hypothetical for this
assignment, include the interview answers as well...remember that this client
does not know a lot about the internet). These questions should help determine
purpose, audience, scope, as well as artistic style issues. Here is a sample
students may use as a model (following). The next step for the team is to create a
short written purpose statement and site map. Next teams create storyboards for
the pages using color and text.

o Finally, they fill out a hypothetical list of team duties that would need to be done
(collecting images, creating text content, coding the pages, etc.). Students then
share their project plans with another team and compare strategies and
approaches. You may move to full class discussion following this step. Teams
are to turn in a completed packet to the instructor including:
• interview questions and answers
• purpose statement (paragraph describing the task and your
general approach)



• one page site map
• multipage storyboard w/visual layout and heading text
• team duty list

o Internet access

o Discussion following the team work.
o Grade packet of planning paperwork turned in to team.



Initial Planning Interview Questions: Suggested questions to plan for
your initial interview

1. What is the mission or purpose of your company
2. What are your short and long-term goals for your website?
3. Who are the intended audiences for your website?
4. Why will people come to your site the very first time? What will make them want to come
back?
5. What content will make up your website? Qualify each item listed (Why should it be
included?)
6. What functional requirements are needed on the site? (ex. Forms, transactions, searches)
7. What are the updating needs for the site? Who will do the updating?



Assignments: Storyboards and Site Maps
Overview:
The purpose of this assignment is to practice the planning aspects needed to create a quality web
site. You have visited and critiqued web sites and studied the basics of color theory and usability.
Now we will use this knowledge to create a mock site plan and series of storyboards as if we
were creating a web site for a client.

Activities:
Your team of 2 or 3 students has been asked to design a simple web site for Premier Coffee
Mugs, a small shop specializing in selling handmade coffee mugs, whose owner has decided to
take an initial (small) step towards selling her mugs on the Internet. Your client would like a
static information-based web site (no online ordering for now) and would like the site to be made
up of one main page and 3-5 subsidiary pages. Use your imagination and creativity as well as
your sense of appealing to the right audience for the client's main purpose.

1. Your team should begin by developing and printing out a one-page initial mock
interview consisting of 5 - 8 questions ( because our client is hypothetical for this
assignment, include the interview answers as well...remember that this client does not
know a lot about the Internet). These questions should help determine purpose,
audience, scope, as well as artistic style issues. Here is a sample you may use as a
model.

2. The next step for your team is create a short written purpose statement clarifying
what your team's task and approach will be. Then decide on a site structure and map
out the relationship between pages on a single sheet of paper. This is typically
called a site map. It should include written descriptors of features on each page as
well as clear descriptions of the relationships between pages. What will the hierarchy
of the pages be? Will they follow a linear path, moving from the home page to the
last page, or will there be a home page with four pages all at the next level? Do not
worry about visual design characteristics at this point. Those come with the
storyboarding step, coming up next.

3. Next, create visual storyboards for the pages using color and text. It is not necessary
to spend too much time being neat at this point, but the design elements need to be
clear and the heading text should be worked out. Content text (descriptions, etc.) may
be saved for the site itself. The storyboards usually can be done with paper and pen
away from the computer, but may be done using a graphics program on the computer.
Avoid the use of "canned" planning programs and PowerPoint templates, as they tend
to be too limiting.

4. Fill out a hypothetical list of team duties that would need to be done (collecting
images, creating text content, coding the pages, etc.). Then share your project plans
with another team and compare strategies and approaches.

5. Turn in a completed packet to the instructor, including:
 interview questions and answers and purpose statement (paragraph
describing the task and your general approach).
 one-page site map multipage storyboard with visual layout and heading,
and text team duty list.



Unit 2:
HTML Basics
Overview:
This unit gives the students the basics in HTML code. Most of this unit can be done in Notepad
or a similar text editor.

Industry Skill Standards Covered in this Unit:
Critical Work Function/Key Activity:
B3: Produce graphics and layout elements
Knowledge of various graphical applications and sources of graphic
images.
Knowledge of principles of layout and graphics.

Ability to mentally picture outcomes.
Ability to judge effectiveness of graphics, animation, audio and video
content

B5: Write supporting code
Knowledge of code development procedures.
Knowledge of programming language required for application.
Ability to write clear documents.
Ability to manipulate technology for desired results.

B7: Perform unit and integration testing
Knowledge of unit testing procedures.
Knowledge of error analysis and resolution process.
Ability to use logic to draw conclusions.
Ability to analyze possible causes/reasons.
Ability to identify and correct and troubleshoot malfunctions/failures.

Ability to apply rules and principles to process/procedure and use logic
to draw conclusions.

Learner Outcomes
The student will be able to:
 Analyze web pages for audience, purpose, message.
 Create a rubric to evaluate the effectiveness of web sites.
 Design a simple site using storyboarding and site mapping techniques.
 Understand basic color theory and optimal design theory for usability.
 Incorporate color theory and optimal design theory in a model web site.



EALRs
 Reading
o The student understands and uses different skills and strategies.
o The student understand the meaning of what is read.

 Writing
o The student writes clearly and effectively.
o The student writes in a variety of forms for different audiences and purposes.

 Communication
o The student communicates ideas clearly and effectively.

Module Titles:
Note: As students work through the modules and lessons in unit 1& 2, have them apply each
lesson to a personal web site. This site will be assessed with the personal web site grading rubric:

 Module 1: Basic tags
 Module 2: Text formatting tags
 Module 3: Image tags
 Module 4: Link tags
 Module 5: List tags
 Module 6: Table tags
 Module 7: Source (cut & paste)



Unit 2, Module 1:
Basic Tags
Overview
These three lessons give students the basic elements that make up HTML tags, their structure, and
how they are used.

Module 1 Lesson:
Lesson 1: Elements of Tags (attributes, values, etc.): Time for Lesson: 30 minutes

 Description:
o HTML is the universal mark-up language code, consisting of symbols inserted
before and after text as well as before and after the filenames of graphics to be
downloaded. This code allows Web publishers to create complex pages of text
and images that can be viewed by anyone else on the Web, regardless of what
kind of computer or browser is being used. These symbols are called tags and are
integrated into a text document.

o At the end of this lesson, you will have a basic understanding of the elements of a
tag and their ordering.

 Activity:
o Have students do Elements of Tags (attributes, values, etc.) assignment
(following).

Handout/Resources Needed:
o Common HTML Tags (Unit 2, Module 3 handout)
o HomeSite or NotePad
o Reference Books in classroom.

Suggested Assessment:
o Check students monitors to see that they have mastered the module.
o Grading assessment will come later in project assignment rubric.


Assignment: Elements of Tags
Overview:
HTML is the universal mark-up language code, consisting of symbols inserted before and after
text as well as before and after the filenames of graphics to be downloaded. This allows Web
publishers to create complex pages of text and images that can be viewed by anyone else on the
Web, regardless of what kind of computer or browser is being used. These symbols are called
tags, and are integrated into a text document.

Learner Outcomes:
 At the end of this lesson, you will have a basic understanding of the elements of a tag and
their ordering.

Activities:
 Look over the Common HTML Tags sheet (Unit 2, Module 3 handout) and go over the
common elements.

 Things to consider:
o Opening and closing tags (usually, tags travel in pairs: note the difference
between the two)
o Attributes: Many tags have attributes that offer a variety of options for the
contained text. The attribute is entered between the command word and the final
greater than symbol with spaces (see example below)

 Location of tags/Nesting Tags
o In some cases, you may want to modify your page contents with more than one
tag. The order is very important. Whenever you use a closing tag, it should have
the same relationship to the last unclosed opening tag. (see example below)

<A> </A>

 Values: Attributes often have values (the following are examples of values for attributes
o Align = Left, Center, Right (where left, center, & right are the value for align)
o Text=#color code (where the color code becomes the value)
o Size = number

 Open Homesite
o Note the common tags
o Go to the body tag and just after the y in body press the spacebar
o What appeared?

Handouts/Online documents:
 COMMON HTML TAGS (Unit 2, Module 3 handout)


Module 1 Lesson:
Lesson 2: Essential Tags: Time for Lesson: 40 minutes

 Description:
o There are some basic tags you must add to every HTML document you create. In
this lesson, we will cover the essential tags found in all HTML documents.

o Students will learn the basic tags required for all HTML documents.

 Activity
o Have students go to Lesson 2 and do the assignment (following).

o Reference Books in classroom

o Check students’ monitors to see that they have mastered the module.
o Grading assessment will come later, in project assignment rubric.


Assignment: Essential Tags
Overview:
There are some basic tags you must add to every HTML document you create.

Learner Outcomes:
Students will learn the basic tags required for all HTML documents.

Activities:
 Example of basic HTML document structure:
o Type the following in your text editor
<html>
<head>
<title>Title of your Web page</title>
</head>
<body>
</body>
</html>

You may find it easier to read if you add extra blank lines as you see in the example above.

Note: Extra spaces and blank lines will be ignored when the HTML is interpreted.

 Let's examine each of these tags:
o <html> is typed before all the text in the document. This is the language used to
create Web pages.
o </html> this tag is used at the end of all the text in the document.
o <head> the head provides information about the document including the title.
o </head> closes the head tag and comes after the title.
o <title>You must give your document a title. The title appears in the title bar of
the window.
o </title> closes the title tag.
o <body>The body contains the contents of your document.
o </body> closes the body tag.
o </html> ends the document.

Create a page and experiment with the tags.


Module 1 Lesson:
Lesson 3: Comment Tags: Time for Lesson: 12 minutes

 Description:
o Comments are a diagnostic tool available to HTML authors. Comments remind
the author or future editors why a specific tag was used. The comments appear
only in the HTML document when opened with a text or HTML editor. They will
be completely invisible when readers visit your site.

o To learn the importance of adding comments and use them while writing code.

 Activity:
o Go to the assignment on comment codes (following).




Assignment: Comment Tags
Overview:
Comments are a diagnostic tool available to HTML authors. Comments remind the author or
future editors why a specific tag was used. The comments appear only in the HTML document
when opened with a text or HTML editor. They will be completely invisible when readers visit
your site.

Learner Outcomes:
To learn the importance of comments and use them while writing code.

Activities:
In the previous lesson, you created a basic Web page. Open that Web page and add a comment
code that reminds you to add an image one week from today. Place the comment at the end of the
text near the bottom of the body tag.

 Type  to complete the comment.
 The following is an example of a comment:
 

Save all work.


Unit 2, Module 2:
Text Formatting Tags
Overview:
These three lessons teach students how to change the appearance of text on Web pages. The
lessons cover changing text (size, style, color, etc.), and comparing text to a text image, along
with text alignment.

Module 2 Lesson:
Lesson 1: Changing Text (size, style, font color, etc): Time for Lesson: 45 minutes

 Description:
o In the first lesson, students learn various attributes that will change the
appearance of the text from bold or italics to size, style and font color.

o Students will learn about attributes that will change the appearance of the text
from bold or italics to size, style and font color.

 Activity:
o Changing Text (following)

o Common HTML Tags (Unit 2, Module 3 handout)



Handout: Changing Text
Overview:
In this lesson, students will learn various attributes that will change the appearance of the text
from bold and italics to size, style and font color.

Learner Outcomes:
At the end of this lesson, you will have a basic understanding of different text styles and their
applications.

Activities:
 Bold or Italicize Text
Opening and closing tags usually tags travel in pairs (note the difference between the
two). It is important to understand that making text changes should serve a purpose,
i.e. emphasize a certain aspect of the page.
o To create Bold Text type followed by the text you want to make
bold. End with the closing tag 
o To create Italic Text type followed by the text you want to make
italic. End with the closing tag 

 Changing Font
In some cases, you may want to change the font face. To do so, use the following tags
and attributes. (see example below)
o Type


 Text Color
You can change the color of text on all or part of your Web page. There are names and
color codes for Web-safe colors commonly used. Color codes are often referred to as
a hexadecimal value with six digit combinations of both letters and numbers.

To create a color text, you can specify it as an attribute inside the body tag (see example
below).
o Type<body text="ff00cc"> the text is an attribute inside the body tag that
will give a color to all the text on the page.
o Type<font="ff00cc"> this will give a color to all the text within the font
tags. When finished end with the following tag 

 Changing Font Size
When you need to change the size of text, there are basically two ways to do it. You can
create an exact font size or you can change it relative to the surrounding text.

To create the specific size of one or more characters:
o Type where n is a number from 1-7. At the end of the
text you want to change close with the following tag .

To change the size of text in relation to surrounding text:
o Type where +n or -n is a number specifying how
much bigger or smaller you want the text compared to the surrounding
text. .

Click here for the document download.Web

Click here for the document download.Web

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to Click here for the document download.Web

Similar to Click here for the document download.Web (20)

More from butest

More from butest (20)

Click here for the document download.Web