1. Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05

2. Layout Page banner, sidebar, main content, footer Old method: Use,, New method: and "float" CSS property Think of your web pages like water. With "float" your 's will automatically move around to allow other 's to fit.

3. Common layout Banner (Header)‏ Sidebar (News, etc)‏ Navigation (Menu)‏ Main page content Footer (Copyright, Contact information)‏

4. Margin Border Padding The infamous "box model" Content

5. Container (wrapper)‏ Common layout Banner (Header)‏ Sidebar (News, etc)‏ Navigation (Menu)‏ Main page content Footer (Copyright, Contact information)‏

6. Layout template

7. Layout with content, no style My portfolio Home|Contact|About Today's news Here are my photos... Copyright 2009, Me

8. Without CSS positioning My portfolio Today's News Home | Contact | About Here are my photos... Copyright 2009, Me

9. CSS style for each id #wrapper {...} #header {...} #menu {...} #sidebar {...} #main {...} #footer {...}

10. width: and float: #wrapper {width: 750px; margin: 0px auto;} #header {...} #menu {...} #sidebar {width: 200px; float: left;} #main {width: 550px; float: right;} #footer {...}

11. With CSS positioning added My portfolio Today's News Home | Contact | About Here are my photos... Copyright 2009, Me