was completed in 1998, it is a pity that browser manufacturers have not made a better attempt at
imple
menting it.
With careful attention, it is possible to create pages that use CSS for layouts, but older browsers will not
always support these layouts as you would like them to. As a result, some designers will use a combina-
tion of older techniques for page layout and CSS for some of the styling.
Exercises
The answers to all of the exercises are in Appendix A.
1.
In this exercise you create a linked table of contents that will sit at the top of a long document in
an ordered list and link to the headings in the main part of the document.
The XHTML file
exercise1.html
is provided with the download code for this book, ready for
you to create the style sheet. Your style sheet should do the following:
❑ Set the styles of all links including active and visited links
❑ Make the contents of the list bold
❑ Make the background of the list light gray and use padding to ensure the bullet
points show
❑ Make the width of the links box 250 pixels wide
❑ Change the styles of heading bullet points to empty circles
❑ Change the style of link bullet points to squares
Your page should look something like Figure 8-36.
Figure 8-36
321
Chapter 8: More Cascading Style Sheets
59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 321
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
2.
In this exercise, you test your CSS positioning skills. You should create a page that represents
the links to the different sections of the chapter in a very different way. Each of the sections will

you must have a good understanding of the site you want to create before you can start design-
ing it. There are some fundamental questions you need to be asking to make sure you understand
both the aims of the site’s owner and what the audience who come to look at the site will expect
to find; specifically, you need to be sure that you know:
❑ Whom you expect to visit the site
❑ What sort of information you think they would expect to find at your site
59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 323
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
❑ How often you can realistically expect them to visit
❑ What you want your site to do for your visitors
Without being clear on these items you cannot design an effective site. It is worth noting here that the first
three questions are about your visitors and what they want from your site rather than what you want from
your visitors. For example, I might want visitors to come and look at a site every day — but it is important
to consider whether that is a realistic expectation. After all, if they are only likely to visit occasionally that
could have a big impact on the design (and how often various parts of the pages are updated).
The following sections will help you answer these questions before you start working on the site.
Understanding a Site’s Aims
Before you can even start working on a site, you must ensure that you have clearly defined the aims of the
site. It is possible that the site may have several purposes, but by asking some of these questions at the
beginning you will be able to crystallize what you are trying to achieve.
For example, if you are creating a site for a company, you might ask yourself:
❑ Are you dealing with a product or a service?
❑ How often will people require this product or service?
❑ Once they’ve ordered a product or service, are they likely to come back to the site to order again
or find out more information?
❑ Are you trying to promote a product or service to people who will not have heard of it, or trying
to explain more about this particular product or service to people who know what they are after?
❑ What is special about your product or service that differentiates it from the rival?
❑ Are you trying to sell direct from the site, put the visitor in touch with a sales person (create a
sales lead), or tell people where they can get a product or service?

very important to understand your target audience.
Unfortunately, some companies ask designers to push messages that the leadership thinks are most inter-
esting or important instead of putting themselves in the position of their visitors. For example, it is not
uncommon to see company web sites where information for investors, such as quarterly reports or infor-
mation about the board of directors, takes up a primary space on the front page. This can suggest to some
visitors that the site is aimed at the companies’ investors, not its customers, and that it may be more inter-
ested in making money than in its customers interests. As a customer, I don’t want to be reminded about
how much profit a company is making if I’m about to hand over my hard-earned money! Instead, the site
should have a link to the section of the site aimed at the small number of visitors who are investors, and
use the valuable front-page space for links that customers will be interested in.
So you need to ask yourself the following:
❑ Who will be visiting your site? Will your visitors be potential customers (members of the public
or other companies), investors, hobbyists, press and media, or students and researchers?
❑ Why are they coming? Do they want to buy a product or service? Or find where you are located,
your opening hours, or a contact number/e-mail? Do they want to learn a new skill? Find out more
about your company, service, or area of interest? Decide whether you are a good investment?
If you are working on a site for a client, it is good to get the client to agree to the
aims of the site when you have defined them. Many clients can decide they want
extra functionality added during the development of the site, so pinning down the
aims from the start is important. If the client wants to then expand on these aims
you can re-negotiate terms for these extra features (such as extra development time
and extra expenses).
325
Chapter 9: Page Layout
59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 325
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
❑ What is their underlying motivation for coming? Are they coming for entertainment (and there-
fore likely to be browsing), or to get something done such as placing an order or finding out some
information (in which case they may want a quick result). With both this point and the previous
point, you may decide that you expect 50 percent of your visitors to come for one reason, and

