1. 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).
3. Web Design and Development
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
4. Web Design and 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
5. Web Design and Development
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.
6. 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
7. 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
8. Web Design and Development
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
9. Web Design and Development
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
Whatcom County School-To-Work/Tech Prep Consortium 9
10. Web Design and Development
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
Whatcom County School-To-Work/Tech Prep Consortium 10
11. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 11
12. 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
Whatcom County School-To-Work/Tech Prep Consortium 12
13. Web Design and Development
Unit 6: Capstone Projects
Whatcom County School-To-Work/Tech Prep Consortium 13
14. Web Design and Development
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
Technical Knowledge:
Knowledge of mockup development options and methodologies.
Ability to translate functional features into application/site design.
Employability Skills:
Ability to generate/evaluate solutions and devise/implement plan of
action.
Ability to demonstrate creative thinking while problem-solving.
A10: Develop project plan
Technical Knowledge:
Knowledge of functional and technical specifications, all data models,
site maps, assumptions, constraints and risks.
Employability Skills:
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
Technical Knowledge:
Ability to design content structure.
Knowledge of site mapping and information mapping techniques.
Knowledge of graphical user interface design.
Whatcom County School-To-Work/Tech Prep Consortium 14
15. Web Design and Development
Employability Skills:
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
Technical Knowledge:
Ability to design user-friendly sites and applications.
Knowledge of company requirements and standards.
Ability to develop aesthetically pleasing elements.
Employability Skills:
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
Whatcom County School-To-Work/Tech Prep Consortium 15
16. Web Design and Development
Module 3: Initial Storyboarding and Site Mapping
Whatcom County School-To-Work/Tech Prep Consortium 16
17. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 17
18. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 18
19. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 19
20. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 20
21. Web Design and Development
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:
Whatcom County School-To-Work/Tech Prep Consortium 21
22. Web Design and Development
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
Whatcom County School-To-Work/Tech Prep Consortium 22
23. Web Design and Development
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
Whatcom County School-To-Work/Tech Prep Consortium 23
24. Web Design and Development
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!
Whatcom County School-To-Work/Tech Prep Consortium 24
25. Web Design and Development
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.
Resources Needed:
o Internet access.
Suggested Assessment:
o Discussion following the assignment.
o This assignment may be graded separately from the module.
Whatcom County School-To-Work/Tech Prep Consortium 25
26. Web Design and Development
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?
Whatcom County School-To-Work/Tech Prep Consortium 26
27. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 27
28. Web Design and Development
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.
Learner Outcomes:
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).
Suggested Assessment:
o Assess presentations and resulting discussion.
Whatcom County School-To-Work/Tech Prep Consortium 28
29. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 29
30. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 30
31. Web Design and Development
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.
Learner Outcomes:
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.
Handout/Resources Needed:
o Internet access.
Suggested Assessment:
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.
Whatcom County School-To-Work/Tech Prep Consortium 31
32. Web Design and Development
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.
Learner Outcome:
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).
Resources Needed:
Whatcom County School-To-Work/Tech Prep Consortium 32
33. Web Design and Development
o Internet access.
o Images for page creation.
o Color markers and paper for color theory page storyboards.
Suggested Assessment:
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.
Whatcom County School-To-Work/Tech Prep Consortium 33
34. Web Design and Development
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)
Whatcom County School-To-Work/Tech Prep Consortium 34
35. Web Design and Development
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.
Learner Outcomes:
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.
Whatcom County School-To-Work/Tech Prep Consortium 35
36. Web Design and Development
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.
Handout/Resources Needed:
o Internet connection
o Text resources on web design (ex: Great Web Architecture)
Suggested Assessment:
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.
Whatcom County School-To-Work/Tech Prep Consortium 36
37. Web Design and Development
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
Whatcom County School-To-Work/Tech Prep Consortium 37
38. Web Design and Development
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.
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.
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)
Whatcom County School-To-Work/Tech Prep Consortium 38
39. Web Design and Development
• one page site map
• multipage storyboard w/visual layout and heading text
• team duty list
Resources Needed:
o Internet access
Suggested Assessment:
o Discussion following the team work.
o Grade packet of planning paperwork turned in to team.
Whatcom County School-To-Work/Tech Prep Consortium 39
40. Web Design and Development
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?
Whatcom County School-To-Work/Tech Prep Consortium 40
41. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 41
42. Web Design and Development
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
Technical Knowledge:
Knowledge of various graphical applications and sources of graphic
images.
Knowledge of principles of layout and graphics.
Employability Skills:
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.
Employability Skills:
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.
Whatcom County School-To-Work/Tech Prep Consortium 42
43. Web Design and Development
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)
Whatcom County School-To-Work/Tech Prep Consortium 43
44. Web Design and Development
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.
Learner Outcome:
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.
Whatcom County School-To-Work/Tech Prep Consortium 44
45. Web Design and Development
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> <B> </B> </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)
Whatcom County School-To-Work/Tech Prep Consortium 45
46. Web Design and Development
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.
Learner Outcome:
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).
Handout/Resources Needed:
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.
Whatcom County School-To-Work/Tech Prep Consortium 46
47. Web Design and Development
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.
Whatcom County School-To-Work/Tech Prep Consortium 47
48. Web Design and Development
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.
Learner Outcome:
o To learn the importance of adding comments and use them while writing code.
Activity:
o Go to the assignment on comment codes (following).
Handout/Resources Needed:
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.
Whatcom County School-To-Work/Tech Prep Consortium 48
49. Web Design and Development
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 <!-- where you want to add a comment, then press the spacebar.
Type the comment, then press the spacebar and type --> to complete the comment.
The following is an example of a comment:
<!-- Add a photo of my school here -->
Save all work.
Whatcom County School-To-Work/Tech Prep Consortium 49
50. Web Design and Development
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.
Learner Outcome:
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)
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.
Whatcom County School-To-Work/Tech Prep Consortium 50
51. Web Design and Development
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 <B> followed by the text you want to make
bold. End with the closing tag </B>
o To create Italic Text type <I> followed by the text you want to make
italic. End with the closing tag </I>
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<font face="type the name of the font you want to use here">
</Font>
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 </font>
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 <Font Size="n">where n is a number from 1-7. At the end of the
text you want to change close with the following tag </font>.
To change the size of text in relation to surrounding text:
o Type <Font Size="+n or -n"> where +n or -n is a number specifying how
much bigger or smaller you want the text compared to the surrounding
text. </font>.
Whatcom County School-To-Work/Tech Prep Consortium 51