nav

General Site:

main
classes

Instructor:

Steve Garwood

General:

Syllabus
Assignments
Check Grades
Assn Mgmt Pgs

Week:

agenda summer '08

Class #1  

Topics Covered: Introduction to all assignments, class structure, eXtensible Hypertext Markup Language (XHTML) & Secure File Transfer Protocol (SFTP)

5.27 Lecture

Lab

  • Files needed: moose.jpg
  • Post Your Work:
    eden.rutgers.edu/~username/320/labs/one

Homework for next class

  • Reading: Williams ch.6,8 & pp.47-62; Castro ch.1-4, 7-10 & pp.103-107; How to Grok Web Standards
  • Questions: XHTML & CSS | Good Design
  • Site(s) to Create: Assignment management page|Questions/Answers page
  • Post Your Work:
    Assignment page - Save as index.htm in your 320/ directory
    Q&A page - Save as index.htm in your /320/homeworks/one directory
top

Class #2  

Topics Covered: Introduction to Cascading Style Sheets (CSS); Basic syntax, structure, connectivity and text formatting

5.29 Lecture

Lab

  • Files Needed: n/a
  • index.htm
  • Post Your Work:
    eden.rutgers.edu/~username/320/labs/two

Homework

  • Reading: Williams ch.9-10; Castro ch.5
  • Questions: Image Work
  • Site(s) to Create: Q&A page (page styled w/external css) - Save as index.htm
  • Post Your Work:
    eden.rutgers.edu/~username/320/homeworks/two
top

Class #3  

Topics Covered: Introduction to image and color work

6.3 Lecture

Lab

  • "Easy" List work: Classes | Descendent
  • Files Needed: n/a
  • Instructions: using the Fireworks Primer (if you want to/need to) create a background image that will tile either an entire page or on an axis. Add this image to an index.htm file. Then create a screen capture with annotation that illustrates an element of good design (CRAP) on a website of your choice. (ugly is fine for this lab). [One way to do this]
  • Post Your Work:
    eden.rutgers.edu/~username/320/labs/three

Homework

  • Reading: Williams ch.11; Castro pp.114-118; wise-women Fireworks Image Slicing Tutorial (Just read the tutorial)
  • Questions: Image Mapping/Slicing
  • Site(s) to Create: Q&A page (page styled w/external css) with a page banner (dimensions 728px x 90px) - Save as index.htm
  • Post Your Work:
    eden.rutgers.edu/~username/320/homeworks/three
top

Class #4  

Topics Covered: Image mapping and slicing

6.5 Lecture

  • Notes:
    • Screen Resolution: 60% @ 1024x768/ 17% @ 800x600 -Nielson (7/06) | 800x600 = 760 x (about 400-450 till the fold)
    • Image work so far: img, backgrounds
    • Walmart Sucks: Walmart Video Download Site (try it in FF)
      • Original site images: IE | FF
    • Rutgers "New" Identity: identity.rutgers.edu
  • Image mapping/slicing comments:
    • Slicing and mapping together and apart, they're unique
    • Linking vs. Mapping (map only multiple links from one image)
    • Slicing for curves/shapes: example1 | example2
  • Follow Along:
  • Post Your Work:
    eden.rutgers.edu/~username/320/inclass/four

Lab

  • Review Assignment #1
  • Files Needed: river.png
  • Instructions: Use the image above to create a main page for a catering service named Lakeview Catering. The page should be designed so it can work at 800x600 resolution (constrain width), be sliced and optimized for quick download, and at least one slice should contain multiple links created with an image map.
  • Post Your Work:
    eden.rutgers.edu/~username/320/labs/four

Homework

  • Reading: Williams pp.68-69, 264-265; Castro ch.16
  • Questions: Tables
  • Site(s) to Create: Q page with questions on an image, map a link from each question to a page with an Answer - Save question page as index.htm (example1 | example2 )
    • NO Validation Required for this Homework, focus on the mapping
  • Post Your Work:
    eden.rutgers.edu/~username/320/homeworks/four
  • Resume Assignment Due next week!
top

Class #5  

Topics Covered: XHTML tables for layout

6.10 Lecture

Lab

