1 / 57

CSS Layout Essentials: From Page Design to Site Development

Explore key concepts such as code validation, class vs id usage, floating elements, and more. Learn to create efficient and visually appealing web layouts using CSS. Dive into the importance of validation with W3C tips and best practices. Master the art of structuring web content using div tags and defining styles for optimal presentation.

rosestewart
Download Presentation

CSS Layout Essentials: From Page Design to Site Development

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. Three parts: - A few words ... - Layout using CSS - From web page design to web site design

  2. Part 0: A few words … - Code validation - CSS classes and id

  3. On the importance of validation http://validator.w3.org/

  4. 1. Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  5. 2. Embedded lists – the right way! <ul> <li>Introduction</li> <li>Main Chapter <ul> <li>Section 1</li> <li>Section 2</li> </ul> <li>Conclusion</li> </ul>

  6. 3. Various inaccuracies • <img src=“…”alt=“description”/> • <td>, not <td width=“”> • <title> required in <head> • <td colspan=“2”> not <td colspan=2> • etc

  7. 4. Class or id? • id applies to a single element, class to any element • Only one id per element, several classes per element • But, these rules are not enforced by all browsers

  8. id In the head: <style type="text/css" > p{color:black;} #quote{font-style:italic;} </style> In the body: <p>Here's a short paragraph formatted in a <i>standard</i> way.</p> <p id="quote">Here's a type of paragraph that is intended to be displayed in italic.</p>

  9. class In the head: <style type="text/css" > p{color:black;} .quote{font-style:italic;} </style> In the body: <p>Here's a short paragraph formatted in a <i>standard</i> way.</p> <p class="quote">Here's a type of paragraph that is intended to be displayed in italic.</p> <div class="quote">Here's a section of text. Using a unique class identifier, the previous paragraph and the current div share the same formatting property.</div>

  10. Using multiple classes In the head: <style type="text/css" > .important{font-style:italic;} .title{color:red;} </style> In the body: <p class=“title important">Here's a type of paragraph that is intended to be displayed in italic.</p>

  11. W3C tips http://www.w3.org/QA/Tips/

  12. The goal

  13. Part 1: Layout

  14. The concept • Use <div> tags to structure the blocks of the page. (content) • Define a style for <div> tags to achieve the desired output. (presentation)

  15. 1. Basic properties • width (default is 100%) • padding (ex: padding: 10px;) • background (ex: background: #ffffff;) • etc

  16. 2. Floating elements • Enables blocks to be aligned • Property: • float: left; • float: right; • float: none;

  17. 2. Floating elements, example • Three divs in a page, with following style: div.title{ float:left; border:1px solid gray; padding:10px; } Output: layouta.html

  18. 2. Floating elements, example • Three divs in a page, with following style: div.title{ width:200px; float:left; border:1px solid gray; padding:10px; } Output: layoutb.html

  19. 3. Positioning • Elements can be positioned at any coordinates in the page • Property: • position: static; • position: relative; • position: absolute;

  20. Positioning example • Three divs in a page, with following style: div.title{ width:200px; position: absolute; top: [100,200,300]px; left: [100,200,300]px; border:1px solid gray; padding:10px; } Output: layoutc.html

  21. 1. no layout <body> <h1>Page Title</h1> <p>This is the first block.</p> <p>This is still the first block.</p> <p>This is the second block.</p> </body>

  22. Output

  23. 2. Three sections (1) <body> <div> <h1>Page Title</h1> </div> ... </body>

  24. 2. Three sections (2) <body> ... <div> <p>This is the first block</p> <p>This is still the first block.</p> </div> ... </body>

  25. 2. Three sections (3) <body> ... <div> <p>This is the second block.</p> </div> </body>

  26. Output

  27. 2. Three “typed” sections (1) <body> <div class=”title”> <h1>Page Title</h1> </div> ... </body>

  28. 2. Three sections (2) <body> ... <div class=”part1”> <p>This is the first block</p> <p>This is still the first block.</p> </div> ... </body>

  29. 2. Three sections (3) <body> ... <div class=”part2”> <p>This is the second block.</p> </div> </body>

  30. Output

  31. 3. Writing a style (1) <style> div.title{ border:1px solid gray; padding:10px; } ... </style>

  32. 3. Writing a style (2) <style> ... div.part1{ border:1px solid gray; padding:10px; } ... </style>

  33. 3. Writing a style (3) <style> ... div.part2{ border:1px solid gray; padding:10px; } </style>

  34. Output

  35. 4. Two column layout v1 - right column has variable width

  36. 4. Two column layout v1

  37. 4. Two column layout v1 (1) <style> div.title{ border:1px solid gray; padding:10px; } ... </style>

  38. 4. Two column layout v1 (2) <style> ... div.part1{ float: left; width:200px; border:1px solid gray; padding:10px; } ... </style>

  39. 4. Two column layout v1 (3) <style> ... div.part2{ margin-left:222px; border:1px solid gray; padding:10px; } </style>

  40. Output • As required • Right column has variable width

  41. 5. Two column layout v2 – left column has variable size

  42. 5. Two column layout v2

  43. 5. Two column layout v2 (1) <style> div.title{ border:1px solid gray; padding:10px; } ... </style>

  44. 5. Two column layout v2 (2) <style> ... div.part1{ margin-right:222px; border:1px solid gray; padding:10px; } ... </style>

  45. 5. Two column layout v2 (3) <style> ... div.part2{ float:right; width:200px; border:1px solid gray; padding:10px; } </style>

  46. Output • As required • Left column has variable width • In Body of document, part1 and part2 have been permuted, otherwise doesn't work • At home, try to permute them back and see what happens ... • There's a way to make the layout work without permutation. See three column example further on ...

  47. 6. Three column layout v1 – Right column has variable width

  48. 6. Three column layout v1

  49. 6. Change in the document body <body> <div class=”part1”>...</div> <div class=”part3”>...</div> <div class=”part2”>...</div> </body>

  50. 6. Threecolumn layout v1 (1) <style> ... div.part1{ float: left; width:200px; border:1px solid gray; padding:10px; } ... </style>

More Related