HTML and CSS Reference
In-Depth Information
Figure 5.27
This page layout
uses images and
columns of varied
widths
This is the most interesting page layout of the three. Notice how images and tables
make the same content more appealing. Try using this concept when designing your
pages. In Chapters 6 and 7 you'll learn how to use CSS to configure Web pages with
multiple columns.
Often the page layout (sometimes called a storyboard) for the home page is different
from the page layout used for the content pages. Even when this is the case, a consistent
logo and color scheme will produce a more cohesive Web site. Using style sheets to cre-
ate interesting page layouts can keep visitors engaged in your Web site. Web authoring
tools such as Microsoft Expression Web and Adobe Dreamweaver offer templates and
example sites to assist you with layout ideas.
Now that you have been introduced to Web page design best practices and page layout, it's
time to consider three popular techniques of Web page layout design: ice, jello, and liquid.
The
ice design
technique is sometimes referred to as a solid or fixed design. The page
hugs the left margin and generally either CSS is used to configure a fixed-width block-
level element or an XHTML table (see Chapter 8) is used to format the page. A CSS
style rule is shown below that configures an id named
wrapper
in this manner.
#wrapper { width: 700px; }
Due to the fixed width, the designer has much control over the layout and formatting—
configuring the page to look best at a certain screen resolution (often 1024
768) and
degrade gracefully when other screen resolutions are used. The right-hand side of the
browser window will often contain much empty space—especially at higher screen
resolutions.
×
The Energy Star site (
http://www.energystar.gov),
shown in Figure 5.28, is an example
of ice design. This particular page is formatted with a fixed width. Other sites that cur-
rently use this technique include
http://www.cabelas.com
and
http://www.league.org.
Search WWH ::
Custom Search