kuniform

Chock full of interaction design, accessibility and web standards goodness.

Web 3: Building Your Site

Class information

Class will meet for fourteen weeks (9/9-12/16/06) on Saturdays from 12:00-3:00pm. There will be no class 11/25/06 (Thanksgiving break).

MacLean Center 112 South Michigan Avenue, Room 807

Instructor

Jason Kunesh

Required text

  1. Head First HTML with CSS & XHTML by Elisabeth and Eric Freeman

Optional text

  1. Designing with Web Standards by Jeffrey Zeldman
  2. Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS by Dan Cederholm

Goals

Building on the skills and design artifacts from Web 1 and Web 2, students create a website or web portfolio and publish it to the web. This class provides a thorough introduction to modern, professional techniques to create standards-based web sites, which load faster and are accessible to persons with disabilities. Students learn the differences between HTML and XHTML, how to use Cascading Style Sheets (CSS) and how to write structural markup, including table-free layouts and special printer friendly versions of pages. Prerequisites: Foundations of Digital Design, Digital Imaging: Adobe Photoshop 1, Web 1, and Web 2 or equivalent experience.

Syllabus

Web 3 Syllabus
WeekTopicLectureReadings & Exercises
1Introduction

We will discuss your expectations for the course and your prior experience with the Internet and computer technology. There will be a broad overview of the course, the course materials and computer access, and the SAIC facilities followed by one on one sessions with each student.

Itinerary

  • If we have received your account information, we will go through the process of logging into our accounts.
  • We will examine the required book, and begin to delve into chapter 1. This means we will handcode our first HTML page, discuss the relationship between client and server computers, and upload them to a server.
  • We will tour the GLAB facilities and sign up for general authorization.

HTML Editors

Initially, we will use simple text editors as tools. Eventually we will use Dreamweaver MX in class. You may also use Adobe GoLive or other editors, if you are more familiar with them.

Chapter 1
2Documents, Links, and Paths

We will discuss the basics of networking, and will setup our web space accounts.

We will review the structure of an HTML page, image formats and color.

As an in class exercise we will setup our project workspaces and work with relative paths and linking.

Chapter 2
3The Anatomy of a Web Page

We will review relative and absolute paths and the structure of an HTML document.

We will introduce Cascading Style Sheets and begin a discussion of the elements and how to use in styling your site.

We will begin to work on our own projects, looking at an existing or new page on your website and start styling it or describing it in Markup.

Chapter 3
4More CSS and some odditiesWe'll continue working in class with CSS, discuss project choices for next week, and will discuss Favicon.ico and .htaccess files.Chapter 4
5Project: blog, portfolio site, personal siteXHTML + CSS tabs: We will use XHTML+CSS to create a tabbed navigation system.Chapter 5
6XHTML + CSS tabs: part 2 Chapter 6
7XHTML + CSS: more techniques Chapter 7
8Starting with CSSInline, embdedded and external stylesheetsChapter 8
9CSS part 2 
10CSS part 3The box model, divs and spans

Chapter 10-11
11CSS part 4 Chaper 12
12XHTML forms

Today we will discuss forms and their implementation features. We will examine how to make them accessible and usable for all users.

We will briefly talk about the variety of languages on the server which may be used to accept input from forms as well as how to use forms to email an address (and why this may not always be preferable).

Here is an example form like the one we went over in class.

Some web form style links

Chapter 13
13Studio time 

Chapter 14
14Introduction to Javascript & Review