Web page regions
This lesson’s goals
By the end of this lesson, you should:
- Know what Web page regions are.
- Know what Webers typically put in each region.
A region is a visual chunk of a Web page. It contains one or more elements. Region are usually visually distinct from other regions on the page.
Common regions
Web pages are often divided into the following regions:
Figure 1. Regions
Different things are put in different regions.
- The top region is often used for site branding (logo and site name). There might be a horizontal nav bar. The top region is often called the header.
- The left region usually shows a vertical nav bar. The region is also called the left sidebar.
- The right region might show ads, or more navigation. The right region is also known as the right sidebar.
- The bottom region might have copyright information, and another nav bar. The region is often called the footer.
- The main content of a page usually goes in the center region.
Not all sites are like this. CoreDogs isn’t, for example. CoreDogs is like this:
Figure 2. Regions in CoreDogs
But the regions in Figure 1 are common.
Here’s a layout that uses three regions.
Figure 3. Regions
The top region has the logo, the site name, and a nav bar. The center region has a page header and content. The bottom region has a nav bar. The left and right regions are not used.
Exercise: Finding regions
Web sites use some common layout patterns. Find at least two examples of each of the following. Enter the URLs in the solution area.
Five regions
No right region
No left region
No right or left regions
Put the URLs below, like this:
Five regions:
URL 1
URL 2
(Log in to enter your solution to this exercise.)
Summary
- Web page regions are visual areas on a Web page, like top, left, and center.
- Regions have common uses. For example, left regions are often used for nav bars.
What now?
Here’s a layout again:
Figure 3 (again). Regions
To create this, you need to set the spacing around regions. Let’s see how you do that.