1: Designing and Planning Web Pages
| 1: Basic Site Evaluation and Rubric Creation
| 1: Surveying the
Possibilities |
Create table with evaluations of one good and one bad site |
|
|
2: Developing a Website
Evaluation Tool |
Develop a website evaluation tool (group activity) |
|
|
2: Color Theory
| 1: Color Theory in Web
Design |
Answer 5 Reading Check questions |
|
|
3: Web Standards & Accessible Design
| 1: Web Standards |
Participate in group activity |
|
|
2: How People with Disabilities
Access the Web |
Participate in various activities |
|
|
4: Planning a Website
| 1: Organizing a Website |
Answer 3 Reading Check questions; organize set of cards |
|
|
2: Creating Pages with HTML
| 1: Pre-Coding
| 1: Pre-coding |
Sketch home page and folder structure |
|
|
2: Basic HTML Markup
| 1: HTML Syntax |
Answer 5 questions |
|
|
2: Essential Tags |
Create six "bare bones" pages |
|
|
3: Common Tags |
Add common HTML tags to index.html |
|
|
3: HTML Lists
| 1: Lists |
Add two unordered lists to index.html |
|
|
2: Creating a Navigation
Menu |
Add a navigation menu (unordered list) to index.html |
|
|
4: Creating Links
| 1: Linking to External Internet
Sites |
Add a working external link to index.html |
|
|
2: Linking to Pages Within Your
Website |
Add a set of working links to the navigation menu in index.html |
|
|
3: Special Types of
Links |
Add "Skip to main content" and email links to index.html |
|
|
5: Creating a Data Table
| 1: Creating a Data Table |
Add a data table to accessibility.html |
|
|
6: Reflections
| 1: Unit 2 Reflections |
Add Reflections content to index.html |
|
|
3: Formatting Web Pages with Style Sheets
| 1: Introduction to Cascading Style Sheets
| 1: Anatomy of a Style |
Add <style> section to index.html containing basic CSS |
|
|
2: Applying Styles |
Add more CSS styles to index.html |
|
|
3: Linking to an External Style
Sheet |
Moved CSS to an external file; add a link element to index.html; copy
various tags to all HTML files |
|
|
2: Color in CSS
| 1: Understanding Color in
CSS |
Select a color scheme for a fictitious site |
|
|
2: Applying Color in CSS |
Select a color scheme for portfolio s site; Add a comment to top of
CSS file with color codes defining site's color scheme; implement;
Apply color scheme to site |
|
|
3: Typography in CSS
| 1: Understanding Typography in
CSS |
Create a list of good and bad sites based on their typography |
|
|
2: Applying Typography in
CSS |
Create two tables listing preferred body and heading fonts; apply
these fonts to site CSS |
|
|
4: The Box Model in CSS
| 1: Understanding The Box Model
in CSS |
Nothing to hand in, but... Understand the box model! |
|
|
2: Applying The Box Model in
CSS |
Add new styles to CSS file; add a <style> section to
accessibility.html with styles for the data table |
|
|
5: The Role of ID and Class in CSS
| 1: Understanding ID and Class in
CSS |
Add class and id attributes to various elements in index.html |
|
|
2: Applying ID and Class in
CSS |
Add styles to CSS file that change the appearance of various elements
based on their id and class |
|
|
3: Pseudo-class Selectors in
CSS |
Add pseudo-class selectors to CSS file |
|
|
6: Page Layout Techniques
| 1: Page Layout with CSS |
Add styles to CSS file that control the position of various
elements |
|
|
2: Stylizing a Navigation Menu
with CSS |
Add styles to CSS file to make navigation menu look like a menu |
|
|
7: Reflections
| 1: Unit 3 Reflections |
Add Reflections content to index.html |
|
|
4: Graphics
| 1: Introduction to Web Graphics
| 1: Introduction to Web
Graphics |
Add new section to graphics.html containing answers to 2 questions on
graphics.html |
|
|
2: Copyright Law and Graphics on
the Web |
Participate in group activity |
|
|
2: Creating a Web Photo Album
| 1: Understanding Web
Graphics |
Add new section to graphics.html containing answers to 5
questions |
|
|
2: Acquiring Images for Web
Graphics |
Acquire 3 images |
|
|
3: Cropping and Resizing |
Produce 6 images in 2 different sizes |
|
|
4: Adding Images to Your Web
Page |
Added photo album to graphics.html |
|
|
3: Creating a Button
| 1: Basic Shapes and
Colors |
Create a basic button shape |
|
|
2: Working With Layers |
Add email and camera icons to buttons |
|
|
3: Optimizing GIF Images |
Export email and camera buttons and add them both to index.html and
graphics.html |
|
|
4: Creating a Favicon |
Create a favicon and add it to site |
|
|
4: Creating a Web Page Banner
| 1: Selection Tools |
Create a practice image by extracting objects from an original source
image |
|
|
2: Layer Effects and
Blending |
Create a banner; add it to site |
|
|
3: Background Images |
Add a background image to site |
|
|
5: Reflections
| 1: Unit 4 Reflections |
Add Reflections content to index.html |
|
|
5: Scripting
| 1: Overview of Scripting on the Web
| 1: Client-side vs Server-side
Scripting |
Participate in group activity; create a list of 3 websites |
|
|
2: JavaScript
| 1: Using JavaScript to Show an
Alert |
Add code to javascript.html that shows an alert |
|
|
2: JavaScript Errors and
Debugging |
Find the bugs in the 3 buggy examples |
|
|
3: Building a JavaScript Clock
Part 1 |
Add code to javascript.html that displays a clock |
|
|
4: Building a JavaScript Clock
Part 2 |
Enhance clock by adding features (with JavaScript) and style (with
CSS) |
|
|
5: Using Javascript to Hide and
Show Content |
Add code to javascript.html that allows users to show or hide the
clock |
|
|
3: Reflections
| 1: Unit 5 Reflections |
Add Reflections content to index.html |
|
|
6: Quality Control
| 1: Validating Websites
| 1: Validating Your HTML |
HTML validation errors fixed in example page; portfolio site passes
HTML validation |
|
|
2: Validating Your CSS |
CSS validation errors fixed in example page; portfolio site passes
CSS validation |
|
|
3: Validating Your
Accessibility |
Add an accessibility review of your school's home page to
accessibility.html |
|
|
2: Testing Usability
| 1: Conducting a Usability
Test |
Participate in group activity; add a usability report to
usability.html |
|
|
3: Reflections
| 1: Unit 6 Reflections |
Add Reflections content to index.html |
|
|
7: Website Management and Authoring Tools
| 1: Web Authoring Software
| 1: Basic Features of Web
Authoring Software |
Add content to a copy of tools.html using web authoring software |
|
|
2: Content, Structure,
Presentation, and Behavior |
Modify styles within copy of tools.html |
|
|
3: Site Management
Features |
Three or more sitewide tests run, reports generated |
|
|
2: Publishing on the Web
| 1: Website Hosting
Services |
Create ranked list of 3 top and 3 bottom choices of web service
providers; participate in group activity |
|
|
2: Website Publishing
Tools |
No assignment. |
|
|
3: Reflections
| 1: Unit 7 Reflections |
Add Reflections content to index.html |
|
|
8: Client Website
| 1: Client Website
| 1: Planning the Client
Website |
Complete Market Analysis worksheet; Organize site; sketch home
page |
|
|
2: Constructing the Client
Website |
Develop client website |
|
|
3: Quality Control of the Client
Website |
Validate website; test accessibility; deliver site to client |
|
|
2: Reflections
| 1: Unit 8 Reflections |
Add Reflections content to index.html |
|
|