Homework Page for Marilee Ford

CS 50.11C: Cascading Style Sheets
Section 5408

My honey, Rob, and I at our home in Quincy.

Link to Lessons: 2|3/4|5|6/7|8|9|10/11|12|13|14|15/16|Final

Lesson 2: XHTML

• Link to the table based page
• Page (old code) with tables, javascript stripped out of it
• Page (clean code) after code has been modified to pass XHTML validation

Lesson 3/4: CSS Basics

• Live lesson with external style sheet added
• bus-web.css file - include a multiple selector
• Cascade Sampler
• cascade.css file
• Selector Sampler

Lesson 5: Font and Text Properties

• Files showing stretching and shrinking of fonts
  1. Relative Font Styles-control
  2. Relative Font Styles-Bigger Font
  3. Relative Font Styles-Smaller Font
  4. Fixed Font Styles-Control
  5. Fixed Font Styles-Smaller Font
• Vertical Align Text sampler
• Live site with font and text properties
• CSS file
• Extra credit - Text Sampler
• Extra credit - Font Sampler

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 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
• Aslet 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 wtih fluid sdide solumns 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
• Sytled Form

Lesson 15/16: Navigations

• 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

Final

• Link to original design
• Link to design with div tags colorized, color key of div tags, explanation of how they fit into each other
• Link to CSS file explained
• Link to images explained
• Link to modified design