1. Web Design
Objective of Course:
Students will develop the technical and creative skills that will enable them to use a variety of software and
create their own computer Web pages.
The focus of the class is to learn HTML and other software, to create Web pages, and to understand the
importance of preplanning, design, color usage, and balancing content. Embedded curriculum will include
legal and business aspects of publishing a website and the variety of purposes websites are used for.
Class Projects:
The Units and projects are:
Unit 1 Introduction and Overview
• Participate in a Web-based Scavenger hunt
http://www.thecoo.edu/~apeter/edgamescavengerhunt.htm
 Make notes for each website about what you like and/or didn't like Using the "Basic Website
Evaluation-Use with Scavenger Hunt."
Overview of Web Design
• Types of Websites
 What makes an effective website?
 Navigation First and foremost
 http://www.webbonanza.com/navigation.html
 Desired Characteristics of a Website
 Effective Attributes of Websites
 http://www.webbonanza.com/effective.html
 Not Effective Attributes of Websites
 http://www.webbonanza.com/noteffective.html
• Quiz Overview – Types of Websites: Navigation, Desired Characteristics, and Effective Websites.
Print to sketch the questions requiring sketches.
• Creating great websites
 View PPT
 Good and Bad websites
 http://www12.brinkster.com/shewison/
 http://rachel.ns.purchase.edu/~rrestian/assignment1/
 Evaluation Criteria PPT
 Evaluation workheet. Complete 3.
1

2. • Understanding Download Rates
 Bits, bytes and all that jazz
 Worksheet
 Picture and rates examples
 Calculating download rates wkst
• Quiz
• Pre-Quiz---Create a PPT on Good vs. Bad Websites
 Minimum of 10 slides
 Use examples of web pages (use links in PPT to go to examples)
 Discuss the evaluation criteria (User Friendly, Courteous Format and graphics,
Aesthetic Appeal, and Credibility and Authority).
 Use proper grammar, spelling, punctuation etc. (Don't forget to practice layout
and design and color usage-as you will in your web pages.
• Quiz Evaluating Websites and Download Rates
Unit 2 HTML
• Overview
 (http://comptech.ruin.org/webdesign/)
 Video on HTML
• Designing Websites PPT
 (http://comptech.ruin.org/webdesign/)
• Basic HTML PPT
 (http://comptech.ruin.org/webdesign/)
• Complete an HTML primer (http://www.htmlprimer.com/). There will be a quiz on this
information. So bookmark the page. And work on it periodically.
• Review Example Page of Tags and Attributes
• HTML Cheatsheet
 My First Website
• and stages of web design
• Reviewing common HTML mistakes
 (http://www.extension.iastate.edu/HTML/MISTAKES/)
• Correct HTML mistakes in an existing Web page (worksheet/quiz)
• Making Background Image for Your Website.
 Using color to enhance your pages
 color in website design
2

3.  Color Reference Handout
 Experiment with the color lab (http://www.visibone.com/colorlab/)
 and background/text color selector (http://www.imagitek.com/bcs.html?)
 or use NetLingo Coloring Book http://www.netlingo.com/more/color/index.cfm
 how the eye perceives color Seeing Color
 how monitors display color
Quiz-Color and Monitors
Using graphic to enhance your pages PPT (http://comptech.ruin.org/webdesign/)
Creating a Navigation Bar in PS (If time permits)
HTML Tables PPT
 (http://comptech.ruin.org/webdesign/)
 Practice making Tables on Website.
Project #1-Create a Personal Website using Instructional Handout.
WYSIWYG's – What You See Is What You Get
Unit 3 FrontPage
Complete a FrontPage Primer (http://msdn.microsoft.com/library/default.asp?url=/library/en-
us/dnfp2ktut/html/004cfp.asp) or FrontPage Tutorial
Macromedia Flash(if time permits)
 Creating a Navigation Bar with Flash
 Creating an Animated Gif with Flash
 FrontPage Exercises on Creating Forms and Tables
 Informational Website Information Sheet
• Project #2 - Design an Informational Website
 Requirements for Informational WS-Assignment
 With 2 Web pages for a family member and/or a friend or your self using FrontPage
3

4. Unit 4 Templates and Domain Name & Web Hosting
• http://www.oswd.org/
http://www.fuzzywebmaster.com/campaign/downloads.php?cid=9
 Or do a search for your own
• Explore domain name registration and website hosting PPT
(http://comptech.ruin.org/webdesign/)
• About Domain Name Registration
 Choosing a Domain Name- Tips
 Registering your Domain Name
• Project #3 – Design a Commercial Webpage.
Final - Individual Choice
• Project #4 - Design and create a Website using one of the methods for creating WebPages you've
learned in this course. Follow Instructional Guidelines for requirements.
4

5. Other potential projects:
• Design a WebQuest project for a current class
o Create two types of online quizzes for the WebQuest project
• Design a guide on how to make a Web site
Student Outcomes:
Students demonstrate the ability to plan, organize and implement their design of various WebPages.
Ability to understand and troubleshoot HTML
To use appropriate software for various applications (HTML, FrontPage, Dreamweaver).
Ability to create a webpage and understand how to create a website for a variety of purposes
(business, personal, information, education etc.)
Understand the importance of content, layout and design to create fabulous websites (embedded).
Understand and use templates for webpage's.
Provide a solid foundation for future courses in Website Engineering, Webmaster, etc.
Become familiar with domain name registration and website hosting.
5

6. Standards
IT9 12-4 Students demonstrate the use of a variety of media and formats to
communicate information and ideas effectively to multiple audiences.
Vermont Framework
1. Unit 1 Introduction
a. 1.19c Conduct effective searches for information and ideas
2. Unit 2 HTML
a. 2.2dd Evaluate approaches for effectiveness and make adjustments
b. 2.2ee Select and apply appropriate methods, tools and strategies.
c. 2.4a Evaluate the effectiveness of a system
d. 2.4b Identify possible improvements
e. 2.4c Test-run the improvements and evaluate their effects
f. 2.4e Identify further possible improvements; and
g. 2.4f Test-run and evaluate results
3. Unit 3 FrontPage
a. Unit 2 HTML Standards apply.
b. 1.20 Students use graphs, charts, and other visual presentations to communicate data
accurately and appropriately.
c. 1.21 Students select appropriate technologies and applications to solve problems and to
communicate with an audience.
d. 2.6 Students apply prior knowledge, curiosity, imagination , and creativity to solve
problems.
e. 2.7 Students respond to new information by reflecting on experience and reconsidering
their opinions and sources of information.
f. 2.8 Students demonstrate a willingness to take risks in order to learn.
4. Unit Templates and Domain Name & Web Hosting
a. Unit 2 HTML Standards apply.
b. 2.6
c. 2.7
d. 2.8
5. Final
a. Unit 2 HTML Standards apply.
b. 2.10 Students generate several ideas, using a variety of approaches.
6