Lesson Plan
Course Title: Web Technologies
Session Title: Planning & Designing Client Websites
Lesson Duration:
Varies but would be a minimum of one week.
Performance Objective:
Upon completion of this assignment, the student as part of a team will be able to plan, design,
and test a website for a 3rd party client, working within the client's parameters and timelines.
Specific Objectives:
The students will
 work as a team to complete a web design project
 work with a client to conduct a needs assessment
 work with a client to create a development plan
 work with the client in the testing and revision of information and design
 start assembling their portfolio
Preparation
TEKS Correlations: 130.279
 (1)(D) employ effective verbal and nonverbal communication skills;
 (1)(F) demonstrate leadership skills and function effectively as a team member;
 (2)(C) describe understanding of the functions of résumés and portfolios;
 (2)(D) create a portfolio;
 (6)(B) demonstrate skill in testing the accuracy and validity of information acquired.
Instructor/Trainer
References:
Content developer knowledge
Prerequisites:
Before starting this lesson, students should have completed all other web technology
lessons and have a working knowledge of graphics, web coding language, and style
sheets.
For this lesson, the client will be referred to as the sponsor. The teacher should
assemble a list of school clubs and organizations and the people that will be the club
sponsors. The sponsors of the involved clubs and organizations must be open to this
project and willing to work with the students. The students should be divided into teams
of 2 or 3. Each group should be assigned a specific club.
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
1
Instructional Aids:


Presentation
Computers with Internet access for each student
Materials Needed:
 Printout of the presentation (1 per student)
 Pre-Assessment Form (1 per team)
 Needs Assessment Guide (1 per team)
 Website Design Plan Guide (1 per team)
 Sponsor Evaluation Form to be provided to the club sponsors (1 per team)
 Design Rubric (1 per team)
 Wrap-Up activity (1 per student)
 Lesson Quiz (1 per student)
