Overview:
- Advanced Web Design for Teachers
- 3 credits - 45 hours
- Location: Watkins Mill High School
- Dates: 7/11, 7/12, 7/13, 7/18, 7/19, 7/20, 7/25, 7/26, 7/27, 8/1, 8/2, 8/3 Dates in bold are online
- Time: 5:00pm - 9:00pm
Description of the Experience:
Web design has become an extremely popular course in high school. For teachers to take advantage of this popularity they need to be able to use the latest web design software. The Advanced Web Design for Teachers class will give teachers the skills they need in order to challenge their students to create the next level of interactive, educational web sites. Student motivation increases and students’ skills become more marketable when they use the latest software.
In Advanced Web Design for Teachers, participants will gain the skills necessary to create professional looking web sites that adhere to the rules of design, usability and accessibility. Designing web sites is a constantly changing and evolving task involving a multitude of variables. In planning, designing, and creating web sites, designers must choose the line of best fit, working to meet the needs of everyone as best they can.
One of the overall expectations of this course is to provide participants with the skills necessary to create useable and professional looking web sites. Doing so requires more than simply sticking text, images, and links on a page. By beginning with basic questions of design and usability we create a strong foundation that participants can work with and grow from. We will cover XHTML & CSS, as well as several popular graphic and multimedia tools (Fireworks, Flash). The course will blend face to face meeting with online components and provide ample time to practice the material presented.
Course Objectives:
Participants will be able to demonstrate a mastery of the following:
-
Demonstrate an understanding of basic web page design principles and code validation.
-
Demonstrate awareness of design considerations that affect web page construction including audience, browser version and cross platform issues.
-
Demonstrate an advanced knowledge of the Internet and the various tools utilized including: Browsers, FTP clients and search utilities.
-
Demonstrate knowledge of how to plan, design and create effective and structured web pages using HTML / XHTML and CSS.
-
Demonstrate knowledge of appropriate use of color and typography on the web.
-
Demonstrate knowledge of the various tools used to create HTML documents including: Notepad, Adobe/Macromedia Dreamweaver, Adobe/Macromedia Fireworks and Adobe/Macromedia Flash.
-
Demonstrate an understanding of the importance of image optimization and page weight.
Course Outline and Schedule:
General topics to be covered throughout the class:
Good Design Practices
Standards
Accessibility
Publishing and Promoting
Session One:
- Topic: Basic HTML / XHTML
- Introduction to HTML / XHTML
- Block Level Elements
- Link and Image Tags
- Page Validity and Accessibility
Session One Lab:
In Class Work Time
Assignment 1 - Vacation Page
Due Next Class: Complete assignment 1 requirements
Session Two Topics:
- Formatting HTML / XHTML
- Intro. To Cascading Style Sheets (CSS)
- CSS Validation
- Browser Testing
Session Two Lab:
Assignment 2 - Vacation Page
Due Next Class: Completed Assignment 2
Session Three Topics:
- Online Review
- Online Self-test
- Begin Project 1
Due Next Class: Complete project 1 requirements
Session Four Topics:
- Positioning and Advanced Styling with CSS
- Table-less layouts
- Using tables for data
- Page Layout and Balance
- Hosting
- Web Servers
- File Transfer Protocol (FTP)
Session Four Lab:
In class work time
Assignment 3 – Portfolio site
Assignment 4 – Upload and link previous work
Due Next Class: Complete assignment 3 & 4 requirements
Session Five Topics:
- Web Navigation
- CSS-styled navigation
- Server Side Includes (SSI)
Session Five Lab:
In class work time
Assignment 5 – Navigation systems
Assignment 6 – Navigation for Portfolio Site
Due Next Class: Complete assignment 5 & 6 requirements
Session Six Topics:
- Online Review
- Online Self-test
- Project 2
Due Next Class: Complete project 2 requirements
Session Seven Topics:
- Working with Images
- Optimization
- Graphic Creation
Session Seven Lab:
In Class Work Time
Assignment 7 – Optimizing existing images
Assignment 8 – Find excellent image examples
Due Next Class Complete assignment 7 & 8 requirements
Session Eight Topics:
- Advanced Image Techniques
Session Eight Lab:
In class work time
Assignment 9 - Creating banners and buttons
Due Next Class Complete assignment 9 requirements
Session Nine Topics:
- Online Review
- Online Self-test
- Project 3
Due Next Class: Complete project 3 requirements
Session Ten Topics:
- Multimedia Extravaganza
- Introduction to Flash
Session Ten Lab:
In class work time
Assignment 10 - Simple animation
Due Next Class Complete assignment 10 requirements
Session Eleven Topics:
- Multimedia Extravaganza
- Flash Level Two
- Adding images, sound and video
Session Eleven Lab:
In class work time
Assignment 11 - Animated splash screen
Due Next Class Complete assignment 11 requirements
Session Twelve Topics:
Online Wrap up!
Peer Evaluations
Complete Online Peer Evaluations
Assignments:
- Assignment 1 – Participants will create a basic HTML page detailing their summer vacation or vacation plans
- Assignment 2 – Participants will use CSS to add color and style to their vacation page
- Project 1 – The topic is participants choice – must include aspects from assignments 1 and 2
- Assignment 3 – Participants will create a four page portfolio site
- Assignment 4 – Participants will link and upload all previous work, creating a a true portfolio of their work
- Assignment 5 – Participants will create several well-styled navigation systems
- Assignment 6 – Participants will create a well-styled navigation system for their portfolio site
- Project 2 – Participants will use the information gained in the previous lessons to add to their self-selected project.
- Assignment 7 – Participants will determine the best format and compression settings for optimizing images
- Assignment 8 – Participants will analyze and select several well designed graphical headers
- Assignment 9 – Participants will use the examples gathered in assignment 8 as inspiration in creating several banners and buttons
- Project 3 – Participants add graphics and optimize existing graphics to their self-selected project
- Assignment 10 Participants create a simple animation with the available multimedia tools.
- Assignment 11 Participants will add sound and images to their splash screen
- Project 4—Final wrap up and peer evaluation
Evaluation/Assessment:
The portfolio will contain all assignments and projects completed during the course. A rubric will be used to evaluate each assignment and project in the participants’ portfolio. To demonstrate mastery of the class, participants must score higher than a 3 on a 4-point rubric.
Instructional Resources:
Participants will use a variety of websites including w3schools.com, gelstoncafe.com/tutorials/ and others. Although no book is required for the course it is recommended that participants purchase either of the following books. I will be supplying page numbers for both books during the course.
FAQ:
Q: Is this class right for me?
A: This is not an introductory class and it is not an introduction to Dreamweaver. We will be using Dreamweaver but primarily working in code view, working with code is a skill you can transfer to many applications. It is expected that course participants understand the basics of HTML and have spent some time in Dreamweaver or a similar program.
Q: I need to miss a few classes, what is your attendance policy?
A: MCPS suggests that participants of 45 hour courses not miss more than six hours. I have the simple philosophy that you will get out of this class what you put in. To recieve credit you will need to complete the majority of projects.