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