Course Description
In this course students learn advanced (X)HTML and CSS techniques to create sophisticated web page layouts that adhere to the W3C’s guidelines. Microformats will be used to create semantically meaningful, portable content.
Prerequisites
Recommended Textbook(s)
- Wyke-Smith, Charles. Stylin’ with CSS: A Designer’s Guide. Berkeley, CA: New Riders, 2008.
- Zeldman, Jeffrey. Designing With Web Standards. Grand Rapids: New Riders, 2009.
Recommended Reading
Forms
- Hanen, Jenifer. "HTML forms—the basics." Opera. 08 July 2008. Opera Web Standards Curriculum. 22 Aug 2008.
- Lloyd, Ian. "Accessible HTML/XHTML Forms." The Web Standards Project. May 2004. The Web Standards Project. 22 Aug 2008.
- Henick, Ben. Form design, layout, and presentation with CSS." Opera Web Standards Curriculum. Opera. 30 Jan 2009.
Layout techniques
- Walker, Alex. "Simple Clearing of Floats." SitePoint. May 2004. SitePoint. Feb 2005.
- Cederholm, Dan. "Faux Columns." A List Apart. 09 January 2004. A List Apart. 22 Aug 2008.
- Olsson, Tommy. "Inheritance and Cascade." Opera Web Standards Curriculum. Opera. 30 Jan 2009.
- Henick, Ben. "The CSS layout model - boxes, borders, margins, padding." Opera Web Standards Curriculum. Opera. 30 Jan 2009.
- Olsson, Tommy. "Floats and clearing." Opera Web Standards Curriculum. Opera. 30 Jan 2009.
- Olsson, Tommy. "CSS static and relative positioning." Opera Web Standards Curriculum. Opera. 30 Jan 2009.
- Olsson, Tommy. "CSS absolute and fixed positioning." Opera Web Standards Curriculum. Opera. 30 Jan 2009.
Other topics
- Shea, Dave. "Revised Image Replacement." MezzoBlue. MezzoBlue. 22 Aug 2008.
- Francis, M.N. "Lesser-known semantic elements." Opera Web Standards Curriculum. 08 July 2008. Opera Web Standards Curriculum. 22 Aug 2008.
- Pieters, Veerle. "Geometric Background Patterns." 24Ways. 02 December 2008.
- Adobe, “How Do I Validate My Site for Accessibility?” Adobe. Adobe. 5 Dec 2008.
Technologies Required
- Students will need their own web server to post their assignments
- Mac or PC computers with internet connection
- Web Browsers (Firefox, Opera, Safari, Internet Explorer)
- Text editor, or web page editor that fosters the development of valid (X)HTML and CSS code
- Web page debugging and evaluation tools such as Firebug and the Web Developer Toolbar for Firefox, Opera Dragonfly and the Opera debug menu, and Safari Web Inspector.
Competencies
Topic | Competency | Evaluation Methods |
---|---|---|
Review Topics | Illustrate and label the box model |
|
Recognize the structure of CSS style rules: selector, declaration, property |
|
|
Identify the appropriate use of the following CSS selector types: element selectors, ID selectors, class selectors, pseudo-class selectors, and descendant selectors |
|
|
Provide examples of proper semantic names for id and class selectors |
|
|
Identify the difference between id and class selectors |
|
|
Provide concrete examples of how web standards development techniques benefit businesses and Web users |
|
|
CSS Shorthand | Recognize and write CSS shorthand techniques that can make CSS code less verbose |
|
Use CSS shorthand techniques for the background, border, font, color, margin, and padding properties to create efficient and concise style sheets |
|
|
Positioning Schemas | Identify the differences between static, relative, absolute, and fixed positioning schemas |
|
Explain the term "document flow" |
|
|
Recognize browser support for static, relative, absolute, and fixed positioning schemas |
|
|
Recognize which of the positioning schemas are within the document flow and which are outside of the document flow |
|
|
Use positioning schemas to layout a web page |
|
|
Floating Elements | Recognize that floated elements are outside of the document flow |
|
Recognize that floated elements are automatically block level elements |
|
|
Recognize that floated elements descend into the content that follows |
|
|
Use the CSS float property to create a multi-columned page layout |
|
|
Use the CSS float property to transform an unordered list of navigation links into a horizontal navigation bar |
|
|
Identify and use techniques to clear floated elements so that they can be contained by a parent element |
|
|
(X)HTML Forms | Describe and diagram the relationship between (X)HTML forms and server-side technologies |
|
Define form validation and describe how it is accomplished |
|
|
List popular server-side technologies often used to process content sent from (X)HTML form |
|
|
Create an accessible (X)HTML form using using these elements: form, fieldset, legend, label, input (radio, checkbox, submit, reset, image, password, hidden), textarea, select, option, button |
|
|
Connect a (X)HTML form to a server-side script for processing |
|
|
Use CSS to make a (X)HTML form attractive and usable |
|
|
Advanced (X)HTML Elements |
Recognize the appropriate use for the elements address, code, cite, abbr, acronym, dfn, superscript, subscript, hr, del, and ins |
|
Recognize the appropriate use of the HTML 5 elements header, footer, nav, article, aside |
|
|
Image Replacement Techniques | Use image replacement techniques to present unique design elements with accessible, search engine friendly text alternatives |
|
List and describe popular image replacement techniques and identify the benefits and shortcomings of each |
|
|
Advanced CSS Selectors |
Describe the function of attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors in CSS |
|
Recognize browser support for attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors |
|
|
Use attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors when designing a web page |
|
|
Microformats | Explain what microformats are and recognize the benefits of using them to markup various types of content |
|
Define and describe the Semantic Web. |
|
|
Use microformats to markup contact (hCard), and event (hCalendar) information |
|
|
Use a microformats translation tool (such as http://technorati.com/contacts/) to create a link that allows users to download or move the content to another location (e.g. translate hCard to vCard for download into an address book program). |
|
|
Use CSS to style microformat content |
|
|
Image Tiling Techniques | Use the background property to tile images horizontally and vertically |
|
Use image tiling techniques to create faux columns in order to resolve design problems when columns are of disparate heights |
|
|
Use image tiling techniques to create the illusion of shadow, and depth |
|
|
Trouble-shooting Layout Using Firebug | Identify display issues in a web page then use Firebug - a web development add-on for the Firefox browser - to quickly manipulate CSS and identify solutions to the problem. |
|
Accessibility | Define the term accessibility. |
|
Write markup that facilitates accessibility. |
|
|
Recognize the role the W3C plays in defining accessibility standards. |
|
|
Create a website that passes WCAG priority 1 validation. |
|
|
Interantionalization | Identify core techniques required to present content in an international format. |
|
Assignments
Web Design 2 Assignment Rubrics
Assignment: Course Blog
Setup a blog using WordPress, Blogger, or another comparable system. Each week of the course, write one blog post that expands upon the topics discussed in class or readings. Each post should be at least 200 words in length, and should contain images and links where appropriate.
Recommended: Subscribe to your classmates' blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.
Criteria | Performance Quality | Score | |||
---|---|---|---|---|---|
0 points | 1 point | 2 points | 3 points | ||
Blog Posts (evaluated weekly) | Blog post was not published on time, is poorly written, does not contain content relevant to the course, or does not meet the post length requirement. | Blog post was published on time, contains some spelling and/or grammatical errors, meets the post length requirement, but content is not very relevant to the course, or does not expand upon course topics. | Blog post was published on time, contains no spelling and/or grammatical errors, meets the post length requirement, and the content expands upon course topics. | Blog post is published on time, is very well written with no typos, grammar, or spelling errors, expands upon course topics, and exceeds the minimum post length. Post contains images where relevant to the content, and links to plenty of sources and resources. |
Assignment: CSS Zen Garden
Acquaint yourself with the history of Dave Shea's CSS Zen Garden project, and browse the archive of successful submissions.
Using the example (X)HTML provided, create a unique layout and page design for this page using only CSS. Do not modify the (X)HTML at all. All of your design modifications should come from your CSS document. Use Andy Clarke's 3D diagram of the CSS Zen Garden document markup to get your bearings before starting your CSS.
Identify your design concept before getting started. Avoid replicating concepts that have already been created. Be creative! If you find yourself creatively stumped, consult Phillip Megg's book A History of Graphic Design (Meggs, Philip. 3rd edition. John Wiley & Sons, 1998.), to gain inspiration from the masters. It is advisable to start with preliminary sketches on paper to identify the organization and positioning your design will follow.
You may use local style sheets during the design process, but they should be externalized once the design is complete. You are not allowed to begin with the example CSS file. You may consult it, but you must build your CSS from scratch. A word of advice, keep the style rules as simple as possible. Often students will create odd combinations of negative margins, absolute positioning and padding to nudge things around the page. More often than not, the same results can be had using only positioning. When things get too complex, scrap the style rule and start fresh. You will end up with the answer faster and with cleaner code.
Dave Shea's book The Zen of CSS Design: Visual Enlightenment for the Web (Shea, Dave. 3rd edition. Berkeley, CA: Peachpit Press, 2005.) unveils the techniques behind some of the most popular CSS Zen Garden designs. It may be a useful reference for this assignment.
Criteria | Performance Quality | Score | ||||
---|---|---|---|---|---|---|
0 points | 1 point | 2 points | 3 points | 4 points | ||
Design | Design concept is unoriginal, and has poor production values. | Design concept shows some innovation, but is not well produced. | Design concept shows some innovation, and is well produced. | Design concept is innovative, and exceptionally well produced. | Design concept is very innovative, intelligently employs CSS techniques to serve the design concept, and is exceptionally well produced. | |
CSS | CSS fails W3C validation, is incomplete, does not render consistently in target browsers, does not employ background images or image replacement, does not employ CSS shorthand, is poorly organized, and is not well commented. | CSS has some minor errors, does employ some shorthand, doesn't make use of image replacement, has moderate organization, and some commenting. | CSS passes W3C validation, makes use of some image replacement techniques, employs CSS shorthand, has basic commenting, but does not render correctly in all target browsers. | CSS passes validation, makes intelligent use of image replacement techniques, employs CSS shorthand, is commented, and renders consistently in all target browsers. | Is elegantly organized, terse, uses advanced CSS selectors, makes extensive use of image replacement techniques, is well commented, passes W3C validation, and renders a consistent or gracefully equivalent experience in all target browsers. |
Showcase web site
Compile your lab exercises into a single website showcasing the techniques learned in the course. Create a home page with the following information:
- Course name and number
- Instructor's name
- Your school's name
- The academic term
- Your name
- A description of the course
- Links to and a brief explanation of each lab exercise
- Link to a Creative Commons license in the footer of the page (use the rel-license microformat).
The design of your lab exercise website should be consistent, attractive, and usable. All pages should use valid (X)HTML and CSS indicated by validation links in the footer.
Criteria | Performance Quality | Score | ||
---|---|---|---|---|
0 points | 1 point | 2 points | ||
Design | No consideration is given to the presentation of lab exercises. Lab exercises are not presented with a consistent aesthetic and have a poor information hierarchy. | Lab exercises have a basic but consistent aesthetic that communicates information hierarchy. | Lab exercises have a unique, professional, consistent aesthetic that clearly communicates information hierarchy. | |
(X)HTML | Markup is not semantic, fails W3C validation, is poorly organized, mixes presentation with structure, and is more verbose than necessary. | Markup makes basic use of semantics, passes W3C validation, is poorly organized, and is moderately more verbose than necessary. | Markup is exemplary in its semantics, passes W3C validation, is terse, exceptionally well organized, and uses classes and IDs only as necessary. | |
CSS | CSS fails W3C validation, contains errata, is overly verbose, is poorly organized, is uncommented, renders inconsistently between target browsers, and is not kept eternally in a global style sheet. | CSS passes W3C validation, uses some CSS shorthand to keep code brief, is some what organized, renders relatively consistently in all target browsers, and is kept external in a global style sheet separate from markup. | CSS passes W3C validation, is exceptionally well organized, uses CSS shorthand to keep code brief, renders consistently or gracefully degrades in all target browsers, is kept external and separate from markup, and CSS is used creatively to solve design problems. | |
Project Requirements | Lab exercises are incomplete and/or do not meet respective requirements. Labs home page is not usable, and does not contain all required information. No global navigation system is used to facilitate easy movement through exercises. Validation and Creative Commons links are not included in the footer of each page. | Lab exercises are complete but do not meet all requirements. Labs home page is moderately usable, and contain all required information. A global navigation system is used to facilitate easy movement through exercises. Validation and Creative Commons links are not included in the footer of each page | All lab exercises are complete and meet respective requirements. Labs home page is usable, and contains all required information. A global navigation system is used to facilitate easy movement through exercises, and status indicators communicate the user's current location. Validation and Creative Commons links are included in the footer of each page. |
Website Redesign
Identify a website with at least 10 pages that does not follow web standards best practices then redesign and rebuild it.
Your website redesign should:
- Have valid (X)HTML that passes the W3C's validation tests. Validation errors caused by the use of emerging standards (example: RDFa) are acceptable
- Have valid CSS that passes the W3C's validation tests. Validation errors caused by the use of emerging standards (example: SVG CSS properties) are acceptable
- Use semantically meaningful markup and CSS
- Employ general element selectors, class selectors, id selectors, contextual selectors, attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors
- Employ floating or positioning schemas to layout the pages (no tables for layout)
- Use an external stylesheet to style the entire site
- Render consistently (within reason) across the four most popular web browsers
- Employ image replacement techniques or Web Fonts
- Consider the business and communication objectives of the organization, and present the content in a manner that is consistent with these goals
- Employ a design aesthetic appropriate for the organization
- Introduce the organization on the home page
- Direct traffic to key locations in the website from the home page
- Contain a contact page that provides a contact form that users can email the organization through
- Present the organizations contact information on the contact page using the hCard microformat (provide a link to download contact information)
- Follow basic usability principles to help the user identify their location and find their way around the site (page headings titled to match global navigation, current page identifier in navigation, redundant navigation at the bottom of pages, etc.)
Websites you may consider redesigning:
- Your school's website
- Your church, temple, synagogue, mosque website
- A local community organization or non-profit's website
Discuss alternatives with your instructor.
Criteria | Performance Quality | Score | |||
---|---|---|---|---|---|
0 points | 1 point | 2 points | 3 points | ||
Design | Design does not communicate the nature of the organization, does not appropriately achieve the business and communication objectives, makes poor use of design principles, and does not clearly communicate a hierarchy of information. | Design communicates the nature of the organization but not very effectively, does an adequate job of achieving the business and communication objectives, makes some use of design principles, and has a basic hierarchy of information. | Design communicates the nature of the organization, serves the business and communication objectives, makes use of design principles (layout, typography, color, etc.) to create an attractive presentation, and clearly communicates information hierarchy. | Design communicates the nature of the organization very effectively, intelligently serves the business and communication objectives, makes great use of design principles (layout, typography, color, etc.) to create an elegant presentation, and very clearly communicates information hierarchy. | |
(X)HTML | Markup is not semantic, fails W3C validation, fails WCAG priority 1 validation, is poorly organized, mixes presentation with structure, and is more verbose than necessary. | Markup makes basic use of semantics, fails W3C validation, fails WCAG priority 1 validation, is poorly organized, and is moderately more verbose than necessary. | Markup semantically meaningful, passes W3C validation, passes WCAG priority 1 validation, is well organized, and uses classes and IDs only as necessary. | Markup is exemplary in its semantics, passes W3C validation, passes WCAG priority 1 validation, is terse, exceptionally well organized, and uses classes and IDs only as necessary. | |
CSS | CSS fails W3C validation, contains errata, does not employ the required selector types, is overly verbose, is poorly organized, is uncommented, does not use required float and positioning schemas, renders inconsistently between target browsers, is not kept eternally in a global style sheet, and does not make use of image replacement techniques. | CSS fails W3C validation, is poorly organized, uses the required selector types, uses some CSS shorthand to keep code brief, uses floating and positioning for layout, renders inconsistently in target browsers, is kept external and separate from markup, and uses some image replacement techniques. | CSS passes W3C validation, uses the required selector types, uses CSS shorthand to keep code brief, uses floating and positioning for layout, renders relatively consistently in all target browsers, is kept external and separate from markup, and uses image replacement techniques. | CSS passes W3C validation, is exceptionally well organized, uses the required selector types, uses CSS shorthand to keep code brief, uses floating and positioning for layout, renders consistently or gracefully degrades in all target browsers, is kept external and separate from markup, uses image replacement techniques, and CSS is used creatively to solve design problems. | |
Project Goals and Requirements | Home page does a poor job of introducing the organization to the user and does not effectively direct traffic to key places in the site. Microformats are not used to markup contact and event information. The contact page is missing or does not contain a working contact form. Site does not make use of basic usability principles. | Home page introduces the organization to the user but not efficiently and makes moderate attempts to direct traffic to key places in the site. Microformats are used to markup contact and event information. The contact page contains a working contact form but is poorly presented. Site makes moderate use of basic usability principles. | Home page introduces the organization to the user and directs traffic to key places in the site. Microformats are used to markup contact and event information. The contact page contains a working contact form. Site makes use of basic usability principles. | Home page efficiently introduces the organization and intelligently directs traffic to key areas. Microformats are used to markup contact and event information, and links to downloadable versions of the content. The contact page has a working contact form that is presented in an attractive and usable manner. The site follows basic usability principles. |
Examination Questions
Review
- Diagram and label the box model.
- Define and give examples of a relative path and an absolute path.
- Define and provide examples of deprecated tags. How do tags become deprecated?
- Describe the difference between block level and inline elements. Provide examples of each.
- Why is it important to use semantic markup when building web pages? Provide an example of the use of semantic markup.
- Label the selector, declaration, and property in the following style rule:
div { background-color:#ccc; }
- Provide 2 compelling arguments that you could present to an employer that would convince them to adopt web standards.
Positioning Schemas
- List and describe the four positioning schemas.
- When positioning elements absolutely, from what point is the position calculated?
- When positioning elements relatively, from what point is the position calculated?
- What is the document flow? How would you place an element in or remove it from the document flow?
- Describe fixed positioning. Which browsers support fixed positioning?
- How might you define the stacking order of positioning elements?
Floating Elements
- Regardless of element type, when an element is floated is it converted to a block or an inline element?
- When an element is floated, what additional property should accompany it to ensure proper display in various browsers?
- From what point is the position of a floated element determined?
- Identify two methods to force a static parent element to enclose a nested floated element.
- Describe how the clear property is used.
(X)HTML Forms
- Diagram and describe the process of how content is submitted and processed through an (X)HTML form.
- Identify the attributes of a form tag that define the where and how content will be sent.
- Write the (X)HTML code to create a simple contact form that would receive a user's name, email address, and a multiline message.
- Describe how use of the
<fieldset>
,<legend>
, and<label>
can improve the accessibility of a form. - Define the difference between the GET and POST methods.
- What is form validation, and how does it impact usability?
- What technologies might be used to validate a form?
Advanced (X)HTML Elements
- Provide an example of the proper use of the
<address>
element. - Describe the proper use of the
<code>
element. - Write the (X)HTML to cite a content source.
- Write the (X)HTML to properly present an abbreviate and an acronym.
Image Replacement Techniques
- List the benefits of using image replacement techniques.
- Write the CSS to replace the text in the following element with a background image named
about-us-title.png
.
<h2>About Us<h2>
- Describe how image replacement can impact search engine optimization.
Advanced CSS Selectors
- Write an example of an attribute selector.
- Write an example of a descendant selector.
- Write an example of a child selector.
- Write an example of an adjacent sibling selector.
- Write an example of a general sibling selector.
Microformats
- Define the term microformat.
- Describe a use case in which microformats would help improve the user experience.
- How might a user identify microformat content on a web page?
- What major websites publish content in microformats?
- Describe how you might make hCard or hCalendar microformat content downloadable to an address book or calendar application respectively.
- Write the (X)HTML to markup a link to a Creative Commons license with the rel-tag microformat.
Image Tiling Techniques
- Write a CSS style rule to tile a background image on the X axis of an HTML element.
- Draw a diagram illustrating the sliding doors technique to create tabs. Indicate the tiled element.
- Draw a diagram illustrating how a tiling image might be used to create a shadow behind a column in a web page layout.
CSS Shorthand
- Write a style declaration that sets the width, color, and style of an element's border with just one style property.
- Write a style declaration that sets the size, family, line-height, and weight of a a piece of type with just one style property.
- Write a style declaration that sets a background image, background color, background repeat, and background position with just one style property.
- Write a style declaration that sets the margin on all four sides of an element with just one style property.
- Write a style declaration that sets the padding on all four sides of an element with just one style property.
Accessibility
- Describe the W3C's role in defining accessibility standards.
- List and describe 3 (X)HTML tags that can be used to make a web page more accessible.
- Describe teh process you might use to ensure your website meets accessibility standards.
Resources
General Resources
- Stylin' With CSS book companion website
- Lars Gunther's (X)HTML reference and best practice guide
- HTML Validator
- CSS Validator
- Accessibility Validator: Cynthia Says
- Character Sets
- Commonly Used Entities
- DOCTYPEs
- Firefox Developer’s Toulbar
- HTML and XHTML Templates
- HTML Tidy
- List of Deprecated Tags
- Quirks Mode
- Firefox Developer’s Toolbar
- Usable Forms JavaScript Code
- XHTML Validator
- XHTML Tags and Attributes
- XML Tutorial
General CSS Resources
- 10 Tools to Help You Select a Web 2.0 Color Palette
- Andy Budd Blogography on CSS
- CSS Assigning Property Values
- CSS3 information
- List of Media Types
Image Replacement
Sizing Type
- CSS Design: Size Matters
- Ems and Proportional Font Sizing
- Fonts common to Windows and Mac
- How to Size Fonts
- IE Font Sizing Bugs
- The Best Fonts for the Web
- Vertical centering in CSS
Layout Techniques
- Clearing floats without Structural Markup
- Making Fixed Positioning Work in IE
- The Box Model
- Fixed Width Sidebar and Liquid Content Area Challenge
- Liquid Two-culumn Layout
- Multi-column Layouts
- Nifty Corners Cube
Tables
Learning Modules
Help us develop our living curriculum. Contribute a learning module.Contributors
Primary course developer: Aarron Walter