Transcript Web Design

Teaching Web Design to
High School Students
• What to Teach Students
• How to Teach it
• Sample Projects
• Audience Sharing
• Questions and Answers
Teaching Web Design to High School Students
1
What to Teach
• The foundation of Web Design is HTML (Hypertext Markup Language).
• Web Page Construction Software
– DreamWeaver
– FrontPage
• Graphic Design Tools
– Adobe Photoshop
– Adobe Illustrator
– Flash
• Programming
– Javascript (Dynamic Web Design)
Teaching Web Design to High School Students
2
How to Teach Web Design
1. Instruction – Educate the students through notes and examples
2. Application - Have the students demonstrate their comprehension
through independent guided assignments
3. Expression – Let the students express their creativity and passion
for Web Design through structured projects.
Teaching Web Design to High School Students
3
How to Teach Web Design
• DO NOT MAKE STUDENTS MEMORIZE CODE!!!!!
– It is important that students understand the
meaning of the code, and understand how to use
the code.
– HOWEVER, making the students memorize code
will frustrate them and often make them feel
negatively towards Web Design.
Teaching Web Design to High School Students
4
Instructional Tool:
Code Busters
Web Design I
Code Busters #2
The Code Buster is an instructional tool
to help students analyze code.
A large part of Web Design is being able
to “de-bug” errors in your code.
By using Code Busters on a regular
basis, students will learn how to
independently analyze and fix the
problems in their code.
Code Busters will also help reinforce the
students’ understanding of HTML
Name:________________________________________
Date:____________
Directions:
There are three errors within the HTML code below. These errors can include missing
tags, incorrect tags, missing information, and misspellings. Circle the errors in the HTML code. Then
write down the error correction on the numbered lines below the code.
<html>
<head>
<title>Code Buster 2</title>
</head>
<body>
<h2 style= “text-align: center”>Refrigerator Items<h2>
<ul style= “lit-style-type: square”>
<li>milk</li>
<li>eggs</li>
<li>cheese<li/>
</ul>
</body>
</html>
Correction 1: ________________________________________________
Correction 2: ________________________________________________
Correction 3: ________________________________________________
Teaching Web Design to High School Students
5
Sample Projects
Personal Profile
• In the age of Myspace.com and
Facebook.com one project idea that
really captures student interest is
creating a Personal Profile.
Teaching Web Design to High School Students
6
Sample Projects
Class Schedule
• Have the students turn
their class schedule into
a list using HTML. This
is a great project to
introduce to the
students at the
beginning of the year
while their still trying to
learn their schedule.
Teaching Web Design to High School Students
7
Frames Project
Students design
their own
“Resource
Center” for
courses they
are enrolled in.
These stay on
the server for
use in the
library!
Teaching Web Design to High School Students
8
Table Project
Students
design a
schedule
using a
calendar.
They may use
a team
schedule,
band concert
schedule
Must contain
links to other
pages.
Teaching Web Design to High School Students
9
Audience
Sharing
Look for these projects online
at www.btanys.org
Teaching Web Design to High School Students
10
Questions?
and
Gifts
Teaching Web Design to High School Students
11
Thank You!
• Contact information:
– Fort Plain High School
• Kathie DeKalb ([email protected])
• Nicole Weimer ([email protected])
Teaching Web Design to High School Students
12