1 / 9

Lesson: Using DIVs for Layout and CSS for formatting

Lesson: Using DIVs for Layout and 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.

susane
Télécharger la présentation

Lesson: Using DIVs for Layout and CSS for formatting

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lesson: Using DIVs for Layoutand CSS for formatting

  2. 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

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

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

  5. 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>

  6. 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>

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

  8. 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

  9. Rubric (graded in class)

More Related