jump to content

WaSP InterACT

/ Web Design 1

Web Design 1

FED-100 | Web Standards Project

Learning Modules

HTML Basics, Web Standards Concepts
Overview	This module introduces basic concepts of HTML and the basic reasons behind the need for web standards.
Learner Competencies	Create a site folder Identify the appropriate use of attributes and the syntax of attributes Recognize the difference between HTML and XHTML Identify the various DOCTYPES Explain the need for web standards Identify deprecated tags.
Length	Online Delivery This module will take approximately 1 week Students are expected to spend 4 hours outside of class on readings and learning activities. Classroom Delivery This module will take approximately 1 week of class sessions. Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery	Textbook Readings: Assign Chapter 1 in Designing with Web Standards. Use reference to learn HTML element and attribute syntax, and DOCTYPE basics Discussion topics: elements, attributes, values, DOCTYPE, inheritance, standards mode, the reason for standards, the value of standards, how to achieve standards Demonstration: HTML syntax Online research: Research a list of deprecated tags and attributes
Assessment Activities	Online Assessment Discussion question: Describe the Cascade Discussion question: Restate the reasons web standards are needed Discussion question: Define and provide examples of deprecated tags. How do tags become deprecated? Classroom Assessment Discussion question: Describe the Cascade Discussion question: Restate the reasons web standards are needed Discussion question: Define and provide examples of deprecated tags. How do tags become deprecated?
Wrap-Up / Feedback	Feedback on discussion

Create a Page, Web Standards Concepts
Overview	This module continues the development of basic concepts related to the need for web standards. It introduces the structure of a web page, and gives students experience with creating a simple web page.
Learner Competencies	Identify the correct way to save a web page and display it in a browser Select an appropriate DOCTYPE to start a page Identify and create the head and body of a web page. Learn to use the following elements: html, head, title, body, h1, p, br Distinguish between block and inline elements Describe the issues involved with designing and building with web standards
Length	Online Delivery This module will take approximately 1 week Students are expected to spend 4 hours outside of class on readings and learning activities. Classroom Delivery This module will take approximately 1 week of class sessions. Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery	Textbook Readings: Assign Chapter 2 in Designing with Web Standards. Use references to learn about these elements: html, head, title, body, h1 (an other headings), p, and br Online reading: SitePoint Blogs: A Minimal HTML Document Discussion topics: filenames and site structure, basic document structure, comments, the three components of content, presentation and behavior and how they are separated. The benefits and problems of web standards. Block vs. inline elements. Demonstration: HTML syntax, page building, elements including title, headings, paragraphs, line breaks, div and span Hands-On Lab: create a basic web page with brief text, save to student folder, and display it in a browser
Assessment Activities	Online Assessment Create a sketch of a web site Discussion: State the most important reason for working with web standards, Justify your choice of reason. Quiz: a brief essay exam explaining the purpose, rules, and best use for different DOCTYPES. Describe the difference between block level and inline elements. Provide examples of each. Classroom Assessment Create a sketch of Web site Discussion: State the most important reason for working with web standards, Justify your choice of reason. Quiz: a brief essay exam explaining the purpose, rules, and best use for different DOCTYPES. Describe the difference between block level and inline elements. Provide examples of each.
Wrap-Up / Feedback	Class discussion on students web site sketches Feedback on student's initial web page

Basic Web Design Concepts
Overview	This module introduces basic concepts web page design
Learner Competencies	Describe the most common types of Web site organization Design a site map for a brochure-type web site Apply the four principles of design (contrast, repetition, alignment, proximity) to web page layout Choose a color scheme that appeals to a target audience and demonstrates good contrast between text and background Describe, identify, and apply best practices of web design Describe techniques for writing for the Web (headings, bullet points, short sentences in short paragraphs, use of white space, etc.)
Length	Online Delivery This module will take approximately 1 week Students are expected to spend 6 hours outside of class on readings and learning activities. Classroom Delivery This module will take approximately 1 week of class sessions. Students are expected to spend 6 hours outside of class on readings and learning activities.
Content Delivery	Textbook Readings: Chapters 1-5 of The Non-Designer's Design Book Web Reading: Web Design Best Practices Checklist Lab Exercise: Create a site map for a small web site Demonstration: Examine real web sites and discuss them in terms of layout principles, color schemes, writing, typography, and best practices
Assessment Activities	Online Assessment Assignment 2, 3 Classroom Assessment Assignment 2, 3
Wrap-Up / Feedback	Feedback on discussion, online activities and assignments

