Web Construction/CSS/Spry
Download as PPTX, PDF0 likes236 views
The document provides best practices for developing websites, including using minimal tables with a four-block layout, putting all content in the HTML document, and using CSS for presentation. It warns against overusing <div> tags and class attributes ("Classitis and Divitis") and recommends starting with simple XHTML and then using CSS selectors to style elements. JavaScript is described as a way to add interactivity to a site.
Web Construction/CSS/Spry
- 1. Some of the best practices but NOT the final answer.
- 2. How we want to start developing our sites.
- 3. Minimal tables • Use as little tables as possible. To obtain a standard four-block layout…
- 4. …the following code is all you need: <table> <tr> <td colspan="2"> <div class="header"> Header </div> </td> </tr> <tr> <td> <div class="navigation"> Navigation </div> </td> <td> <div class="content"> Content </div> </td> </tr> <tr> <td colspan="2" style="vertical-align: bottom"> <div class="footer"> Footer </div> </td> </tr> </table>
- 5. CONTENT • It’s important to put all content (text, images ect) in your html doc. • As well as scripts, tables and divs. PRESENTATION • CSS can cover the rest…
- 6. A language used to describe the design of an HTML doc
- 8. Classitis and Divitis • An error of beginning CSS coders is to use far too many <div> tags and class attributes, like: <div class="header"> <div class="headerText"> <p class="headerP">This site uses CSS!</p> </div> </div>
- 9. Start with simple XHTML: <div class="header"> <p>This site uses CSS!</p> </div> Then use these two CSS selectors: div.header { /* styles */ } div.header p { /* styles */ }
- 10. Tryextending the selector or specifying certain tags. body, td, li, p { font: 0.8em verdana,sans-serif; } #mydiv p { font-size: 34px; }
- 12. A simple way to add interactivity to your site