11 Learning Page Layout Basics

Don't make me think! —Steve Krug (Krug's First Law of Usability)

The first half of this book served to lay down a solid foundation for creating web pages. When you got past the basics of HTML and CSS, you learned about text tags, fonts, colors, CSS classes, the box model, floating and positioning elements, and images and other media. So congratulations are in order: You've graduated from being able merely to build web pages to being able to design them.

Alas, you'll have little time to bask in your newfound glory, because this chapter dives right into the next stage of web design. Here, you take a step back from the "trees" of HTML tags and CSS properties to examine the "forest" of page layout. This refers to the overall structure and organization of a web page, and if that sounds trivial or unimportant, consider this: Every single person who visits your page will, consciously or not, be asking a bunch of questions. What is the page about? Am I interested? Does this page have the information I'm looking for? If so, where can I find it?

The Holy-Grail Layout

Understanding Web Page Layout Methods

Learning the HTML5 Semantic Page Elements

<header>

<nav>

<main>

<article>

<section>

<aside>

<footer>

The Holy-Grail Layout, Revisited

Creating Page Layouts with Floats

Lesson 11.1: Creating the Holy Grail Layout with Floats

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

Creating Page Layouts with Inline Blocks

Lesson 11.2: Creating the Holy-Grail Layout with Inline Blocks

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

Summary