1. Build your Vision,
Visualize the Code
Advanced CSS Stephen Ireland

2. What Does it Mean?
Visualize?
<div id=”header”>
<div id= <div id=
”sidebar”> ”content”>
<div id=”footer”>
Advanced CSS Stephen Ireland

3. Example 1. (terralien.com)
Advanced CSS Stephen Ireland

4. Visualizing Example 1.
Advanced CSS Stephen Ireland

5. Visualizing Example 1.
div
id=”wrapper”
Advanced CSS Stephen Ireland

6. Visualizing Example 1.
Advanced CSS Stephen Ireland

7. Visualizing Example 1.
div
div
div div
Advanced CSS Stephen Ireland

8. Visualizing Example 1.
ul
h1
h2
p
h3
h2
p
ul li
li
Advanced CSS Stephen Ireland

9. Example 2. (alpkit.com)
Advanced CSS Stephen Ireland

10. Visualizing Example 2.
Advanced CSS Stephen Ireland

11. Visualizing Example 2.
div
id=”wrapper”
Advanced CSS Stephen Ireland

12. Visualizing Example 2.
Advanced CSS Stephen Ireland

13. Visualizing Example 2.
div
div
div
Advanced CSS Stephen Ireland

14. Visualizing Example 2.
li
h1
ul
img
li
li
h2
p
h3
li
p
li
div li
Advanced CSS Stephen Ireland

15. Example 3. (happycog.com)
Advanced CSS Stephen Ireland

16. Visualizing Example 3.
Advanced CSS Stephen Ireland

17. Visualizing Example 3.
div
id=”wrapper”
Advanced CSS Stephen Ireland

18. Visualizing Example 3.
Advanced CSS Stephen Ireland

19. Visualizing Example 3.
div
div
div div
Advanced CSS Stephen Ireland

20. Visualizing Example 3.
Advanced CSS Stephen Ireland

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