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 add bus-web.css file - include a multiple selector
- Cascade Sampler
cascade.css file - Selector Sampler
Lesson 5 - Font and Text Properties
- Create the following files to illustrate how to stretch and shrink fonts
- relative.html
- relative-big.html
- relative-small.html
- fixed.html
- fixed-small.html
- Vertical Align Text sampler
- live site with font and text properties
- css file
Lesson 6/7- Position Properties
- Box Property sampler
- Position Property - static
- Position Property - relative
- Position Property - absolute
- Position Property - fixed
- float and clear sampler
- Live site with <div> tags colorized
- live site with box properties
- css file
Lesson 8 - Midterm
Lesson 9 - IE / Firefox Developer Toolkit / Browser Simulators
- post your commentws to 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
- Aslett clearing method
- Live site - web page
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 columns with fluid side columns and 2 background images, so the 3 columns go down the entire length of the columns.
- The"live site" with a background image (fixed or fluid your choice).
Lesson 13 - CSS Layout Properties
Lesson 14 - Tables and Forms
- Table Sampler
- Styled Form
Lesson 15/16 - Navigation
- Simple horizontal navigation
- Page with links that display an image in the background that has 4 states (link, visited, hover, active)
- view image
- Horizontal navigation bar that has drop down navigation, pop out navigation, and second level pop out navigation. (for a total of 4 levels of navigation)
- Vertical Navigation
- Sliding Door Navigation