agenda fall '06
Week #1
Topics Covered: Introduction to eXtensible Hypertext Markup Language (XHTML) & Secure File Transfer Protocol (SFTP); Brief introduction to all assignments and class structure
9.6 Lecture
- Notes: This week is all about Structure...of the class and web docs
- Pages/Pages/Templates: XHTML tags | XHTML shell (View Source)
- Follow Along:
- Create Folder - one
- Files needed - google.gif, shim.gif |Pages we create - index.htm, sw1.htm, sw2.htm
- SFTP these files and create a directory structure for the rest of class.
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/one
Lab
- To Be Displayed In Class | Files needed: moose.jpg
- Post Your Work:
eden.rutgers.edu/~username/347/labs/one
Homework for next week
- Reading: Williams ch.6,8 & pp.47-62; Castro ch.1-4, 7-10 & pp.103-107
- 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 347/ directory
Q&A page - Save as index.htm in your /347/homeworks/one directory
Week #2
Topics Covered: Introduction to Cascading Style Sheets (CSS); Basic syntax, structure, connectivity and text formatting
9.13 Lecture
- Notes: There are lots of ways to do the same thing, Make sure you test in IE and FF as you design, You have to know how the document flows
- Pages/Templates: XHTML shell w/external css links | Font/Text styles | Supported Fonts | css template | css notes
- Follow Along:
- Create Folder - two
- Files needed - denni.jpg
- Pages we create - index.htm, page2.htm, index2.htm, cssone.css, cssprint.css, csstwo.css
- SFTP these files
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/two
Lab
- To Be Displayed In Class | Files Needed: index.htm
- Post Your Work:
eden.rutgers.edu/~username/347/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/347/homeworks/two
Week #3
Topics Covered: Introduction to image and color work
9.20 Lecture
- Notes: Standard Banner Sizes | Color Glossary | Where to get images (see tools/don't steal)| Today = basics (enough to complete assignments)
- Pages/Templates: Applying Background Images w/CSS (img tag covered wk1)
- Follow Along:
- Fireworks Instructions
- Create folder - three
- Files needed - n/a
- Pages we create - exercise.htm
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/three
Lab
- Files Needed: n/a
- Instructions: using the Fireworks Primer (if you want to/need to) create a background image, and a screen capture/shot with annotation that illustrates an element of good design on a website of your choice. Place all images in a file named index.htm (ugly is fine)
- Post Your Work:
eden.rutgers.edu/~username/347/labs/three
Homework
- Reading: Williams ch.11; Castro pp.114-118; wise-women Fireworks Image Slicing 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/347/homeworks/three
Week #4
Topics Covered: Image mapping and slicing (Recap/Review 1st Assignment)
9.27 Lecture
- Notes: Class Assistant(s) | 60% @ 1024x768/ 17% @ 800x600 -Nielson (7/06) | 800x600 = 760 x (about 400-450 till the fold)
- Pages/Templates: Preview: center/middle content with tables | css
- Follow Along:
- Image Slice Directions
- Create folder - four
- Files needed - moosemaster.png
- Pages we create - Big Moose
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/four
Lab
- 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 one slice should contain multiple links created with an image map.
- Post Your Work:
eden.rutgers.edu/~username/347/labs/four
Homework
- Reading: Williams pp.68-69, 264-265; Castro ch.16
- Questions: Tables
- Site(s) to Create: Q&A page (page styled w/external css) - Save as index.htm
- Post Your Work:
eden.rutgers.edu/~username/347/homeworks/four - Resume Assignment Due next class!
Week #5
Topics Covered: XHTML tables for layout
10.4 Lecture
- Notes: [Resume Assignment Due] | Are tables bad/good? | IE = evil | html vs. xhtml Tables | Check out that Web Developer's toolbar for FF | Fixed or Flexible?
- Pages/Templates: Single Cell Table "trick" |Height Issues
- Follow Along:
- Create folder - five
- Files needed - leaderboard.gif
- Pages we create - Simple Table Layout | Two Column Layout
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/five
Lab
- Files Needed: n/a
- Fixed table layout with align and vertical align properties
- Post Your Work:
eden.rutgers.edu/~username/347/labs/five
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/347/homeworks/five
Week #6
Topics Covered: Intermediate XHTML tables for layout
10.11 Lecture
- Notes: Review Comparison Assignment | Rule of 3
- Pages/Templates: n/a
- Follow Along:
- Create folder - six
- Files needed - leaderboard.gif | gerbera.gif | weeds.gif
- Pages we create - Intermediate Tables
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/six
Lab
- Files Needed (put in separate images folder): header.gif | product1.gif | product2.gif | product3.gif | product4.gif
- Layered, Nested Tables
- Post Your Work:
eden.rutgers.edu/~username/347/labs/six
Homework
- Reading: Castro ch.9 (Review),10-11 & 14; Meyer pp.10-14; alistapart Thinking Outside the Grid & Exploring Footers
- 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/347/homeworks/six
Add sites for Comparison Assignment and list of team members/solo
Week #7
Topics Covered: CSS for Layout
10.18 Lecture
- Notes: Welcome to heaven/hell | Tables vs. Divs
- Pages/Templates: Width Issues |Height Issues| Layout (Float/Clear ) Issues
- Follow Along:
- Create folder - seven
- Files needed - backgroundtile.gif | small box image
- Pages we create - css layout
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/seven
Lab
- Files Needed: n/a
- Note from the client w/specs
- Post Your Work:
eden.rutgers.edu/~username/347/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) - Save as index.htm
- Post Your Work:
eden.rutgers.edu/~username/347/homeworks/seven
Week #8
Topics Covered: Intermediate CSS for layout: Positioning, Z-Index, Float/Clear cont.
10.24 Lecture
- Notes: [Site Comparison Assignment Due]
- Pages/Templates: Two Column Layout w/Absolute Positioning | Three Column Layout w/fixed sides w/Absolute Positioning | Three "Faux" Fixed Columns w/floats | Two Column Liquid Layout w/"Faux" Columns |
- Follow Along:
- Create folder - eight (images folder inside eight)
- Files needed - bodybackground.gif | coffeebeans.jpg | contentheader.gif | contentcontent.gif | contentfooter.gif | crazycat.jpg | coffeepour.jpg | sidebarheader.gif | sidebarcontent.gif | sidebarfooter.gif
- Pages we create - css layout2
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/eight
Lab
- Files Needed: n/a
- Position inside Position
- Post Your Work:
eden.rutgers.edu/~username/347/labs/eight
Homework
- Reading: Castro ch.12,15 & pp.146; Williams ch.7; meyerweb pure CSS pop-ups; maxdesign listamatic, listamatic2; list-o-matic list-o-matic
- Questions: CSS Navigation/Display
- Site(s) to Create: Q&A page (page layout controlled with Absolutely Positioned Divs) - Save as index.htm
- Post Your Work:
eden.rutgers.edu/~username/347/homeworks/eight
Week #9
Topics Covered: Navigation and Interface techniques with CSS
11.1 Lecture
- Notes: Comments on Comparison Assn| Redesign Assn Review
- Pages/Templates: List Types | Link Types |CSS Text Popups | CSS Image Popups
- Follow Along:
- Create folder - nine
- Files needed - csshover2.htc | indexnocss.htm
- Page we create - index.htm
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/nine
Lab
- 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 which has links using two different link styles.
- Post Your Work:
eden.rutgers.edu/~username/347/labs/nine
Homework
- 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). Links in element should work.
- Post Your Work:
eden.rutgers.edu/~username/347/homeworks/nine
Add site for Redesign Assignment and list of team members/solo
Week #10
Topics Covered: Navigation and Interface techniques with JavaScript
11.8 Lecture
- Notes: Comments on Comparison Assn | Allow Blocked Content in IE
- Pages/Templates: New Windows | Browser Sniffer | Image Rollovers | Click for Content | Switch Sheet (user preference) | Browser based CSS
- Follow Along: n/a
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/ten
Lab
- Using dynamicdrive create page(s) that show: 1. an image mouseover effect; 2. menu and navigation effect(s); and, 3. a "new window" link.
- Post Your Work:
eden.rutgers.edu/~username/347/labs/ten
Homework
- Reading: Castro ch.13
- Questions: Small Screen
- Site(s) to Create: Q&A page with one JavaScript element on the page
- Post Your Work:
eden.rutgers.edu/~username/347/homeworks/ten
Add final design topic and list of team members or working solo
Week #11
Topics Covered: Web Design Standards
11.15 Lecture
- Notes: [Redesign Assignment Due] XHTML Validator | CSS Validator
- Pages/Templates: n/a
- Follow Along: FUN time! (Well for me at least)
- Post Your Work: n/a
Homework
- Reading: sourceforge Audacity tutorial; wise-women podcasting
- Questions: Podcast recording
- Site(s) to Create: Q&A page that has valid xhtml & css. (Include links to both validators)
- Post Your Work:
eden.rutgers.edu/~username/347/homeworks/eleven
Week #12
Topics Covered: Podcasting Part 1: Recording/Editing/Hosting
11.29 Lecture
- Notes: Final Assn Review | Comments on Redesign | LAME file
- Pages/Templates: Link & Embed| Tips & Tricks | Simple Recording w/Audacity
- Follow Along:
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/twelve
Lab
- Make a podcast from:
- Files needed - Script | Music
- Post Your Work:
eden.rutgers.edu/~username/347/labs/twelve
Homework
- Reading: Castro ch.25
- Questions: Creating RSS feeds
- Site(s) to Create:
- Post Your Work:
eden.rutgers.edu/~username/347/homeworks/twelve
Week #13
Topics Covered: Podcasting Part 2: Syndication
12.6 Lecture
- Notes: Class Evaluations
- Pages/Templates: Aggregators/Podcatchers | iTunes Specific Info | rss/xml shell | feed creaton tools | feed validator | feed icons:
- Follow Along: Simple RSS page
- Post Your Work:
eden.rutgers.edu/~username/347/inclass/thirteen
Lab
- N/A work on Final/Questions
Homework
- Reading: n/a
- Questions: End of Class Questions
- Site(s) to Create: Simple Q&A page
- Post Your Work:
eden.rutgers.edu/~username/347/homeworks/thirteen
Week #14
Topics Covered: Final
12.13 Final Due
Notes: [Final Assignment Due]