Web Development and Design Foundations with XHTML, 5th Edition

(Steven Felgate) #1
5.5 Page Layout Design Techniques^191

window is used to display it. This type of design can be created with CSS or with
XHTML using a table with width set to 100 percent (see Chapter 8). Using CSS instead
of a table to configure Web page layout has a number of advantages, including smaller
Web page document file sizes, quicker loading pages, and more accessible pages that are
easier for screen readers to access. Figure 5.30 shows a page from the State of Illinois
site at http://www.illinois.gov/tech/. Other sites currently using this technique include
http://www.amazon.com and http://moodle.org.

Figure 5.30
This page uses
liquid design to
adjust content to fill
the browser window


Sites designed using ice, jello, and liquid techniques can be found throughout the Web.
Ice and jello designs using a fixed-width layout provide the Web developer the most
control over the page configuration but result in pages with large empty areas when
viewed at higher screen resolutions.
Figure 5.31 shows the National Park Service (http://nps.gov) site viewed using
1280 ×1024 screen resolution. Note how more than one-third of the browser window is
empty. Liquid design avoids this awkwardness and takes advantage of the entire
browser window.

Figure 5.31
At 1280× 1024
resolution the right
side of this page is
mostly empty

Free download pdf