Lesson 2 - XHTML
Here is a link to the table based page
Here is the page with the tables, javascript stripped out of it. old code
Here is the page after code has been modified to pass XHTML validation clean code
Lesson 3/4 - CSS Basics
"Live lesson" with external style sheet added
live.css file - includes a multiple selector
Cascade Sampler with external style sheet
cascade.css file
Lesson 5 - Font and Text Properties
The following files illustrate how to stretch and shrink fonts:
relative.html
relative-big.html
relative-sm.html
fixed.html
fixed-small.html
Live site with font and text properties
CSS file
Lesson 6/7- Position Properties
Position Property - static
Position Property - relative
Position Property - absolute
Position Property - fixed
Live site with <div> tags colorized
Live site with box properties
CSS file
Lesson 8 - Midterm
Lesson 9 - IE / Firefox Developer Toolkit / Browser Simulators
My comments are posted on the class message board.
Lesson 10/11- Layout part 1 and 2
2 column layout using absolute positioning
3 column layout using absolute positioning
3 column with header and footer using float and clear
Live site - web page
Live site - CSS file
Lesson 12 - Layout part 3
3 fixed columns with a background image, so the 3 columns go down the entire length of the columns.
3 column fixed
3 columns with fluid side columns and 2 background images, so the 3 columns go down the entire length of the columns.
3 column fluid
The"live site" with a background image fixed.
Lesson 13 - CSS Layout Properties
live site with centering trick
CSS file that controls live site
Lesson 14 - Tables and Forms
Lesson 15/16 - Navigation
Vertical Navigation with Java script - will not validate!
Vertical Navigation with no Java script - validates!
Sliding Door Navigation - single page showing format, with embedded CSS
Sliding Door Navigation - active! Try clicking on different tabs!
Supporting CSS file
Live site with horizontal drop-down menus
CSS file that controls live site
Final
Zen Garden page I picked: Ocean Garden
Copy of original HTML, CSS disabled: oceanscape.html
Copy of original CSS file: oceanscape.css
Part 1: Div Tags Explained
Colorized div tags with color key, no images: final-color-div.html
Note that since the CSS styles for this site replaces the headings with images, no headings are visible in the colorized div tag page.
Here is the CSS file: final-color-div.css
Part 2: CSS Explained
The CSS styles listed with explainations for each style: final-css-explain.html
Part 3: Images Explained
Images shown on a web page with explainations for what each image does: final-images-explain.html
Part 4: Change Existing CSS
HTML file that uses a modified CSS file: final-modified.html
Modified CSS file: modified.css
Note that I played and played with this CSS file - purposely pushing things too far, crashing the layout, then backing-up and trying something else. All in all an interesting exercise. I moved the fish on the page, changed the font color, changed some of the links and authors to small-caps, etc.
