
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