Build your Vision,
Visualize the Code
Advanced CSS Stephen Ireland

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

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

Visualizing Example 1.
Advanced CSS Stephen Ireland

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

Visualizing Example 1.
Advanced CSS Stephen Ireland

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

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

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

Visualizing Example 2.
Advanced CSS Stephen Ireland

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

Visualizing Example 2.
Advanced CSS Stephen Ireland

Visualizing Example 2.
div
div
div
Advanced CSS Stephen Ireland

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

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

Visualizing Example 3.
Advanced CSS Stephen Ireland

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

Visualizing Example 3.
Advanced CSS Stephen Ireland

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

Visualizing Example 3.
Advanced CSS Stephen Ireland

Visualizing Example 3.
h1
ul
h2 h2 h2
img img img
p p p
h2
h2
p
h3
p
Advanced CSS Stephen Ireland

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

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