CSS Page Layouts and Design - Week 8
Lecture/Demo:
- Presentation on Layout and Design - Screen Real Estate and Screen Resolution.
- Layout and Design. CSS Layouts. The Box Model, Margins, Borders and Padding, Floats, positioning and Text Formatting. We will create a two column fixed layout from scratch.
- Overview of Dreamweaver layouts available - Fixed and Liquid
- Defining the CSS Rules for layout areas
- Apply the CSS Rules to inserted <div> tags
- Add Text and image placeholders to the page
- Use rulers and guides to fine-tune a layout
- Create a Dreamweaver template for multiple page use.
Lab:
- Create a 3 column layout Exercise
- Determine your theme, metaphors and screen resolution for your final project. Draw out a couple of thumbnail sketches.
Getting Inspired
- http://www.csszengarden.com
- http://www.cssbeauty.com
- http://www.stylegala.com/archive
- http://www.cssvault.com
Resources:
- The Box Model by W3Schools
- W3.Org Box Model Explanation
- Box Model Demo
- What's new in the Dreamweaver CS5 CSS Layouts
Homework:
- Finish the 3 column layout Exercise
- Determine your theme, metaphors and screen resolution for your final project. Draw out a couple of thumbnail sketches.