Use additional HTML elements, images, and FTP
Overview	This module continues the development of basic concepts related to the need for web standards. It introduces the structure of a web page, and gives students experience with creating a simple web page.
Learner Competencies	Use additional HTML elements including blockquote, abbr, img, em, and strong Identify image formats Understand the relationship between image size and resolution Use FTP to transfer files to a web server
Length	Online Delivery This module will take approximately 1 week Students are expected to spend 6 hours outside of class on readings and learning activities. Classroom Delivery This module will take approximately 1 week of class sessions. Students are expected to spend 6 hours outside of class on readings and learning activities.
Content Delivery	Reference Material Readings: Learn to use the following HTML elements: blockquote, img, abbr, strong, and em. Learn to use alt text. A resources for discussion of alt text: Writing good alt text Discussion topics: Logical vs. presentational markup such as <b> vs. <strong>, image formats. Demonstration: Add elements to a demonstration page. Use blockquote, img, abbr, strong and em. Hands-On Lab: Use FTP software to transfer web page to server. Discuss site structure on the server, put and get, setting up accounts for remote servers Hands-on Lab: Create a transparent image, and optimized images in multiple formats Hands-on Lab: Start work on Assignment 1
Assessment Activities	Online Assessment Successful transfer of files Discussion: What is good alt text? Discussion: Compare and contrast logical formatting with visual formatting Classroom Assessment Successful transfer of files Discussion: What is good alt text? Discussion: Compare and contrast logical formatting with visual formatting
Wrap-Up / Feedback	Demonstration of transparent and optimized images Feedback on student's initial web page

Links
Overview	This module continues the development of basic concepts related to the need for web standards. It provides experience with hyperlinks.
Learner Competencies	Use the HTML element <a> Identify sites that demonstrate the use of web standards
Length	Online Delivery This module will take approximately 1 week Students are expected to spend 4 hours outside of class on readings and learning activities. Classroom Delivery This module will take approximately 1 week of class sessions. Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery	Textbook Readings: Assign Chapter 4 in Design with Web Standards. Use reference materials to learn the HTML needed to create links. Discussion topics: Relative and absolute links, mainstreaming of web standards. Hands-On Lab: Create a practice page with numerous links
Assessment Activities	Online Assessment Demonstration of working links Discussion: What mainstream sites use standards? Classroom Assessment Demonstration of working links Discussion: What mainstream sites use standards?
Wrap-Up / Feedback	Discussion of student's progress on Assignment 1.

Lists
Overview	This module introduces HTML lists: ordered lists, unordered lists, definition lists, and nesting lists
Learner Competencies	Create a list Identify the types of lists Recognize the uses of different types of lists Create nested lists
Length	Online Delivery This module will take approximately 1 week Students are expected to spend 4 hours outside of class on readings and learning activities. Classroom Delivery This module will take approximately 1 week of class sessions. Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery	Reference Readings: Learn how to create ordered, unordered and definition lists. Learn how to nest lists. Discussion topics: uses of lists Demonstration: Visit sites that use lists in many ways. Show what can be done with lists when CSS is added. Suggested resource: Listamatic Hands-On Lab: Add at least one list to a web page. Add a list to Assignment 1.
Assessment Activities	Online Assessment Discussion question: Where can you find lists on the web? Hands-on activity: Define and give examples of a relative path and an absolute path. Assignment 1 is due at the end of this module. Quiz: Provide students with a page of text. Students must markup the text appropriately and upload it for viewing. Classroom Assessment Discussion question: Where can you find lists on the web? Hands-on activity: Define and give examples of a relative path and an absolute path. Assignment 1 is due at the end of this module. Quiz: Provide students with a page of text. Students must markup the text appropriately and upload it for viewing.
Wrap-Up / Feedback	Feedback on discussion Feedback on Assignment 1 Feedback on Quiz

CSS Basics
Overview	This module introduces CSS syntax and methods to link to or attach CSS to a web page
Learner Competencies	Create an internal style element Link to an external style sheet Understand the syntax of a CSS rule including selector and declaration (property and value) Distinguish the selector types: universal, element, class, id, pseudo class, descendent, and grouped
Length	Online Delivery This module will take approximately 2 weeks Students are expected to spend 8 hours outside of class on readings and learning activities. Classroom Delivery This module will take approximately 2 week of class sessions. Students are expected to spend 8 hours outside of class on readings and learning activities.
Content Delivery	Reference Readings: Study the syntax of CSS rules, identify the selectors. Find out how to add an internal <style> section in the document and how to link to an external style sheet. Discussion topics: Selector types, the cascade, the box model Demonstration: Selector types using simple and obvious declarations. CSS shorthand. Hands-On Lab: Begin work on Assignment 2, with an external stylesheet.
Assessment Activities	Online Assessment Discussion question: Explain the uses of universal, element, class, id, pseudo class, descendent, and grouped selectors Discussion question: What goes into a CSS rule Discussion question: What is the difference between an internal and external style and what does that have to do with the cascade Classroom Assessment Discussion question: Explain the uses of universal, element, class, id, pseudo class, descendent, and grouped selectors Discussion question: What goes into a CSS rule Discussion question: What is the difference between an internal and external style and what does that have to do with the cascade
Wrap-Up / Feedback	Feedback on discussion

