Calendar for IMED 2415 Page Design II / Spring 2005
| Assignment | due date |
| Week One: Jan. 18 - 23 -- XHTML Boot Camp | |
| About This Week: This week is XHTML boot camp. We're going to move very quickly this week so we can get past the dull stuff quickly. There are three large-ish assignments this week, and it could be challenging to complete them all, so I suggest starting as soon as possible. | --- |
| Server Space: I'll start setting up accounts on Monday evening. You can save locally until then. | --- |
IMPORTANT: If you are receiving Financial Aid grants or loans and are enrolled in a Distance Learning class, you must show participation in this class prior to the certification date (the 12th day after the start date of the class) by e-mailing/contacting the instructor. Students taking open enrollment classes that do not have traditional semester start dates should make note of the start date of their class. Do not drop or stop attending any class without consulting the Financial Aid Office. Changes in your enrollment level and failing grades may require that you repay financial aid funds. In this class, a completed SCAVENGER HUNT will count as your first contact. UPDATE: The 'first quiz' for this class will be over Holzschlag Ch. 1. |
--- |
| READING: Syllabus, Lab Policies, Open Lab Information | --- |
| Be sure to fill out the Student Profile. This gives your instructor contact information, and tells the webmaster to set up your webspace. You need to fill this out once each semester, even if you're taking multiple NLC web design classes. | 1/23 |
| ASSIGNMENT: Scavenger Hunt | ic |
Resources
|
--- |
| Reading: Holzschlag Ch. 1 | 1/26 |
| 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! | --- |
| At-Home Activity: Download Firefox 1.0. You only THOUGHT Internet Explorer was the best browser! Its CSS support isn't anywhere near as good as Firefox'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 Firefox. | N/A |
| This is the list of the browsers we have in the classroom, in case you want to duplicate the experience at home. | --- |
| VERY OPTIONAL: 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 mileage may vary. | --- |
| Visit Yahoo! Groups and join IMED-2415. If you have a question please send it to the group so everyone can see the question and my answer. | 1/26 |
| EXTRA CREDIT: For extra credit, contact me via any Instant messenger program. Once completed successfully you will receive +5 points on your lowest assignment of the semester. | 1/26 |
| Exercise: XHTML Unit A | 1/26 |
| Exercise: XHTML Unit B | 1/26 |
| Exercise: XHTML Unit C | 1/26 |
| Week Two: Jan. 24 - 30 | |
| About This Week: This group of assignments wraps up our study of XHTML and introduces us to CSS. | --- |
| Reading: Holzschlag Ch. 2 - 3 | |
| Video: I hate to ask you this, but please watch this horrible video lecture. I don't think I've ever looked worse in my life. Watch the Flash version mentioned in the UPDATE. | 1/30 |
| Lecture Notes for Video: Structural Markup | --- |
| Exercise: XHTML Unit D | 1/30 |
| Exercise: In your own words compare and contrast BLOCK and INLINE; then DIV and SPAN; and finally CLASS and ID. Explain when to use each, and provide examples on usage. | 1/30 |
| Project: Resume Makeover -- you can start this week, but you'll want to use next week's skills to complete this. | 2/6 |
Week Three -- Jan. 31 - Feb. 6 |
|
| Reading: Holzschlag Ch. 4 - 5 | |
| Exercise: Research the "Box Model" and write a description of this model in your own words. DO NOT worry about the broken box, or how to fix the broken box, at this point. We'll cover that next week. | |
| Week Four: Feb. 7 - 13 | |
| Note: This week we will explore the box model, but not the BROKEN box model. That's next week. | |
QUIZ! Sent through Yahoo Groups. Reply due by 2/14 |
2/14 |
| Lecture on Box Model (video being taken on Monday evening, hopefully posted on Tuesday) | --- |
| Reading: Holzschlag Ch. 4 & 5 | 2/14 |
| Finish your resume this week. I expect to see proof that you can manipulate the box model. | 2/14 |
| Week Five: Feb. 14 - 27 | |
| Opera to MS: Get real about interoperability, Mr Gates -- whoa-ho! Tell 'em, Mr. Lee!!!! | 2/28 |
Reading: Holzschlag Ch. 5 & 6 |
2/28 |
| Lecture: Broken Boxes | ic |
| Box Model Hack -- download, modify as instructed, and upload to your site. | ic |
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. |
2/21 |
| OPTIONAL -- Nice $1 tutorial on the Box Model Hack, and other common hacks. | --- |
| Project Two: Two-Column Liquid Layout | 2/28 |
| Week Six: Feb. 28 - March 6 | |
| Reading: What Is Image Replacement? | 2/28 |
| Reading: The Web Is Ruined And I Ruined It | 2/28 |
2/28 |
|
| Reading: In Defense of Fahrner Image Replacement | 2/28 |
| Reading: Revised Image Replacement | 2/28 |
| Week Seven: March 7 - March 13 | |
| Exercise: Media Types: Screen, Projection, and Print | |
| March 14 - March 20 -- SPRING BREAK | |
| Week Eight: March 21 - March 27 | |
| NOTE: March 25 - 27 are official school holidays. I am going out of town for this short holiday. | |
| 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. UNGRADED -- NO NEED TO UPLOAD!!! | |
| Horizontal Centering -- (especially for Bindu!) -- 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! | |
| Presentations: Faux Layout (Charles) and Image Slicing (Tyler) | |
| Reading: Faux Layout -- After reading, email me a few short sentences summarizing the article. I should be able to tell from your summary that you understand the basic principles discussed in the article. | |
| Reading: CSS Sprites-- After reading, email me a few short sentences summarizing the article. I should be able to tell from your summary that you understand the basic principles discussed in the article. | |
| Week Nine: March 28 - April 3 | |
| Absolute Positioning | |
| Project Three: Free Choice | |
Nothing beyond this point is ready for consumption! |
|
| Lecture Notes: Selectors (video available) | |
| Exercise: CSS Selectors | |
| Project Two: WYOM Radio | |
| Project: eCommerce -- this handout is for Page Design I. You have to have SEVEN pages -- a home page, two category pages, and one set of four detail pages. Use linked CSS. I don't care about the technical objectives for PDI. Must be multi-column using FLOAT or other non-table technique. | |
| Reading: Horizontal Dropdowns | |
| Reading: Faux Columns | |
| Liquid Layouts for Negative Margins (Some of this should be familiar after the Float Tutorial, but a little reinforcement won't kill us!) | |
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. |
|
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. |
|
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! |
|
CSS Problem-Solving and CSS Crib Sheet -- how to diagnose CSS priblems. |
|
| Power to the People: Relative Font Sizes | |
| Check out the PowerPoint file on parenting and absolute positioning. Comments wanted -- is it clear? Where do you get confused? | |
Project: Skinning NLEcommerce1 |
|
| Selectors -- NEW sidebar on use of HTML attribute matching, added 6/8. | |
| CSS Selectors | |
| Monday 9/13 | |
| Monday 9/20 | |
| Monday 9/27 | |
| Monday 10/4 | |
| Monday 10/11 | |
| Monday 10/18 | |
| Monday 10/25 | |
| Monday 11/1 | |
| Monday 11/8 | |
| Monday 11/15 | |
| Monday 11/22 | |
| Monday 11/29 | |
| Monday 12/6 | |
Terms, Abbreviations & Icons
- Readings = articles or chapters that should be completed BEFORE the class session
- Topics = short graded papers or projects
- Quizzes = short multiple-choice quiz on designated material
- Activities = ungraded assignments done in class that expand on material on the textbook or from lecture.
- Exercises = graded practices covering specific objectives. Exercises generally will be completed in one class session.
- Projects = graded assignments. Projects take from two class sessions to an entire semester.
- References = documents provided for additional information. You will never be tested on a reference document. If you're falling behind in class, the reference documents should be ignored.
- Admin = administrative items needed to make the class run more smoothly.
- Notes = tips on how to handle particular assignments.
= Content posted after we've covered associated material in class.-
= Gallery of web sites serving as examples of techniques or concepts discussed in class -
= Viewlet (short movie) demonstrating a software technique. Hoover over the icon to see the show's title. Please remember that a Viewlet's content does not reflect all the material in a chapter. -
= Link to a web site used in lecture. Hoover over the icon to see the site's name or URL. -
= Supplemental reading