Equipment Needed:
Each student will need access to a computer with web authoring, graphic editing, and word
processing software.
Learner
Introduction
MI
Introduction (LSI Quadrant I):
To introduce this lesson, the instructor should review with the students their
preferred web coding language and style sheet design techniques.
The teacher should give the students an overview of the project and have the class
look at some of the club and student organization websites that currently exist at the
school.
Outline
MI
Outline (LSI Quadrant II):
I.
Instructor Notes:
Lesson preparation (teacher only)
a. Establish a list of clubs and organizations
at the school. Sponsors from these
should be aware and willing to participate
in the project.
b. Group students into teams of 2 or 3.
II.
Lesson presentation
a. Completing a needs assessment
b. Creating a development plan
c. Testing and revision
III.
Assign students to their teams and to their
The participating clubs and
organizations must be
established before starting
the lesson.
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
2
clubs
a. Students should conduct a preassessment of their assigned club’s site.
i. The team should look at any
existing website their club has.
ii. The team should look at other
websites that similar clubs have at
other schools.
iii. The students need to learn about
the club, its mission statement,
club colors (if any), logos, state or
national meetings, and any other
special information about the club
or organization.
Carefully monitor the
students while they are
completing the preassessment of their club.
Some teams may need
guidance in gathering the
necessary information.
IV.
Teams should meet with the sponsor of their
assigned clubs to complete a needs
assessment and design plan for their
website. The instructor should consult with
each team following their meeting with the
club sponsors to review the needs
assessments and design plans.
Students should be prepared
to make suggestions based
on what they learned in their
pre-assessments.
V.
Design the website
a. Students should build the websites for
their assigned clubs.
b. The needs assessment and design plan
should be carefully followed
VI.
Testing and revision meeting
a. Students should meet with the sponsor
for final approval of the site.
b. Students should note any changes
requested by the client.
c. Changes should be made and
represented to the sponsor.
VII.
Wrap-up activity
a. After completing the client website,
students should work on their
employability by creating a resume and
portfolio.
Allow plenty of time for this
phase. Closely monitor
student progress.
When the website is
complete, the team should
meet with the sponsor again
to review the site. When
complete, the team should
provide the sponsor with the
evaluation form.
Students will start working on
their resume and portfolio.
Application
MI
Guided Practice (LSI Quadrant III):
Convey to the students the importance of being prepared before any meeting with a
potential client or sponsor. Let them know that it is very likely that their client/sponsor
may not know what his/her site should have on it or how it should be designed,
especially if they don't currently have a website. It will be the students’ responsibility
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
3
to guide him/her and make recommendations. After being assigned teams and
clubs, students should conduct a pre-assessment of their assigned clubs. The
instructor should carefully monitor each team to assure that they are on task and
gathering accurate information. The teams should complete a pre-assessment form,
and the instructor should take time to visit with each team individually to go over
their pre-assessment form.
MI
Independent Practice (LSI Quadrant III):
Students will be working directly with the club sponsors. They should meet with them
at least twice: first to complete the needs assessment and design plan, the second
for the testing and review phase.
Summary
MI
Review (LSI Quadrants I and IV):
Following the completion of the websites, discuss with students the challenges they
faced: which were expected and which were unexpected?
It is important for the student to understand the client needs to be happy with the
website.
Evaluation
MI
Informal Assessment (LSI Quadrant III):
Have students present their club's websites to the class. The class should discuss
and provide feedback on the design of the sites that were created.
MI
Formal Assessment (LSI Quadrant III, IV):
1. Customer Satisfaction: After completing the website, the students should
provide the club sponsor with the evaluation form. The form should be completed by
the sponsor and returned directly to the teacher.
2. Website Design: The teacher should complete the design rubric on each site to
assign a grade for the design concepts used in the site.
3. Students should complete the short quiz following the lesson.
Extension
MI
Extension/Enrichment (LSI Quadrant IV):
After completing the project, students should start working on their portfolio. A wrapup activity has been provided to start guiding them through the process. Students
can also start working on posting the website online and researching domain names
for their site.
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
4
Icon
MI
Verbal/
Linguistic
Logical/
Mathematical
Visual/Spatial
Musical/
Rhythmic
Bodily/
Kinesthetic
Intrapersonal
Interpersonal
Naturalist
Existentialist
Teaching Strategies
Personal Development
Strategies
Lecture, discussion, journal
writing, cooperative learning,
word origins
Reading, highlighting, outlining,
teaching others, reciting information
Problem solving, number
games, critical thinking,
classifying and organizing,
Socratic questioning
Mind-mapping, reflective
time, graphic organizers,
color-coding systems,
drawings, designs, video,
DVD, charts, maps
Use music, compose songs
or raps, use musical
language or metaphors
Organizing material logically, explaining
things sequentially, finding patterns,
developing systems, outlining, charting,
graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing
with color, mental imagery (drawing in
the mind’s eye)
Use manipulatives, hand
signals, pantomime, real life
situations, puzzles and board
games, activities, roleplaying, action problems
Reflective teaching,
interviews, reflective listening,
KWL charts
Cooperative learning, roleplaying, group brainstorming,
cross-cultural interactions
Natural objects as
manipulatives and as
background for learning
Socratic questions, real life
situations, global
problems/questions
Creating rhythms out of words, creating
rhythms with instruments, playing an
instrument, putting words to existing
songs
Moving while learning, pacing while
reciting, acting out scripts of material,
designing games, moving fingers under
words while reading
Reflecting on personal meaning of
information, studying in quiet settings,
imagining experiments, visualizing
information, journaling
Studying in a group, discussing
information, using flash cards with
other, teaching others
Connecting with nature, forming study
groups with like-minded people
Considering personal relationship to
larger context
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
5
Client Website Pre-Assessment
Before meeting with your sponsor, you must be prepared. Your client/sponsor will be a
representative of a school club or organization. You need to learn all you can about the
club to which you have been assigned. The sponsor may know what he/she wants on
the website, but you will likely need to guide him/her through the organization and set
up of the site. The client/sponsor will also be looking for you to suggest other
information that might have been overlooked. Use this form to gather information that
will help you prepare for your meeting.
Name of assigned club:
______________________________________________________
Sponsor / Contact:
___________________________________________________________
Sponsor's email address:
_________________________________________________________
PART I
If your assigned club has a website, complete the following evaluation. If the club
does not have a website, mark NO on all items.

Does the club currently have a website?
YES
NO

Does the website describe the organization?
YES
NO

Does the website "sell" the club?
YES
NO

Does the website include information about joining?
YES
NO

Does the website include meeting dates/times/location?
YES
NO

Does the website include a calendar of events?
YES
NO

Are important documents provided on the website?
YES
NO