This list could include things such as information about products and services the company offers, photos
or examples of work; how these products and services can be attained; contact details; and information
about the company. (Customers often like to know a bit of the background behind small to medium-sized
companies that trade on the Internet; it helps reassure them that it is safe to hand over their money.) Don’t
326
Chapter 9: Page Layout
59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 326
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
forget to drill down further; for example, what information are you going to include about a product or
service? A product could have a photo, description, dimensions, information about how and where it is
made, typical uses for it, and so on. A service might require descriptions of the work involved, how long
it takes to complete, what is required so the service can be performed, who will be performing the service,
and how they are qualified to perform the service.
If you sell something, you should always try to indicate a price — if the price varies (for example, a
roofer might charge different amounts for different types and sizes of roof) adding a price guide for a
product or service results in a higher level of inquiries than a site that gives no indication of price.
You should also look at other sites that address a similar topic — the competition — and look at what
they do and don’t do well and whether these sites meet the needs of the people you expect to visit your
site. One of the key points to think about here is what you can do differently or better — something that
makes you look better than the competition.
Don’t forget that you will want to add things such as your logo or branding to most pages, maybe a search
form, and possibly advertising. You should also remember some boring yet necessary features such as a
copyright notice, terms and conditions, and a privacy policy (the latter is important if you collect infor-
mation about users or use a technology known as cookies for storing information on the user’s computer).
Once you have every possible thing your customers might want to know on your list you can trim your
ideas back to what you are actually going to do for this web site. Remember that unused ideas can always
be used in a future update of the site.
Grouping and Categorization
Now you can start to group together the ideas of what you want to cover. If the site is advertising sev-
eral products or services, these may be placed together in related groups of products or services, which

Creating a Site Map
By now you should be getting a good idea of the sections and pages that are going to make up your site,
so you should start drawing up a site map, which should look something like either a family tree or folder
list in Windows Explorer. It should start with the home page for the site and all of the main categories at
the top of the tree.
If any of the categories contain subcategories or more than one page, these pages should appear as children
of the first page. For example, if one of your main categories is “products” then you might have this split
into several subsections with a page about each item in that category, or you might just have two or three
products to list off that page — and each of those may then have its own page in the position of a grand-
child of the product.
You can see an example of a site map in Figure 9-1; you could draw this either vertically as was done here,
or horizontally (more like a family tree).
Once you have created a site map, you will know the following:
❑ How many pages are on your site
❑ What information will appear on each of those pages
❑ What links will appear on each page (and where those links point to)
Once you have created your site map, it is a good idea to try to look at the things that you initially expected
users to come to the site for, and look at how users would navigate through the site map, step by step, to
get to the information that you think they will need. For example, a company manufacturing specialist car-
penters’ tools might define visitors into two groups:
❑ Trade buyers wanting to:
❑ Browse the list of products that they could stock in their DIY/hardware stores
❑ Find a specific product that a customer is requesting
❑ Contact details for the sales team
❑ Public wanting to:
❑ Browse the list of products that they could find in a DIY/hardware store
❑ Find specific products they need
❑ Know how to contact the company
328
Chapter 9: Page Layout

CUPBOARDS
TABLES
LAMPS
STORAGE
WHERE TO BUY
ABOUT US
CONTACT US
329
Chapter 9: Page Layout
59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 329
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
These elements will reflect the aims of the site. But be warned: Many clients will want to put everything
on every page. You must show them how the organization and planning you have done will lead to a
good design and simple navigation that avoids the need to put everything on each page. (You learn more
about navigation in Chapter 10.) A site that is less cluttered yet easy to navigate is better than a site that
has everything on each page because it is harder to find what you want on a page where there is too much
information.
Page Size (and Screen Resolution)
Now that you know what should go on each page, you are ready to start looking at designing the pages
themselves. In the same way that an artist must decide on the size of canvas before starting to paint, so
you must decide what size of page you are going to use for your site.
Unfortunately, different visitors to your site will have different size monitors working at different resolu-
tions. Therefore, your page will not look the same to everyone who visits your site; you cannot design
something that looks good on your monitor and expect it to look good on someone else’s computer.
Several factors affect how big your “canvas” should be. Consider the following:
❑ Different computers have different screen resolutions (800 × 600 and 1024 × 768 are the most
popular).
❑ Different users have different size monitors (15, 17, 19, 21+ inch monitors).
❑ People often don’t browse with the whole screen showing — they tend to have toolbars and
other applications taking up part of the space.

