Intoduction to stylesheets

• Setting up your website: Instructions
  
  
• Define layout of your class website. (creating folders and files)
  
  
• Introduction to CSS classes and styling HTML tags
  
  
• Internal vs external stylesheets
  

• ids vs classes

• Inserting a background image in a div tag.

• Sharing a style sheet between pages
  
  

Building pages with layouts

Setting up your website: Instructions

• Using pre-defined layouts to build pages
  • two column design
  • three column design
    
    
• how to customize a layout
  

Positioning

Setting up your website: Instructions

• relative positioning
  
  
• absolute positioning (AP-div)
  
  
• Creating a CSS "drop shadow"
  
  
• Overlapping divs
  
  
• Setting a non-scrolling bg image
• 
  Hiding divs with CSS/Javascript
  
• Building validating forms with Spry

Steps to setting up a website

Setting up your website: Instructions

Optional (if there's interest):

• Acquiring a domain name
• Chosing an ISP.
• Transferring your class site to your own
• Accessing XML data feeds with Spry
• Wrap-up
  

Defining a site (video)

CSS "cheat-sheet"

CSS tutorial  (W3 Schools)

Intro to CSS (Tizag)

CSS basics in DW

Using & customizing CSS layouts (video)

Tutorial on 2-column layout

Intro to starter layouts in CS5

Basics of CSS (video)

Random Latin Text

Background images

The "box" model (W3C)

Positioning schemes (W3C)

Styling forms with CSS (video)

Examples -- reviewed in class

1. Paragraph formatting
2. Absolute boxes (new!)
3. Overlapping boxes
4. Overlapping boxes-2
5. Non-scrolling background image
6. Drop shadow
7. Hiding boxes
8. Validating form w/Spry (styled)
(Spry validation overview)

TBD