Homework

  • Reading: Castro ch.16 (focus on combining tables & backgrounds); Meyer pp.21-28
  • Questions: Intermediate Tables
  • Site(s) to Create: Q&A page (page layout controlled with a Table but styled w/external css) - Save as index.htm
  • Post Your Work:
    eden.rutgers.edu/~username/320/homeworks/five
    Add sites for Comparison Assignment and list of team members/solo
top

Week #6  

Topics Covered: Intermediate XHTML tables for layout

6.12 Lecture

Lab

Homework

  • Reading: Castro ch.9 (Review),10-11 & 14; Meyer pp.10-14; alistapart Thinking Outside the Grid
  • Questions: CSS Layout
  • Site(s) to create: Q&A page (page layout controlled with a Table but styled w/external css) - Save as index.htm
  • Post Your Work:
    eden.rutgers.edu/~username/320/homeworks/six
top

Class #7  

Topics Covered: CSS for Layout

6.17 Lecture

Lab

  • 100x100.gif
  • Using the image above create this xhtml/css valid page: float/clear 1
    (css validation icon should link to w3c validation report)
  • Note from the boss (Old Lab)
  • Post Your Work:
    eden.rutgers.edu/~username/320/labs/seven

Homework

  • Reading: Castro pp.178-184 (Review); Meyer pp.15-20, 43-48; Just look over: alistapart Holy Grail, Faux Columns; maxdesign CSS Layouts
  • Questions: Intermediate CSS for Layout
  • Site(s) to create: Q&A page (page layout controlled with Divs/external css), site must be valid xhtml/css (display valid css icon on page (icon should link to w3c validation report)) - Save as index.htm
  • Post Your Work:
    eden.rutgers.edu/~username/320/homeworks/seven
top

Class #8  

Topics Covered: Intermediate CSS for layout

6.19 Lecture

Lab

Homework

  • Reading: Castro ch.12,15 & pp.146; Williams ch.7; alistapart Sliding Doors of CSS; meyerweb pure CSS pop-ups; maxdesign listamatic, listamatic2; dynamicdrive css library; list-o-matic list-o-matic
  • Questions: CSS Navigation/Display
  • Site(s) to Create: Q&A page (page layout controlled with Absolutely Positioned Divs/external css); Page should be designed for small children (tell me how it is). Site must be valid xhtml/css (display valid css icon on page (icon should link to w3c validation report))
  • Post Your Work:
    eden.rutgers.edu/~username/320/homeworks/eight
top

Class #9  

Topics Covered: Navigation and Interface techniques with CSS and JS
[Introduce multi-level navigation]

6.24 Lecture

Lab

  • Notes: [Site Comparison Assignment Due]
  • Lab1:
    • Files Needed: n/a
    • Using List-O-Matic create a 4 item navigation element. Add this to a page with 2-3 paragraphs of text. Inside the paragraphs of text should be two links, each should exhibit a different mouseover/rollover (hover) behavior (the links should look/hover differently than each other)..all css should be external.
    • Example
  • Lab2:
    • Files Needed: n/a
    • Using dynamicdrive create page(s) that show: 1. an image effect; 2. menu and navigation effect(s). You can use more than one page as long as you link them all together.
  • Post Your Work:
    eden.rutgers.edu/~username/320/labs/nine

Homework

  • Don't do the section in italics, I left this here in case you want to use any of it.
    • Reading: Castro ch.19-20; dynamicdrive
    • Questions: JavaScript Navigation/Display
    • Site(s) to Create: Q&A page with a navigation element (use technique from Notes, Inclass or Lab)(Layout/Format controlled w/external css)). Links in element should work. Page should be designed for a business audience (tell me how it is)
  • Reading: Castro ch. 17; WebAIM: Forms
  • Questions: Forms
  • Site(s) to Create: Q&A page with one JavaScript element on the page (Layout/Formatting should be controlled with external css). Page should be designed for younger teens (tell me how it is).
  • Post Your Work:
    eden.rutgers.edu/~username/320/homeworks/nine
top

Class #10  

Topics Covered: Forms (all files on rci/eden which supports php)

6.26 Lecture

Lab

  • Files Needed: n/a
  • Post Your Work: n/a, time for any final questions, review of final assignment, final homework, etc.

Homework

top

Class Final  

Topics Covered: Final

7.1 Final Due
Notes: [Final Assignment Due]

top