resolution to get an idea of how different it can look for different users. On a PC you will find this in the
Windows Control Panel under the Displays option; on a Mac, it’s in System Preferences under the
Displays option.
Vertically you should account for the fact that a lot of users will have a menu or taskbar (such as the
taskbar on Windows or the dock on Mac OS X) that will take up part of the screen’s vertical height. You
also have to consider the various toolbars that can appear in a browser window. Therefore, you should
make sure that the key points of a page appear in the top 550 pixels or so of the browser window; you
will sometimes hear this space referred to as being above the fold meaning the space on the screen before
the user has to start scrolling.
Fixed-Width vs. Liquid Designs
Although I said that you should make the content fit within a page that is 980 pixels wide, and that a
user should be able to understand what a page is about from the top 550 pixels of the screen, you may
have noticed that some designs stretch to fit the whole page. This is known as a liquid design. By contrast,
designs that force a page to a certain width or height are known as fixed-width designs.
While you should generally avoid expecting users to scroll horizontally, you can
safely expect them to scroll vertically. Visitors should, however, be able to tell what
the page is about without scrolling, so make sure that the main parts are in view
when the page loads. Generally speaking, you should at least be able to see the
company logo or branding, the main heading for any page, as well as the first few
items of primary navigation.
Month/Year 640 × 480 800 × 600 1024 × 768 1152 × 864 1280 × 1024
Jan 2004 1 percent 37 percent 49 percent 3 percent 6 percent
Jan 2003 2 percent 46 percent 40 percent 3 percent 4 percent
Jan 2002 4 percent 52 percent 34 percent 2 percent 3 percent
Jan 2001 7 percent 54 percent 30 percent 2 percent 2 percent
Jan 2000 11 percent 56 percent 25 percent 2 percent 2 percent
331
Chapter 9: Page Layout
59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 331
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Liquid Design
A liquid design can stretch to fit the page. In order to do so, you specify proportions of a page using per-
centage values. For example, you might decide your page takes up 95 percent of the width of the browser
so that there is always a small gap around the edge. Figure 9-4 shows a page that takes up 95 percent of
the window. If the user increases the size of the browser window, the page increases in size but retains the
border around the outside.
Figure 9-4
333
Chapter 9: Page Layout
59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 333
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Here (
ch09_eg01.html
) you can see how this effect can be created using a
<div>
element:
<body>
<div id=”page”>
<!-- CONTENT OF PAGE GOES HERE -->
</div>
</body>
The style sheet contains a rule for the
<div>
element setting the
width
property to have a value of
95
percent. There are also a few other properties set to show you the containing box and make the
example look a little more attractive:
div.page {

59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 334
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
❑ If the user has a very wide window, lines of text can become very long, and these become hard
to read.
❑ If the user has a very narrow window, words may be squashed too small and you could end up
with just a word or two on each line.
Fixed-Width Design
Fixed-width designs use lengths to indicate the dimensions of the page, such as pixels, ems, and centime-
ters. Fixed-width designs allow designers much greater control over how their pages appear because the
designer knows the size of the canvas; it cannot stretch and shrink as the users resize their windows. Even
though a design might look a slightly different size on different resolution monitors, the proportions of
elements on the page can remain the same. You can see an example of a fixed-width page in Figure 9-5.
The code for this page (
ch9_eg02.html
) follows shortly.
While Figure 9-5 may look similar to Figure 9-4, if you try out the corresponding code that is provided with
the download code for the rest of the book from
www.wrox.com
, you will find that this example does not
stretch to take up more of the browser window, unlike the previous example of a liquid layout.
When the
width
property is used on a block-level element, no matter how big the user’s browser is, the
element (and therefore the layout of the page) remains that size. If the user’s browser is narrower than the
layout specifies, horizontal scrollbars will appear, whereas if the window is wider than the layout specifies
there will be space to the right-hand side of the page or both sides if the box that contains the page is centered.
The value of the
width
attribute is most often given in pixels in a fixed-width design. Here you can see
the element that holds the page carries an

whether the browser is more or less than 800 pixels wide. You might also have noticed that the
margin-
left
and
margin-right
properties have a value of
auto
, which ensures that the page is centered in the
browser window.
Note that fixed-width designs that use pixels look smaller on higher-resolution monitors because when
the same size monitor is set with a higher resolution more pixels are visible on the screen.
When you are using dimensions in pixels that are similar to these (between 700 and 1000 pixels), you
are
confining the use of the site to a browser on a desktop (or laptop) computer. It will not necessarily be
accessible to those with smaller-screened devices such as PDAs or mobile phones. It will probably be too
big for TV set-top boxes, too, because TVs have lower resolutions than computer screens (320 × 240 in the
U.S., if you’re curious).
As with the liquid design, there are both advantages and disadvantages to the fixed-width page
approach.
The advantages are as follows:
❑ Pixel values are accurate at controlling width and positioning of elements.
❑ The designer has far greater control over the appearance and position of items on the page.
❑ The size of an image will always remain the same relative to the page.
❑ You can control the lengths of lines of text regardless of the size of the user’s window.
The disadvantages are as follows:
❑ If a user has font sizes set to a larger value, the text might not fit as intended in the allotted
space.
❑ If users browse at higher resolution than the page was designed for, the page can look smaller
on their screens and can therefore be hard to read.
❑ The design works only on devices that have size and resolution of screens similar to desktop

Chapter 9: Page Layout
59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 337
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Once you have created a wireframe model, you can then go back to the list of target visitors you expect
to visit your site and make sure they can easily find what you think they will come to the site for. You
can see from this simple model where the links go, and you get a good idea of the functionality of the
site without getting distracted by the issues surrounding the look of the page. This is particularly impor-
tant for two reasons:
❑ When you show users and clients a prototype of the fully designed site, they tend to focus on the
visual elements rather than the proposed function. So, a skeletal model ensures that the client
focuses on the function and structure of the content and not its appearance.
❑ If you do need to make changes, you can do so before the design or programming starts, which
can save you from rewriting and/or redesigning much of the site later on.
An important point at this stage in the process is deciding which of these elements is most important
and should go at the top of the page. Chances are that not all of the content of your pages will fit onto
the screen at once — or at least not on all resolutions.
Assuming that for the longer pages users will have to scroll vertically, you will want to make sure that
the most important elements are at the top of the page, and that you can tell what the page is about from
what you can see when the page opens.
The general rule is that the most used functions should always take priority on a site, rather than what
the marketing department wants to push this week or month. It all comes back to designing your site
with your visitors in mind. If you do not keep the visitors happy, they will not make your site a success.
Generally speaking, you want the following items to be visible as the page loads:
❑ Branding
❑ Global navigation (a link to the home page and the main sections of the site — note that the
home page should almost always be the first item of navigation)
❑ Subsection navigation (if you are in one of the subsections of the site, the subsection navigation
should contain links to the sections within that section)
❑ A heading or title for the page (except for the home page which probably does not need one)
❑ Enough of the content that users can tell what the page is about

market, such as religious holidays, New Year’s, Valentine’s Day, Mother’s Day, Father’s Day, start of school
terms, and so on.
Introducing the Style
Now that you have an idea of what the site looks like in terms of text and simple lines, you can start
adding the style or character of the page — playing with colors and fonts, backgrounds and images —
to create a page that’s visually appealing.
Now that you know where each of the elements should appear on the page, this can be a much easier task.
Some designers may have problems with being told that all the elements have already been placed on the
page and that these will take up a certain amount of space. The designer may feel he’s being asked to
color a picture rather than draw one. So you may want to ask the designer to be involved in the wire-
frame as well. Some designers may also find this difficult because it requires a very different approach
than they are used to.
The size and positioning of elements on a page is a valid part of the design process (not only the visual
appearance but also the interface or interaction design — how the site handles). However, the process of
wireframing a design will help the user or client focus on what the site actually does and will help you
finalize the functionality before starting to design the page. You may choose to tell the client that the exact
positions of the elements in the wireframe may change, but that it is an indication of the content that will
appear on those pages.
339
Chapter 9: Page Layout
59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 339
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
If you use a designer to work on web pages, you will often have to strike a balance and sometimes allow
the designer to completely reposition the elements that you have already positioned on each page, as well
as to change the amount of space for items. Just make sure that the necessary items fit in the part of the
page that is viewable when the page loads. You will most likely find your own balance as you work on a
few sites.
What Is Already Done for You?
As with any form of marketing, creating an easily identifiable style will help re-enforce a brand. If a
company has a logo, you should use that logo. If they have company colors, you should feature those

it probably appears on things such as stationery and signs for the company.
340
Chapter 9: Page Layout
59313c09.qxd:WroxPro 3/23/08 11:42 AM Page 340
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.