Interactivity & Screen Design I

Expression College for Digital Arts

Course Director: Laura Cesari - lcesari@expression.edu

Textbook Materials: Learning Web Design

Assignments, examples, and resources will be given out in class.
Please email me if you have any questions or if you miss a day.

Class Schedule - Term 909 (December 2009 & January 2010)

1. December 3, Thursday:

Intro to HTML & CSS: Image Types, Text & Fonts, Colors, Stylesheets

• Type Resources: Common Web-Safe Fonts, Lorem Ipsum Dummy Text
• Color Resources: Hexadecimal Values, Color Names, WebMonkey Color Chart, Adobe "Kuler" Color Tool

2. December 5, Saturday:

HTML & CSS Basics: DIV, SPAN, Class, ID, Images, Links, Margins, Padding, Borders.

• Beginning HTML Elements: DIV, SPAN, Images, Links
• CSS Basics: CSS Reference, CSS Syntax, External Stylesheets
• The Box Model: Margins, Padding, Borders.

3. December 8, Tuesday:

CSS Layout with Relative & Absolute Positioning, More Type Formatting

• Absolute, Relative, & Fixed Layouts: CSS Position Property
• More Type Styles: Fonts, Text Formatting

4. December 10, Thursday:

CSS Layout with Floating, Pixels & Percentages

• Floating Layouts: The Float Property, Setting Overflow
• Setting Dimensions: Percentages and Pixel Values

5. December 12, Saturday:

Graphic Slicing, Image Replacement Techniques with :hover pseudoclass

• Hover states & using :hover pseudoclass

6. December 15, Tuesday:

Web Graphic Tricks & Techniques: Continuous Wallpaper Background Effects & Tessellation

• Smashing Magazine Wallpaper Showcase
• CSS Background Properties

7. December 17, Thursday:

Web Graphic Tricks & Techniques: More wallpaper effects, Styling HTML Lists

• CSS Background Properties
• Lists

8. December 19, Saturday:

Midterm Exam & in-class Midterm Project

9. December 22, Tuesday:

Animated GIF Graphics, More about Links and File Organization

• More about Links

*** NO SCHOOL 12/23/09 - 1/3/10 - WINTER BREAK ***

10. January 5, Tuesday:

Icons, Wayfinding, and Pixel Graphics

• Icon Design: Susan Kare, Pixture Studio, Mozilla Firefox Theme Designs
• Isometric Pixel Art: eboy, KirupaVille, pixeldam, World's Tallest Virtual Building
• Communities: pixeljoint, deviantART

11. January 7, Thursday:

Design Resources & Continuing Web Graphic Techniques: Customizing Templates with CSS, What is JavaScript?

• Lightbox Gallery by Lokesh Dhakar, Shadowbox by Michael I. J. Jackson
• Web Design Inspiration: CommArts Web Picks, CommArts Winners, Digital Thread, Smashing Magazine, Webby Awards

12. January 9, Saturday:

Continuing Techniques: Embedding Video, HTML Tables & iFrames, Fixed Positioning, Image Switching, Slideshows, Forms, Tooltips...

• Table Structures
• iFrames
• Relative Positioning & Fixed Positioning
• Z-index for Stacking Order
• CSS Transparency Settings
• Special Characters & Symbols
• "Design Hacking": CSS Zen Garden, Firebug
• Contact Forms: 123contactform, Kirupa form tutorial

13. January 12, Tuesday: (Short Day: 5-6pm only)

Final Project Presentations