CSS Layout Basics
Overview	This module continues the development of basic concepts in CSS. Concepts such as positioning and float are introduced. The HTML div element is used to create structural content blocks with assigned IDs for layouts.
Learner Competencies	Identify and use the elements of the CSS box model Identify and use the HTML div to create stuctural content blocks on a web page Use positioning and/or float to create a simple layout Create an external stylesheet with rules for body, blockquote, lists and other elements used in Assignment 2
Length	Online Delivery This module will take approximately 2 week Students are expected to spend 8 hours outside of class on readings and learning activities. Classroom Delivery This module will take approximately 2 week of class sessions. Students are expected to spend 8 hours outside of class on readings and learning activities.
Content Delivery	Reference Readings: Study the recommended CSS references for information on linking to stylesheets, positioning, float, and continue to study the box model. Study the CSS reference material for information on background, border, clear, color, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, and width. Discussion topics: Float, position, clear, the CSS box model Demonstration: See Web Design 101: Floats and Web Design 101: Positioning for examples and demonstation ideas Hands-On Lab: Add div elements with targeted style rules to the Assignment 2 stylesheet to produce a simple two-column float-based layout. Use descendent selectors.
Assessment Activities	Online Assessment Discussion: Discuss the difference between relative and absolute positioning Discussion: Translate a CSS shorthand rule in to a verbose rule. Hands-on activity: Diagram and label the box model. Classroom Assessment Discussion: Discuss the difference between relative and absolute positioning Discussion: Translate a CSS shorthand rule in to a verbose rule. Hands-on activity: Diagram and label the box model.
Wrap-Up / Feedback	Summarize techniques for creating a two-column layout Feedback on student's Assignment 2 progress

Tables
Overview	This module introduces HTML tables.
Learner Competencies	Create an accessible table Use caption, th, col, row, and header as needed Understand how to present a table with CSS
Length	Online Delivery This module will take approximately 1 weeks Students are expected to spend 4 hours outside of class on readings and learning activities. Classroom Delivery This module will take approximately 1 week of class sessions. Students are expected to spend 4 hours outside of class on readings and learning activities.
Content Delivery	Reference Readings: Study the HTML reference resources for infomation on HTML data tables. Include in this study the following: table, caption, summary, tr, th, td, thead, tbody, tfoot. Study the CSS reference resources to learn how the following relate to tables: border, border-collapse, margin, padding, background, color. Discussion topics: The accessible table Demonstration: Build an accessible table Hands-On Lab: Add an accessible table to Assignment 3. Create a practice page with a table
Assessment Activities	Online Assessment Exercise: Display a practice table page Discussion question: What goes into an accesible table? Classroom Assessment Exercise: Display a practice table page Discussion question: What goes into an accesible table?
Wrap-Up / Feedback	Feedback on discussion Feedback on practice table

Forms
Overview	This module includes foundation information about building accessible forms Students will work on Assignment 3 in this module
Learner Competencies	Construct a contact form Demonstrate the use of input fields, text areas, radio buttons, checkboxes, select menus, and submit buttons Use a provided script Illustrate proper use of the label element with 'id' and 'for' attributes
Length	This module will take approximately 2 two-hour class sessions. Students are expected to spend 2 outside of class on readings and learning activities Testing and validation should be ongoing once the basics are defined
Content Delivery	Textbook Readings Web Testing using online tools Discussion Demonstration Hands-On Lab
Assessment Activities	Assignment3: Students must demonstrate accessibility testing and test results for the form
Wrap-Up / Feedback	Feedback on Assignments Small-group discussion and comment on Assignment 3 by classmates Assignment Grades

Testing and Validation
Overview	This module includes foundation information about validation and testing of HTML, CSS, and accessibility Students will work on Assignments 2 and 3 in this module
Learner Competencies	Use online tools and the Firefox Web Developer Toolbar to test pages Demonstrate the valid use of HTML Demonstrate the valid use of CSS Demonstrate acceptable accessibility in layout, structure, image use, table and form elements
Length	This module will take approximately 2 two-hour class sessions. Students are expected to spend 2 outside of class on readings and learning activities Testing and validation should be ongoing once the basics are defined
Content Delivery	Textbook Readings Web Testing using online tools Discussion Demonstration Hands-On Lab
Assessment Activities	Assignment 2 and 3: Students must demonstrate validation and accessibility testing and test results for both assignments.
Wrap-Up / Feedback	Feedback on Assignments Small-group discussion and comment on Assignment 2 and 3 by classmates Assignment Grades