Linda M Drexler - Section #4478
Cascading Style Sheets - 50.11C
linda@applecreekstudios.com

Lesson 2: XHTML

• Table Based Page: Business of Web Design
• Old Code: Page is modified (no tables or javascript)
• Clean Code: Page modified to pass XHTML validation

Lesson 3/4: CSS

• "Live" HTML page
• CSS File
• Cascade Sampler
• External Style Sheet
• 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-sm.html
• fixed.html
• fixed-small.html
  
• Vertical Align Text Sampler
  
• Live site with font and text properties
• css file

Lesson 6/7- Position Properties (due 10/7)

• Box Property sampler
• Position Property - static
• Position Property - relative
• Position Property - absolute
• Position Property - fixed
  
  
• Live site with <div> tags colorized
  
  Llive site with box properties
  css file

Lesson 8 - Midterm Exam (due 10/14)

Lesson 9 - IE / Firefox Developer Toolkit / Browser Simulators

• Post your comments 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
• 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 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).
• CSS file

Lesson 13 - CSS Layout Properties

• 3 column fixed centered
• 3 column fluid centered
• live site with centering trick
• CSS file that controls live site

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