Chapter 4: The division of space
The illustrator Alex Dukal has a site that is coherent, meaningful and functional. Every Web page needs an underlying structure, the division of space and use of forms called architecture.
CSS has the same advantages for dividing your space as it does for controlling text: The format is separated from the content. In the future this will become more and more important as the same information is sent to a variety of devices, such as mobile phones. Web pages can detect the device and use an appropriate stylesheet.
Our basic space is the browser window. We want to fit our pages into the window so that we make maximum use of the space while minimizing overflow that requires scrolling.
The browser window presents special challenges for the designer because:
- The window’s shape and size depends on the screen dimensions for its basic shape, and screens come in several shapes, sizes and resolutions.
- The browser window also can be resized by the visitor to your site.
For these two reasons, deciding how to divide your space first requires that you define that space according to some logical process.
We also want to divide the space in a way that will be:
- meaningful, showing the hierarchy of information,
- coherent, presenting information in a unified manner,
- and functional, aiding the reader in navigating the information.
To do this, we will create a series of boxes using CSS, the we will position those boxes into a coherent whole.
Before you proceed:
- read the section from W3Schools on the CSS box model. We will review it over the next few pages. The box model can be confusing, so make an effort to understand how it works so that you can attain precision in designing your web pages.
- Chapter 6 and Chapter 7 in The Web Style Guide provide an excellent discussion of web-page design and its special challenges. Read those chapters carefully.
The student who completes this chapter should be able to:
- Discuss page structure as it applies to the typical web page.
- Describe the four functional regions that make up the typical web page and the role each plays.
- Explain the CSS box model.
- Define architecture as it applies to web pages and explain the three characteristics of good page architecture.
- Explain the concepts of consistency and contrast in page design.
- Discuss Gestalt principles as they apply to design.
- Describe what goes in the header and footer of the page.
- Define grids and templates and discuss their use.
- Evaluate CSS code for correct syntax and punctuation.