CS12 Day Four

Daily Objective

Participants will be able to:

• Create a simple layout with CSS.
• Describe the Box Model.
• Create a data table.

Presentations:

1. CSS Positioning

Instructor Led Project: Files Needed

Box Model | CSS Positioning | Play: Positioning

Participant Project 1: Lab 4 Requirements

What your page should look like: EXAMPLE

Participants will need to complete the following items for their lab project:

Vacation Page

• Each page has logically used DIV tags.
• External style sheet with IDs used to control DIVs
• Style sheet contains the appropriate padding, margin, floats, borders and other necessary styles to create a professional looking page.
• All pages validate to XHTML 1.0 Transitional.
• Style sheet validates against W3C CSS validator.

Resources

• Box Model : http://www.redmelon.net/tstme/box_model/
• CSS-P: http://www.macromedia.com/devnet/mx/dreamweaver/articles/intro_cssp.html
• CSS-P: http://www.mezzoblue.com/css/cribsheet/
• CSS-P: http://www.csszengarden.com
• Layout-o-matic: http://www.inknoise.com/experimental/layoutomatic.php
• Layout Generator: http://www.csscreator.com/version2/pagelayout.php
• 3-Col Layout: http://www.pixy.cz/blogg/clanky/css-3col-layout/
• Css Layouts: http://glish.com/css/

Readings

• Head First: 429- 467, 487-547
• Quick Start: Layout with styles - 175-196

Assignment(s): Next Class @ 5:00pm

• Complete Lab 4 Requirements
• Take Home Assignment #3 - Accessibility (optional)

Bonus

• Free Text (Latin Generator): http://www.lipsum.com/feed/html