Chapter 5: Creating Web Layouts
In This Chapter
Discovering the benefits of standards-compliant, accessible layouts
Understanding the difference between layouts using tables and layers
Finding out how to create a simple layers-only layout
Creating tables-based layouts for HTML e-mails
Finding and using free online layers-based layouts
n this chapter, you start by finding out about the benefits of creating
standards-compliant, accessible layouts and get a primer on how to suc-
cessfully work with layers. You discover how to create a simple CSS-styled,
layers-based layout on your own, and how to use the old-school HTML
tables-based layout in case any of your clients ask you to create an HTML
e-mail or HTML newsletter for them. At the end of the chapter, you find a
helpful list of resources for finding excellent, free CSS layers-based layouts
on the Web.
Creating Standards-Compliant,
Accessible Layouts
The World Wide Web Consortium ( is an inter-
national vendor-neutral organization that defines stan-
dards on the Web to improve Web accessibility and
hardware/software interoperability. By following the
recommendations of the W3C, designers, program-
mers, and Web developers can design and build
interoperable Web sites that look great, are coded
semantically, and function efficiently. Thus, to build
a standards-compliant Web site means to use the
recommended standards and guidelines put forth by
the W3C.
18_417966-bk03ch05.qxp 3/25/09 10:37 PM Page 333
Creating Standards-Compliant, Accessible Layouts
What, then, is semantic HTML? Simply put, it is the use of HTML tags and
coding that match either what the content is, like using
<p> tags for para-
graph text, or what the content is for, like using the
<label> tag for form
controls such as text fields and radio buttons, which don’t have implicit
labels. In other words, by following a few simple rules of the HTML road,
you can quickly be on your way to developing sites that make everyone
By the way, that “everyone” includes making your pages accessible to the
widest-possible human and nonhuman audience. Think of accessibility as a
fancy way of saying that you can make code enhancements to your Web site
that improve how visitors with disabilities and search engine robots/spiders
access the information on your site’s pages. Common coding enhancements
include adding footer links, a site map page, alternate text for images, page
titles, meta tags, object labels, titles and targets for links, link tags to the
home and site map pages in the header, access and tab index keys, and form
input labels.
In addition to semantic coding, standards compliance also means exclu-
sively (or nearly exclusively!) using layers-based layouts, which is another
great way of making your pages accessible to the widest possible audience.
Remember, you have no control over what computer and browsing tools
your target audience will be using to access your Web site. As illustrated in
Figure 5-1, those tools will likely include all the different browsers and
browser versions on both Mac and PC, handheld devices like cell phones
and BlackBerrys, speech synthesizers, video game consoles, and Web spi-
ders or robots, to name a few.
Sadly, though standards compliance has been a hot issue in the Web design
world for the last five-plus years, most sites today barely comply with Web
standards, especially the older sites that were built using tables-based lay-
outs and sites that are built by the less informed and nondesigners.
As a designer today, you can help make the future of the WWW a better
place by following the HTML standards recommended by the W3C when
building any new site or redesigning an existing site. Working with layers fits
right into the overall mission of standards by allowing designers to pre-
cisely position and style content using CSS instead of HTML, which means
that code is lighter, pages load faster, pages are easier to maintain, and
more visitors (whether they’re humans using a browser or other device or
nonhumans such as search engine robots) can access that content.
18_417966-bk03ch05.qxp 3/25/09 10:37 PM Page 334
Working With Layers
Figure 5-1: Web visitors will likely use a variety of tools to access your Web site.
Working with Layers
If you are brand new to the world of Web design, finding out how to build
layers-based layouts from the start will be easy enough to do. However, if
you have been doing a bit of Web design on your own and have been work-
ing with tables-based layouts but are now ready to discover how to work
with layers, you’ll probably need to unlearn a few habits you might have
developed from working with tables.
Book III
Chapter 5
Creating Web
18_417966-bk03ch05.qxp 3/25/09 10:37 PM Page 335

Get Web Design All-in-One for Dummies® now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.