Web Design All-in-One for Dummies®

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

I

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 (W3.org) 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

334

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

happy.

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

335

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

Layouts

18_417966-bk03ch05.qxp 3/25/09 10:37 PM Page 335