Visualizing The Code

Slideshow Transcript

1. Slide 1: Build your Vision, Visualize the Code Advanced CSS Stephen Ireland
2. Slide 2: What Does it Mean? Visualize? <div id=”header”> <div id= <div id= ”sidebar”> ”content”> <div id=”footer”> Advanced CSS Stephen Ireland
3. Slide 3: Example 1. (terralien.com) Advanced CSS Stephen Ireland
4. Slide 4: Visualizing Example 1. Advanced CSS Stephen Ireland
5. Slide 5: Visualizing Example 1. div id=”wrapper” Advanced CSS Stephen Ireland
6. Slide 6: Visualizing Example 1. Advanced CSS Stephen Ireland
7. Slide 7: Visualizing Example 1. div div div div Advanced CSS Stephen Ireland
8. Slide 8: Visualizing Example 1. ul h1 h2 p h3 h2 p ul li li Advanced CSS Stephen Ireland
9. Slide 9: Example 2. (alpkit.com) Advanced CSS Stephen Ireland
10. Slide 10: Visualizing Example 2. Advanced CSS Stephen Ireland
11. Slide 11: Visualizing Example 2. div id=”wrapper” Advanced CSS Stephen Ireland
12. Slide 12: Visualizing Example 2. Advanced CSS Stephen Ireland
13. Slide 13: Visualizing Example 2. div div div Advanced CSS Stephen Ireland
14. Slide 14: Visualizing Example 2. li h1 ul img li li h2 p h3 li p li div li Advanced CSS Stephen Ireland
15. Slide 15: Example 3. (happycog.com) Advanced CSS Stephen Ireland
16. Slide 16: Visualizing Example 3. Advanced CSS Stephen Ireland
17. Slide 17: Visualizing Example 3. div id=”wrapper” Advanced CSS Stephen Ireland
18. Slide 18: Visualizing Example 3. Advanced CSS Stephen Ireland
19. Slide 19: Visualizing Example 3. div div div div Advanced CSS Stephen Ireland
20. Slide 20: Visualizing Example 3. Advanced CSS Stephen Ireland
21. Slide 21: Visualizing Example 3. h1 ul h2 h2 h2 img img img p p p h2 h2 p h3 p Advanced CSS Stephen Ireland
22. Slide 22: It’s a balance Design vs’ code • Layout philosophy - consider users first, so be aware of conventions. • Less is more - when it comes to markup. Don’t add extra tags to create space or for no reason. • If you plan your designs carefully you will make the code easier to write. Structure your HTML page before you start styling them with CSS. Advanced CSS Stephen Ireland
23. Slide 23: Practical: Take 3 websites • Capture a screenshot of each design (use Grab from the Applications folder on your Mac) • Consider the HTML markup needed to create each design. • Bring the screenshot into a graphics application (Photoshop, Illustrator or InDesign) or print onto paper. • Sketch over the HTML markup you think is required to be able to achieve that web page design. • Use Dreamweaver to write the markup you decide upon and save it for reference - I want to see it! Advanced CSS Stephen Ireland