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