Skip navigation.
Classes:

Calendar for IMED 2415.7001 Page Design II / Summer 2004

by Sharon Huston
Class Calendar
type assignment due
Week of June 1 -- XHTML Boot Camp
Note

This week we'll take a quick run through XHTML and its goals. Please focus on creating SEMATICALLY CORRECT pages -- a list of ingredients, for example, should be formatted as a list. The pages are supposed to look plain-vanilla boring. Don't worry about appearance -- worry about validation instead!

---
Reading Syllabus, Student Data Sheet, Open Lab Information
6/6
Exercise Join Yahoo Group IMED-2415.
6/6
Exercise

First Contact

REQUIRED for all online students, ExtraC for campus students -- You must, this week, prove you are capable of contacting your instructor through a medium other than email!!! You must reach me by telephone, by Instant Messaging, or in person. See syllabus for contact information. (Only online students can take advantage of the "in person" option!)

6/6
Exercise Scavenger Hunt
6/6
Resouces
---
Reading Holzschlag Ch. 1
6/6
Refresher The HTML Goodies site we worked with in Page Design I has a nice article discussing HTML files as text files, and showing how to create a web page using the Windows Notepad. If you find yourself totally lost on the XHTML assignemnts please read through the article.
---
Exercise XHTML Unit A
6/6
Exercise XHTML Unit B
6/6
Exercise XHTML Unit C
6/6
Week of June 7 -- Selectors, Cascade, Inheritance and Specificity

Online Only

Download Mozilla. You only THOUGHT Internet Explorer was the best browser. Its CSS support isn't anywhere near as good as Mozilla's. Some of the things I'm asking you to do this week don't even show up in IE. Please save frustration and download & install Mozilla 1.6.
6/13
Online Only We have several borwsers installed in our classroom to allow us to see just how compliant our pages are. If you would like to do this at home we have a list of the browsers, and places you can retrieve them. Wouldn't recommend this to people on dial-up.
---
Fun For the very-computer-savvy -- instructions on how to get multiple versions of IE installed on your PC. I found the link at the bottom of the list more helpful than this article, but your milage may vary.
---
Reading Holzschlag Ch. 2
---
Lecture Selectors -- NEW sidebar on use of HTML attribute matching, added 6/8.
6/13
Exercise CSS Selectors
6/13
Exercise Cascade
6/13
Exercise Inheritance
6/13
Exercise Specifity -- OK, I changed my mind. There isn't enough in the book to warrant an exercise!
---
Lecture Structural Markup -- some of this is a re-hash of last week's material, but some of it is new.
6/13
Week of June 14 -- Writing Valid CSS
Note I probably should have combined weeks 2 and 3, but I was going into information overload! This will be a nice, light week. A simple exercise, a few general articles for you to read, nothing too technical. I'm compiling a list of some useful and some fun CSS sites to help you start a personal reference list. Go ahead and get acquainted with a few of the sites. Look at the type of information they provide, but don't worry too much about understanding everything you read at this point. I'll bring most of these sites into our class discussions at some point.
---
Reading Castro Ch. 10
6/20
Errata Just noticed the errata for Holzschlag on the sybex site. This may clear up some confusion.
---
Exercises Holzschlag Ch. 3 - Remember, you can download Holzschlag's code! Work through the chapter, and upload the finished results to an obvious place on your website.
6/20
Exercise CSS Declarations
6/20
Resources CSS Resources
6/20
Comments Required OK, I got a little carried away with the readings. I revisited some favorites from A List Apart, and couldn't make any choices so I listed a bunch of stuff on content and writing. Please read any three of the following, and post at least one (total) insightful comment to the Yahoo Groups list. "Me too!" does not count.
6/20
Reading Seperation: The Web Designer's Dilemma (from A List Apart)
---
Reading 10 Tips for Writing the Living Web
---
Reading Slash Forward (very good)
---
Reading How to Write A Better Weblog (Actually a good guide for all writing projects!)
---
Reading Beyond Usability and Design: The Narrative Web
---
Reading Language: The Ultimate User Interface
---
Week of June 21 -- CSS Typography and the Box Model Hack
Reading
Holzschlag Ch. 4
6/28
Exercise
Holzschlag Ch. 4 -- upload when finished!
6/28
Project
Take your first or second Easy-Bake file (or even the third, but it has a lot of trash in it!) and apply material you have learned so far. I am not generating a specific list of criteria for this assignment, but I want you to stretch your skills and prove to me you have mastered the basics of CSS.
7/5
Note
LAST-MINUTE CHANGE!! I just discovered that Ch. 6 in the book does cover the Box Model Hack, and I don't want to stray too far from the book. I'm moving all that matrial I had posted to the week we cover Ch. 6. In the meantime I want to play with a very cool technology -- the Opera browser's Projection mode. Please download and install Opera -- you will need it for this exercise!
---
Exercise