Does the website include important contacts / officers?
YES
NO
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
6
PART II
Research the club you were assigned to and answer the following questions.
You may use the club's current website, state or national websites, club
publications, flyers, etc.
1. What is the mission or purpose of the club?
2. When are the regular meeting dates and locations?
3. If applicable, when and where are the state and national meetings of the club?
4. What are the club's colors?
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
7
5. Does the club have an official logo?
6. List a minimum of 5 pages or links that the club's new website should include.
7. List all items that you marked NO on in Part 1.
8. What other suggestions can you make to your client?
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
8
Needs Assessment Guide
You should take this needs assessment form and your client website pre-assessment form with
you to your meeting with your sponsor. You should complete this form with your sponsor's input.
1. What is the purpose of the website? What does the sponsor/club want to achieve by having
the site?
2. What are the website's specific goals? There should be at least three.
3. What special things must be included for the site to be complete? (Example: database
information, credit-card processing, a counter detailing the number of visitors, etc).
4. Describe the target audience for the website.
5. What information does the sponsor want to provide on the website?
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
9
Website Design Plan Guide
The Design Plan should be completed after the needs assessment at the meeting with the
client. The sponsor must be involved in this phase. He/she will be discussing the design
requirements for the website. When building the site, you must work within the parameters
defined here.
Site Completion Date: _________________________________________
Website Style - Define each of the style elements below.

Color scheme used on site

Font style to be used

Specific graphics or logo
How the site will be updated: Discuss how the site is to be updated. Will the sponsor update
the site? If so, will they need training?
Page Layout - In the space below, sketch the layout for the website. This layout should be used
on all the pages of the site and be able to accommodate the required information on each page.
With the sponsor's input, determine the positioning of the heading/banner, primary navigation,
primary content area, secondary content area, and any graphics that are to be included.
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
10
Website Pages: List each of the pages that should be included on the website and briefly
describe what is to be included on each page.
Storyboard: In the space below, sketch out the arrangement of each of the pages. You should
follow a hierarchical site structure with the homepage at the top.
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
11
Design Rubric
After completing the website, the teacher should review the team's design plan and
website to complete this evaluation. The website should be checked for proper coding
and design techniques.
Team: ____________________________________________
Criteria
Rating
Site followed the design plan: The website should follow the design
plan established with the sponsor.
Structure and navigation: Links for navigation are clearly labeled,
consistently placed, allow the reader to easily move from one page to
related pages (forward and backward), and take the reader where they
expect to go.
Style sheets: External style sheets were used to control the site’s overall
style. All general styles such as background, headings, lists, etc. are set
using the external style sheet.
Color scheme and appearance: A consistent color scheme is used
throughout the site. All text can be easily seen on all the pages, and the
background is not distracting. All graphics are related to the individual
page’s topic and enhance the page’s appearance. No unnecessary or
pointless graphics are used. Each page contains pertinent images
enhancing the page appearance. All graphics use the site's established
color scheme.
Page layout: Content on all pages is well balanced. Advanced table
layout techniques are demonstrated. Pages should not look cluttered;
images should be properly aligned. Contents should not just be centered
down each page.
Design mechanics: Proper and well-structured coding techniques are
used on each page of the site.
Comments:
Score:
___/25
___/15
___/10
___/20
___/20
___/10
_________/100
Deductions (list here):
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
12
Sponsor Evaluation
Team Names: ___________________________________________________
The students should provide this form to the club sponsor after the website has been
completed.
ATTENTION SPONSOR: Please take a few minutes to evaluate the services you
received from the team that designed your website. This is to help prepare them as
professionals, so your comments and suggestions are very important. DO NOT return
this form to the students. It must be returned directly to the teacher. Each item will count
as 10% of the team's grade on the project.
1. Was the team prepared for their first meeting with you?
Comments:
YES
NO
2. Was the team open to your suggestions?
Comments:
YES
NO
3. Did the team involve you in completing the Needs Assessment?
Comments:
YES
NO
4. Is all the content on the website complete?
Comments:
YES
NO
5. Is the page layout and navigation exactly as agreed upon?
Comments
YES
NO
6. Is the color scheme on the site what you requested?
Comments
YES
NO
7. Are the graphics integrated well?
Comments
YES
NO
8. Did the team discuss how the site is to be updated?
Comments
YES
NO
9. Was the website completed by the agreed upon date?
Comments
YES
NO
10. Does the site achieve its purpose as discussed with the team?
Comments
YES
NO
Sponsor Signature
Date
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
13
Name_______________________
Date________________________
Wrap-up Activity
Now that you have real world experience developing a website for a client, you should
start preparing your portfolio. Your portfolio is a collection of work samples that you can
provide to potential clients. You will only start it with this activity because it will always
be a work in progress. As you take on more jobs, you can add to your portfolio. It should
always accurately represent your skill level.
Required supplies:

