Fall 11 - CS 50.21
CSS & Graphics

Janet Prouty
shadowz9@sonic.net

Lessons: 1 :: 2 :: 3 :: 4/5 :: 6 :: 7/8 :: 9 :: 10 :: 11 :: 12 :: 13 :: 14 :: final

Section 1386

Lesson 1

load this file onto the Web

Lesson 2 - Formats

Link to the photo saved as JPEG and PNG
Link to the clip art saved as JPEG and PNG
Link to the transparency sampler

Lesson 3 - Client #1

Link to the template page with each div tag colorized
Link to the CSS explanation page
Link to the images explained

Lesson 4/5 - Color and Images

Link to the jpeg which shows the redesign
Link to the index page with color and images added
Link to the second level page
Link to the other second level page
Link to the edited image

Lesson 6 - Client 2

I selected design #153
Link to the template page with each div tag colorized
Link to the CSS explanation page
Link to the images explained

Lesson 7/8 - Modify Client 2

I selected design #153
Link to the jpeg which shows the redesign
Link to the index page with color and images added
Link to the second level page
Link to the other second level page
Link to the linked text sampler
Link to the horizontal navigation sampler

Section 1387

Lesson 1 - Client 3 Prliminary design

Design #114
Link to the jpeg file which shows the design of the second level page
Link to the jpeg file which shows the design of the second level page and has color overlays where the div tags will be

Lesson 2 - HTML/CSS/images for Client 3

Link to the second level page for client 3. validation icons for HTML and CSS included

Lesson 3/4 - Photos and Logos

Link to client#2 with redesigned logo
Link to client#2 sl with redesigned logo
Link to client#3 with redesigned logo
Link to the page which displays resized logo at 200, 100 and 50 pixels
Link to the 2 photo collages

Lesson 5 - Advanced Images

Link to the photo gallery
Link to the random image page

Lesson 6 - Advanced Navigation

Link to the updated client#2 with horizontal navigation
Link to the updated second level client#2 page with drop down navigation
Link to the vertical pop out sample
Link to the sliding door sample

Lesson 7 - New in CSS#

Link to client 1 using @font-face technique for the promotional quote in the left column, box-shadow and border-radius around the content, and a gradient in the body background.Client#1 with 4 new features
Link to the text-shadow sampler
Link to the multiple background images, colors or gradients

Final