Projection Mode:

  1. View Sharon's Example file in Opera.
  2. Whie in Opera, press F11 to see the "projector" mode of the file. Use the space bar to move from slide to slide.
  3. Right-click and save this HTML file.
  4. Conduct Internet research; then make the file into a nice projection file. You may include graphics! (Share resources with your classmates!)
  5. Extra credit for getting the file to display one way on screen (fonts, backgrounds, etc) and another way in projection mode.
7/5
Week of June 28 : IMAGE REPLACEMENT -- HOW COOL!!!!
Note
Late due dates this week due to the 4th of July holiday which falls on the weekend. I know many of you have either Friday or Monday off, so I pushed the due dates to Tuesday to accomodate as many people as possible. Campus class due date is Wed. as Tues. is a campus holiday!
Follow-Up
OPTIONAL. Before we leave typography all together -- I just found a very nice article on Times New Roman and CSS.
Exercise
Holzschlag Ch. 5
7/6
Reading
7/6
Reading
7/6
Reading
StopDesign's article on Image Replacement. (My link isn't working today, hopefully yours will!)
7/6
Reading
7/6
Exercise
Create a simple blog design which incorporating image replacement. Using this design, create THREE pages (yes, they'll all look alike, hopefully!) each one experimenting with a different image replacement technology. Upload to a folder named "Replacement."
7/6
Week of July 4th: Box Model and More
NOTE
Monday and Tuesday are campus holidays.
7/11
Exercise
Holzschlag Ch. 6
7/11
Exercise
Box Model Hack -- download, modify as instructed, and upload to your site.
7/11
Reading

Box Model Hack Thread from Webmaster World's CSS List.

Ignore this. They want money now.

7/11
Optional
Nice $1 tutorial on the Box Model Hack, and other common hacks.
---
Week of July 11
Exercise
Holzschlag Ch 7 & 8 (read Ch 8)
7/19
Exercise
Float Tutorial -- the best way to work with this tutorials is to read the first "unit", then try to do the additional units without looking at the code. Only look at the code when you get stuck.
7/19
Exercise
Listutorial - - the best way to work with this tutorials is to read the first "unit", then try to do the additional units without looking at the code. Only look at the code when you get stuck.
7/19
Lecture
Wednesday lecture on absolute vs. relative positioning
7/19
Exercise
Horizontal Centering -- Horizontal centering can be a real problem. Try this: Make a simple page, replacing a H1 tag with a graphic using your favorite image replacement technique. Now center the image. Make sure it works in the latest browsers and in either IE4, IE5, or IE5.5. HELP!
7/19
Project
8/5
Reference
CSS Problem-Solving and CSS Crib Sheet -- how to diagnose CSS priblems.
7/19
Week of July 19
Reference CSS Beauty -- nice archive of sites using CSS, including corporate and personal sites.  
Reading Horizontal Dropdowns  
Exercise Horizontal Dropdowns -- based on the reading above, create a menu that is visibly different from the author's, complete with different colors and different menu text. Make it obvious that this isn't a cut-n-paste hack!  
Reading Faux Columns  
Exercise Faux Columns -- based on the reading above, create a page that is visibly different from the author's, complete with different colors and different text. Make it obvious that this isn't a cut-n-paste hack!  
Reading Liquid Layouts for Negative Margins (Some of this should be familiar after the Float Tutorial, but a little reinforcement won't kill us!)  
Exercise Liquid Layouts for Negative Margins -- based on the reading above, create a page that is visibly different from the author's, complete with different colors and different text. Make it obvious that this isn't a cut-n-paste hack!  
Reading CSS Sprites: Image Slicing's Kiss of Death  
Exercise CSS Sprites -- based on the reading above, create a page that is visibly different from the author's, complete with different colors and differenttext. Make it obvious that this isn't a cut-n-paste hack!  
Week of July 26
Reading Power to the People: Relative Font Sizes  
LAB By campus class request, this week will be a lab week for working on Skinning NLeCommerce.  
Week of August 2
LAB All work due by midnight August 4th
---
NEW Check out the PowerPoint file on parenting and absolute positioning. Comments wanted -- is it clear? Where do you get confused?
---