Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Examples for Chapter 10

Visual Design for Usability

Figures 10.1 and 10.2

The stylesheets for these two versions of this page are embedded in the head of each XHTML document. Both use the same images, which are included in the zip archive.

Download the source for figures 10.1 and 10.2. Zip archive, 96kB.

View the pages in the browser. Note that the links do not point to any real pages, and that Figure 10.2 is intended to be an example of a design that is not usable.

  1. Figure 10.1 opens a new window.
  2. Figure 10.2 opens a new window.

Figure 10.5

In case you haven't read this chapter yet, we would like to emphasize that this is intended to be horrible. As some of you may recognize, it is a pastiche of a design style that has been popular on MySpace. In keeping with the general tone of the example, the stylesheet (embedded in the XHTML document) is something of a mess too.

Download the source for Figure 10.5. Zip archive, 776kB.

View Figure 10.5 opens a new window in the browser. Note that the links do not point to any real pages.

Single-Column Layouts

You can use the following CSS fragments to centre a single column, see pp571–572.

Centring the body

body {
    width: 50%;
    max-width: 40em;
    margin: 0 auto;
}

Centring a div within the body

#content {
    background-color: #FCE5D2;
    width: 50%;
    max-width: 40em;
    padding: 1em 2em;
    margin: 0 auto;
}
body {
    margin: 0;
    background-color: #B6D6ED;
}

Two-Column Layouts

For these examples of the techniques described on pages 576–579, we have added borders and background colours to the divs, to help you see what is happening. We have also added display: inline to floated elements, to work round IE6’s problems with floated elements. Try making your browser window very wide or very narrow, and change the font size to see the effects on such layouts.

Download the source for two-column layouts. Zip archive, 8kB.

View the pages in a browser:

  1. Two columns, absolutely positioned divs opens a new window.
  2. Two columns, one fixed-width, absolutely positioned divs opens a new window.
  3. Two columns, using a floated div for the left opens a new window.
  4. Two columns, using multiple left-floated elements opens a new window.

Colour and Tone

Download all the image files for colour and tone. Zip archive, 2.5MB.

Figure 10.20

Figure 10.20 Colours Figure 10.20 Greys

The range of colours and the range of greyscale tones in these images contain no exact duplicates. How many different colours and tones can you readily distinguish?

Figures 10.22 and 10.23

Figure 10.22

If you have a suitable image manipulation program, experiment with altering the colours and the sizes of the squares in these two Figures to see whether the effects change. It's necessary that the inner frame shape in Figure 10.23 (currently bright red) is always the same colour on each of the three different backgrounds.

Figure 10 23

Figure 10.24

Figure 10 24

You should be able to just see the very lowest contrast text in this original file.

Typography – Marginal Headings

By altering the values used for the margins, in conjunction with padding on the body, you can create headings similar to those in Figure 10.28.

h1 {
    font-weight: bold;
    font-size: 220%;
    line-height: 115%;
    margin: 3em 0 -2.2em -6.5em;
    width: 6em;
    color: white;
}

Visual Hierarchy (Figure 10.30)

Download the source for Figure 10.30. Zip archive, 8kB.

View the examples in the browser:

  1. First hierarchy example opens a new window.
  2. Second hierarchy example opens a new window.
  3. Third hierarchy example opens a new window.
  4. Fourth hierarchy example opens a new window.

GIF Type Heading

Try viewing this GIF type heading example opens a new window with and without CSS turned on in your browser.

#head {
    background-image: url(heading.gif);
    width: 191px;
    height: 26px;
}