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 210 (February / March 2010)

1. February 27, Saturday:

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. March 2, Tuesday:

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.
• Overflow property (remember, setting this property corrects margin overlap!)

3. March 4, Thursday:

CSS Layout with Relative Positioning and Floating

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

4. March 6, Saturday:

CSS Layout with Relative and Absolute Positioning

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

5. March 9, Tuesday:

Graphic Slicing, Image Replacement Techniques with :hover pseudoclass

• Hover states & using :hover pseudoclass

6. March 11, Thursday:

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

• Smashing Magazine Wallpaper Showcase
• CSS Background Properties

7. March 13, Saturday:

Midterm Exam & in-class Midterm Project

8. March 16, Tuesday:

Web Graphic Tricks & Techniques: More wallpaper effects, Animated GIF files

• CSS Background Properties

9. March 18, Thursday:

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

10. March 20, Saturday:

File Organization, Design Inspiration

• More about Links
• iFrames
• Web Design Inspiration: CommArts Web Picks, CommArts Winners, Digital Thread, Smashing Magazine, Webby Awards

11. March 23, Tuesday:

Design Resources & Continuing Web Graphic Techniques: Customizing Templates with CSS, What is JavaScript? Using Transparency, Using Special Characters ♥

• Lightbox Gallery by Lokesh Dhakar,
• Shadowbox by Michael I. J. Jackson,
• MultiBox by phatfusion.
• CSS Transparency Settings
• Special Characters & Symbols

12. March 25, Thursday:

Continuing Techniques: Fixed Positioning, Embedding Video, More Javascript Elements, Contact Forms, and various odds and ends...

• Fixed Positioning
• Z-index for Stacking Order
• Contact Forms: 123contactform, Kirupa form tutorial
• Favicons: Make a Favicon, What is a Favicon?
• Searchability: Google Keyword Tool, Meta Tags
• Using Spry Elements
• Paypal Shopping Cart
• "Design Hacking": CSS Zen Garden, Firebug
• Table Structures
• Lists

13. March 27, Saturday: (Short Day: 4-5pm only)

Final Project Presentations