Martha's Home Page • HW1 • HW2 • HW3 • HW4 • HW5 • HW6 • HW7 • HW8 • HW9 • HW10 • HW11 • HW12 • FINAL •
COIN74b Class

COIN74B HW REQUIREMENTS LIST

HOMEWORK 1: Configuring UNIX Account

(reviewed by Vania Kong)

link to the assignment two 'minisite' of 3 to 5 pages

HOMEWORK 2: Cascading Style Sheets

(reviewed by Vania Kong)

  1. CSS 1 - Set a style for text (.alignCenter)
  2. CSS 2 - Set a style for bullets (list-type: none)
  3. CSS 3 - Set styles for links (background-color and color vary for link, visited, hover, and active)
  4. CSS 4 - Set a stlye for a table (background-color: #99CCFF; border #9966FF; float: left)
  5. CSS 5 - Set up a contextual selecter (ul li) (list-style: inside)
  6. CSS 6 - Absolute positioning of images (thumbnail frame for 5 images is 220px from top)
  7. CSS 7 - Try overlaying images using Z-index (the yellow text message covers a tall image)
  8. CSS 8 - Export all your styles to an external stylesheet (coin74b.css)
  9. CSS 9 - Import styles from a stylesheet into a page (<link href="../../coin74b.css" rel="stylesheet" type="text/css" />)
  10. CSS 10 - Import styles from a stylesheet into a stylesheet - used a Dreamweaver css template on page 4. Source code shows: @import url("page4-template/emx_nav_left.css")

HOMEWORK 3: Layers and Behaviors

(reviewed by Vania Kong )

Explanation: for this exercise, I tried to create a page using layers. Here are the steps I took:

  1. Step 1 - 1st attempt: created DIVs for everything (as prelude to creating layers). Result: a failure! see the original file and faulty css for colRight; couldn't create layers because of this.
  2. Step 2 - 2nd version: converted tables to layers; it layered the whole page, but centering is off
  3. Step 3 - 3rd version: adjusted layers ( new layers added; layers named; centered top nav: width changed to 100%). See CSS
  4. Step 4 - 4th version: created layers using layout design tools; copied and pasted content; adjusted css; tedious! PROBLEM: how do I center this on the screen? PROBLEM: how do I change CSS to show and print in IE6?
  5. Step 5 - 5th version: removed header, adjusted top placement for other layers. View ALL 5 LAYERS illustrated by 5 colored backgrounds. In an effort to center the page, I ended up converting all the layers back into DIVs. URG! My original intent was to create a layout with layers so I could exchange layers easily. The effort was anything but easy. I think I'll leave layers for layout purposes alone! The RESULTS, however, were ultimately satisfying (but without layers!). I then adapted all the other pages by using the cut-and-paste method, replacing "mainContent" columns with original pages.
  6. behavior 1 - Popup message - this page: HW3-Step 1
  7. behavior 2 - Rollover image created with DW ("Original Pages")
  8. behavior 3 - Image Swap: roll mouse over image to see another
  9. behavior 4 - Show/Hide behaviors: larger image appears on click; disappears when mouse moves.
  10. behavior 5 - Open browser window (click on Page 4 link!)

HOMEWORK 4: Frames

(reviewed by Vania Kong )

  1. Frameset example - first attempt; awkward
  2. Frameset example - 57th attempt; successful
  3. Frameset discussion - love the looks, but not the functionality of frames!

HOMEWORK 5: Templates

(reviewed by Monica Salinas )

  1. Create a template - via tutorial: template based on Dreamweaver: The Missing Manual Tutorial, Chapter 17.
  2. Create a template - from scratch: created a template for future HW pages
  3. Create a template - from existing page: used my HW3 minisite as a beginning page.
  4. Apply a template - this shows how my template 1 (horoscopes) was used to create a page.
  5. Apply a template - this shows how my template 2 (HW page template) is applicable to other lessons. PROBLEM: I found I had to revise my template 2: the repeating region did not include an editable region within it! But, changes were made in a minute, and updates to the next.html page showed up immediately.
  6. Apply a template - this shows how my template 3 (HW minisite) was used to create 4 other pages (pg1, pg2, pg3, pg4)
  7. Discuss a template

HOMEWORK 6: Library Items and Snippets

(reviewed by Monica Salinas )

  1. Library item 1
  2. Library item 2
  3. Library item 3
  4. Code snippet 1
  5. Code snippet 2
  6. Storyboard proposal
  7. Comment on usability

HOMEWORK 7:

(reviewed by whomever)

  1. Email form
  2. Email output
  3. Guestbook form
  4. Guestbook output
  5. Searchable inventory

HOMEWORK 8: Interactive Images
(Martha's Postal Page)

(reviewed by Robin Roth )

  1. Flash FLV - video on the left was made with Flash Video Encoder, and added as a Flash Movie with DW
  2. Shockwave - video on the right is in original .mov format, and embeded into page; both appear to use shockwave player; so - what's the difference?
  3. Simple Viewer - slideshow of ballot-mailing process at the Union
  4. QuickTime - Martha delivers the mail; video from 2003.
  5. Podcast - Martha's First Podcast
  6. YouTube - USPS film about the automation of magazine sorting, called "Sequencing Flats"

HOMEWORK 9: JavaScript

(reviewed by Monica Salinas)

  1. Behavior 1 - breadcrumbs
  2. Behavior 2 - divimage viewer
  3. Behavior 3 - virtual pagination
  4. Behavior 4 - open new window
  5. Behavior 5 - calendar
  6. Behavior 6 - folding tree menu
  7. Behavior 7 - favicon icons

HOMEWORK 10: XML and RSS

(reviewed by whomever)

  1. XML Nested model
  2. XML Empty model
  3. XHTML meta data
  4. RSS feed
  5. Google XML sitemap

HOMEWORK 11:

(reviewed by whomever)

  1. Google XML sitemap
  2. Google site analysis
  3. Google tracking tools

HOMEWORK 12:

  1. Project link
  2. Portfolio link
  3. Code reviewers

* In the case of a 404 error, I always check the server first to ensure it is functioning properly, and that I can see your directory. I also allow you to resubmit (once) for any assignment where there is a 404 error, with the exception of the final assignment (unless you can correct it quickly).

Valid XHTML 1.0 Transitional