Embed Size (px)
Citation preview
Teaching Web Design to High School Students 1
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 2
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 3
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 4
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 5
Instructional Tool:Code Busters
Web Design I Code Busters #2
Name:________________________________________ Date:____________
Directions: There are three errors within the HTM L code below. These errors can include missing tags, incorrect tags, missing information, and misspellings. C ircle the errors in the HTM L 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: ________________________________________________
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
Teaching Web Design to High School Students 6
Sample ProjectsPersonal 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 7
Sample ProjectsClass 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 8
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 9
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 10
Audience Sharing
Look for these projects online at www.btanys.org
Teaching Web Design to High School Students 11
Questions?and
Gifts
Teaching Web Design to High School Students 12
Thank You!
• Contact information:– Fort Plain High School
• Kathie DeKalb ([email protected])
• Nicole Weimer ([email protected])
