Lesson: Using DIVs for Layout and CSS for formatting

Lesson: Using DIVs for Layoutand CSS for formatting

Starting a layout • Think about your content, navigation required, and personal/customer preferences • Sketch it out on paper or in PowerPoint • Think about how the sketch maps to DIV sections • Do any math required to get the layout right

Sketch out your page Container DIV wraps all Logo Title / Banner area Nav menu Item 1 Item 2 etc. Content area Footer here

Sketch 2 Container DIV wraps all Logo Title / Banner area Nav menu Item 1 Item 2 etc. Content area Footer here

Set up DIV structure (sketch 1) <body> <div id="container"> has a width, left and right margin: auto <div id="header"> Logo / Header info </div> <div id="menu"> floated left menu details here </div> <div id="content"> also floated left (or right would also work) Content goes here </div> <div id="footer"> clear: both footer </div> </div> </body>

Set up DIV structure (sketch 2) <body> <div id="container"> has a width, left and right margin: auto <div id="header"> no floating required for this layout Logo / Header info </div> <div id="menu"> menu details here </div> <div id="content"> Content goes here </div> <div id="footer"> footer </div> </div> </body>

Do the math (sketch 1) • If the container DIV is 800px • And the menu is 150px • Then make the content DIV 650px

Assignment 6 • Create a web page about monkeys • Create a new layout (unlike sketch 1 or 2) • Look on the web for inspiration (but don’t copy HTML/CSS) • Sketch it out in PowerPoint • Map it to a DIV layout in HTML • Do the math for widths, heights of the DIVs • Add monkey content

Rubric (graded in class)

Lesson: Using DIVs for Layout and CSS for formatting