Your portfolio should be portable, therefore you will need 1 flash drive or CD for
this activity so you can save your work
Required parts:



resume
samples of work
welcome access page
Creating the resume:
You should create a resume on word processing software. Your resume should include
the following:




Personal information and summary
o name
o address
o phone & email
o a short summary detailing your qualifications and aspirations
Education
o current school and expected graduation date
o any training in website design
Work experience
o your current and previous employers should be listed here. Describe
your duties with these positions
o your client website should be listed here
Involvement
o if you are involved in any school activities or groups outside of school
(boy/girl scouts, volunteer work, church, etc), you should list them here
and describe what you do with these organizations
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
14

References
o simply state that they will be provided upon request
Samples of your work:
You should include the client website that you created for this project on your CD or
flash drive. If you have created any other websites, those may be included as well. Be
sure to create separate directories for each of your websites. Including your websites on
the media will allow the site to be viewed without an Internet connection.
Welcome access page:
The welcome page should be the first page that is opened when viewing your portfolio.
A sample page is illustrated below. Don't forget to make the page visually appealing.
Your Name
Contact Information
Link to Online Portfolio if available
Personal Resume:
 Add a link to your resume here
About Me:
Give a short introduction of yourself
Illustrations of Work:
 Link to your client website
 Links to other websites you have created
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
15
Name_______________________
Date________________________
Lesson Quiz
1. The purpose of the pre-assessment is
a. to figure out what the client wants
b. to plan the site's layout
c. to determine the way the content is to be arranged
d. to prepare for the initial meeting with the client
2. The purpose of the needs assessment is
a. to determine what the website should look like
b. to determine what the client wants from the site
c. to determine how the site should be organized
d. to design the style of the site
3. What should be considered in the needs assessment phase?
a. the purpose of the site
b. the website's goals
c. the site's target audience
d. all of the above
4. What should be considered in the development phase?
a. the layout of the site
b. the goals of the website
c. whether the site works
d. all of the above
5. Websites are designed for specific groups of individuals called the
a. web users
b. visitors
c. target audience
d. site purpose
6. If a website's purpose is to establish an organization's presence, it is described
as
a. informative
b. sales/service
c. entertainment
d. research
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
16
7. An illustration of the site structure, or blueprint of how the pages in the website
are arranged, is known as a(n)
a. organization chart
b. storyboard
c. page layout
d. site map
8. Which of the following is NOT defined by the site’s style?
a. font typography
b. color scheme
c. positioning
d. content
9. Page layout should address each of the following except
a. location of graphics
b. navigation location
c. primary and secondary content area
d. color scheme
10. A collection of your work samples that you provide to potential clients is called a
a. blog
b. portfolio
c. resume
d. website
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
17
Lesson Quiz - KEY
Name_______________________
Date________________________
1. The purpose of the pre-assessment is
a. to figure out what the client wants
b. to plan the site's layout
c. to determine the way the content is to be arranged
d. to prepare for the initial meeting with the client.
2. The purpose of the needs assessment is
a. to determine what the website should look like
b. to determine the things the client wants from the site
c. to determine how the site should be organized
d. to design the style of the site
3. What should be considered in the needs assessment phase?
a. the purpose of the site
b. the website's goals
c. the site's target audience
d. all of the above
4. What should be considered in the development phase?
a. the layout of the site
b. the goals of the website
c. whether the site works
d. all of the above
5. Websites are designed for specific groups of individuals called the
a. web users
b. visitors
c. target audience
d. site purpose
6. If a website's purpose is to establish an organization's presence, it is described
as
a. informative
b. sales/service
c. entertainment
d. research
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
18
1. An illustration of the site structure, or blueprint of how the pages in the website
are arranged, is known as a(n)
a. organization chart
b. storyboard
c. page layout
d. site map
2. Which of the following is NOT defined by the site’s style?
a. font typography
b. color scheme
c. positioning
d. content
3. Page layout should address each of the following except
a. location of graphics
b. navigation location
c. primary and secondary content area
d. color scheme
4. A collection of your work samples that you provide to potential clients is called a
a. blog
b. portfolio
c. resume
d. website
IT: Web Technologies: Planning & Designing Client Websites
Copyright © Texas Education Agency, 2013. All rights reserved.
19