Web page layout

See more about:

You know how to make complex Web pages. You can add text, images, links, tables, nav bars, and so on.

This chapter is about how you group those elements together, to create page layouts.

Most Web pages in a site have the same visual structure, like this:

Page layout

Figure 1. Page layout

Good layouts help users.

  • Layouts group similar elements, like nav buttons. This helps people quickly find what they’re looking for.
  • When the same layout is used across a site, people can predict where things will be. When a user looks at a new page for the first time, s/he knows where the “Add comment” link is.

Layouts also help site owners.

  • Layouts draw attention to things site owners want users to know about, like today’s special deals.
  • Layouts help with branding. For example, layouts help you put logos in the right place.

You create layouts with HTML and CSS, sometimes with a little help from JavaScript. This chapter explains how you do that.

Some advice: use a layout created by a professional Web designer, rather than build your own from scratch. Still, you need to know how layout works, so you can make existing layouts do what you want.


How to...