Web design in a nutshell, 3rd edition

www.it-ebooks.info


www.it-ebooks.info


WEB DESIGN
IN A NUTSHELL

www.it-ebooks.info


Other web design resources from O’Reilly
Related titles

oreilly.com

Head Rush Ajax
Ajax Hacks™
Learning Web Design
HTML and XHTML
Pocket Reference
Creating Web Sites: The
Missing Manual
Cascading Style Sheets:
The Definitive Guide

CSS Pocket Reference
Head First HTML with
CSS and XHTML
CSS Cookbook™

Dreamweaver 8: The
Missing Manual

oreilly.com is more than a complete catalog of O’Reilly
books. You’ll also find links to news, events, articles,
weblogs, sample chapters, and code examples.
oreillynet.com is the essential portal for developers interested in open and emerging technologies, including new
platforms, programming languages, and operating
systems.

Conferences

O’Reilly brings diverse innovators together to nurture the
ideas that spark revolutionary industries. We specialize in
documenting the latest tools and systems, translating the
innovator’s knowledge into useful skills for those in the
trenches. Visit conferences.oreilly.com for our upcoming
events.
Safari Bookshelf (safari.oreilly.com) is the premier online
reference library for programmers and IT professionals.
Conduct searches across more than 1,000 books. Subscribers can zero in on answers to time-critical questions
in a matter of seconds. Read the books on your Bookshelf from cover to cover or simply flip to the page you
need. Try it today for free.

www.it-ebooks.info


WEB DESIGN
IN A NUTSHELL
Third Edition

Jennifer Niederst Robbins

Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo

www.it-ebooks.info


Web Design in a Nutshell, Third Edition
by Jennifer Niederst Robbins
Copyright © 2006, 2001, 1999 O’Reilly Media, Inc. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online
editions are also available for most titles (safari.oreilly.com). For more information, contact
our corporate/institutional sales department: (800) 998-9938 or

Editor: Steve Weiss
Developmental Editor: Linda Laflamme
Technical Editors: Tantek Çelik and
Molly E. Holzschlag

Production Editor: Mary Brady
Copyeditor: Linley Dolby

Proofreader: Sada Preisch
Indexer: Lucie Haskins
Cover Designer: Edie Freedman
Interior Designer: David Futato
Cover Illustrator: Lorrie LeJeune

Illustrator: Christopher Reilley

Printing History:
January 1999:
September 2001:
February 2006:

First Edition.
Second Edition.
Third Edition.

Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered
trademarks of O’Reilly Media, Inc. The In a Nutshell series designations,Web Design in a
Nutshell, the image of a least weasel, and related trade dress are trademarks of O’Reilly
Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in this book, and O’Reilly Media,
Inc. was aware of a trademark claim, the designations have been printed in caps or initial
caps.
While every precaution has been taken in the preparation of this book, the publisher and
author assume no responsibility for errors or omissions, or for damages resulting from the use
of the information contained herein.

This book uses RepKover™, a durable and flexible lay-flat binding.
ISBN-10: 0-596-00987-9
ISBN-13: 978-0-596-00987-8
[M]

[9/06]

www.it-ebooks.info


Chapter 1

Table of Contents

Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Contributors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Technical Reviewers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi

Part I. The Web Environment
1. Web Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
What Are Standards?
Current Web Standards
Standards-Driven Design
For Further Reading

3
6
9
11

2. Designing for a Variety of Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Browser History
Browser Roll-Call
Gathering Usage Statistics
Learning from Browser Statistics
Dealing with Browser Differences

Know Your Audience
Test!

12
14
19
20
22
25
25

v
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006
O’Reilly & Associates, Inc. All rights reserved.


3. Designing for a Variety of Displays . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Designing for Unknown Monitor Resolutions
Fixed Versus Liquid Web Pages
Designing “Above the Fold”
Mobile Devices

28
30
37
37

4. A Beginner’s Guide to the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Servers 101
Unix Directory Structures
File Naming Conventions
Uploading Documents (FTP)
File (MIME) Types

42
46
50
50
53

5. Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Types of Disabilities
Overview of Assistive Technology
Who Is Responsible for Accessibility?
Web Content Accessibility Guidelines
Web Content Accessibility Guidelines 2.0 (WCAG 2.0)
Standards Variations and Section 508
Web Accessibility Techniques
Testing for Accessibility

56
57
59
60
64
64
65
68

6. Internationalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Character Sets and Encoding
Character References
Language Features
Style Sheets Language Features
For Further Reading

73
78
80
84
85

Part II. The Structural Layer: XML and (X)HTML
7. Introduction to XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
XML Basics
How It Works
XML Document Syntax
Well-Formed XML
Document Type Definition (DTD)

vi |

Table of Contents
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006
O’Reilly & Associates, Inc. All rights reserved.

90
91
93
96
97


XML Namespaces
XML on the Web
Web-Related XML Applications
Where to Learn More

103
104
105
112

8. HTML and XHTML Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
The Role of HTML
Markup Basics
Introduction to XHTML
Which Standard Is Right for You?
Well-Formed XHTML
Web Authoring Tools
Good Authoring Practices

114
115
119
122

123
126
128

9. Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Minimal Document Structure
Document Type Declaration
The Root Element
The Document Header
The Document Body

130
132
135
136
142

10. Text Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Choosing Text Elements
The Building Blocks of Content
Inline Elements
Deleted and Inserted Text
Generic Elements (div and span)
Lists
Presentational Elements
Character Entity References

145
146
149

152
153
156
161
167

11. Creating Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Simple Hypertext Links
Linking Within a Document
Targeting Windows
Alternative Protocols
Linking Documents with link

169
171
173
173
175

12. Images and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Inline Images
Image Maps

178
186

Table of Contents |
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006

O’Reilly & Associates, Inc. All rights reserved.

vii


Embedded Media
Java Applets
Inline (Floating) Frames

192
201
203

13. Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Table Uses
Basic Table Structure
Row Groups
Columns and Column Groups
Table Presentation
Accessible Tables
Responsible Layout Tables

206
207
213
214
216
220
226

14. Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Introduction to Frames
Basic Frameset Structure
Frame Function and Appearance
Targeting Frames
Frame Design Tips and Tricks

232
234
239
241
244

15. Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
The Basic Form Element
Form Controls
Accessibility Features
disabled and readonly
Affecting Form Appearance

248
250
263
267
267

Part III. The Presentation Layer: Cascading Style Sheets
16. Cascading Style Sheets Fundamentals . . . . . . . . . . . . . . . . . . . . . . . 273
CSS in a Nutshell
The Benefits of CSS

How CSS Works
Rule Syntax
Adding Styles to a Document
Key Concepts
Specifying Values
Browser Support
For Further Reading

viii |

Table of Contents
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006
O’Reilly & Associates, Inc. All rights reserved.

273
274
275
275
278
283
291
293
294


17. Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Type (Element) Selector
Contextual Selectors

Class and ID Selectors
Attribute Selectors
Pseudoselectors

297
298
299
301
302

18. Font and Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Typography on the Web
Font Family
Font Size
Other Font Settings
Text Transformation (Capitalization)
Text Decoration
Line Height
Text Alignment Properties
Text Spacing
Text Direction

307
310
312
318
322
323
325
327

332
335

19. Basic Box Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
The Box Model, Revisited
Width and Height
Margins
Borders
Padding

338
341
344
347
352

20. Color and Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Foreground Color
Background Color
Background Images

355
357
358

21. Floating and Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Normal Flow
Floating
Positioning Basics
Absolute Positioning

Fixed Positioning
Relative Positioning

368
369
375
385
389
390

Table of Contents |
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006
O’Reilly & Associates, Inc. All rights reserved.

ix


22. CSS for Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
The Essence of Tables
Styling Tables
Borders
Table Layout (Width and Height)
Table Display Values

392
396
398
401

403

23. Lists and Generated Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
CSS for Lists
Generated Content

406
412

24. CSS Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Centering a Page
Two-Column Layouts
Three-Column Layouts
Boxes with Rounded Corners
Image Replacement
CSS Rollovers
List-Based Navigation Bars
CSS Techniques Resources

419
421
424
432
436
440
443
446

25. Managing Browser Bugs: Workarounds,Hacks,and Filters . . . . . . 448
Working with “Troubled” Browsers

The Browsers
Hack and Workaround Management 101

448
449
459

Part IV. The Behavioral Layer: JavaScript and the DOM
26. Introduction to JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
A Little Background
Using JavaScript
JavaScript Syntax
Event Handling
The Browser Object
Where to Learn More

465
466
468
484
486
487

27. DOM Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488
A Sordid Past
Out of the Dark Ages
The DOM

x

|

Table of Contents
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006
O’Reilly & Associates, Inc. All rights reserved.

488
489
489


Manipulating Documents with the DOM
Working with Style
DOM Scripting in Action
Supplement: Getting Started with Ajax

491
501
502
507

Part V. Web Graphics
28. Web Graphics Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
Web Graphic File Formats
Image Resolution
Color on the Web
Web Graphics Production Tips

515
517
519
524

29. GIF Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529
8-Bit Indexed Color
LZW Compression
Interlacing
Transparency
Minimizing GIF File Sizes
Designing GIFs with the Web Palette

530
531
533
534
536
541

30. JPEG Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544
24-Bit Color
JPEG Compression
Progressive JPEGs
Creating JPEGs
Minimizing JPEG File Size

544
545
547

548
548

31. PNG Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
When to Use PNGs
PNG Features
Platform/Browser Support
Creating PNG Files
PNG Optimization Strategies
For Further Reading

552
554
558
559
561
563

32. Animated GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564
How They Work
Using Animated GIFs

564
565

Table of Contents |
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006
O’Reilly & Associates, Inc. All rights reserved.

xi


Tools
Creating Animated GIFs
Optimizing Animated GIFs

565
566
570

Part VI. Media
33. Audio on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Basic Digital Audio Concepts
Using Existing Audio
Preparing Your Own Audio
Streaming Audio
Audio Formats
Choosing an Audio Format
Adding Audio to a Web Page

575
577
578
581
583
590
590

34. Video on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
Basic Digital Video Concepts
Compression
Video File Formats
Adding Video to an HTML Document

595
596
598
603

35. The Flash Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609
Using Flash on Web Pages
Creating Flash Movies
ActionScript
Adding Flash to a Web Page
Integrating Flash with Other Technologies
The Flash Player
Flash Resources

610
612
615
616
622
623
625

36. Printing from the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626
Browser Print Mechanisms

Cascading Style Sheets for Print
Portable Document Format (PDF)
Flash Printing

xii

|

Table of Contents
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006
O’Reilly & Associates, Inc. All rights reserved.

626
627
634
637


Part VII. Appendixes
A. HTML Elements and Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641
B. CSS 2.1 Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684
C. Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 722
D. Specifying Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733
E. Microformats: Extending (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 742
Glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 747
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757

Table of Contents |

This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006
O’Reilly & Associates, Inc. All rights reserved.

xiii


www.it-ebooks.info


Chapter 2

Foreword

I recall sitting at my desk many years ago, struggling with a piece of HTML
markup, when someone walked by and dropped off a floppy disk. Written in
block letters across the label was “Netscape .9b”—a pre-release beta version of
what would soon become the most widely used browser of that time. I installed it
and clicked around my company’s web site, and I remember thinking to myself,
“Huh. My job just completely changed.”
Up to that point in the nascent history of the World Wide Web, there had really
been only one browser to worry about. Nearly everyone used Mosaic, and as long
as my pages were also functional in a text-only browser like Lynx, I could safely
forget about that aspect of web design. But suddenly there was competition. And
with competition came new concerns about rendering, feature support, and bugs.
That would prove to be one of innumerable watershed events in more than a
decade of growth and evolution of the Web as a world-changing technological
platform. Soon after Netscape shipped its browser, my job would completely
change over and over again. First came fonts and colors; then frames, JavaScript,

database-driven dynamic web applications, XML, Cascading Style Sheets, Flash,
semantic markup—and all of those innovations have iterated through countless
new versions. If there’s one thing that is certain in the life of a web designer, it’s
that every day something you thought you knew will change. And then change
again.
Yet in any journey—whether literal or metaphorical—it pays to occasionally find
a vantage point and take stock of where you’ve been and how far you have to go.
We’ve come a long way on the Web, but we also have so much more to learn.
The earliest days of the Web were the domain of the webmaster. At that time, the
Web was viewed as another service provided as technical infrastructure—much
like the email server or firewall. The webmaster’s duties included maintaining the
HTTP server, keeping things secure, monitoring bandwidth usage, and—oh,
yeah—creating the HTML pages for this new service. Web design back then was

xv
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006 O’Reilly
& Associates, Inc. All rights reserved.


simply the output of a web server. And the IT department found itself in the position of building pages and even occasionally using Photoshop. Those were crazy
times.
By the mid ’90s, the Web had moved from IT to marketing. Every company
needed a web site if they expected to survive, and there was a mad scramble to
develop an “interactive strategy.” This was the era of the transitional web
designer—when people with experience in more traditional media design came to
the Web and tried to bend it to fit. No control of typography? Build the whole
page as an image. Page layout not up to our standards? We’ll hack on tables and
invisible GIFs until things look exactly like they should. The Web didn’t respond

very well to this onslaught. The cornerstones of digital design—usability, content
reuse, accessibility—buckled under the hubris of graphic artists.
But today holds both tremendous opportunity and significant trepidation for
those who call themselves web designers. The legacy of the so-called “Browser
Wars” is behind us; we have a strong and stable platform for building with
increasing sophistication. A foundation of accepted and well-implemented
industry standards offers a constancy we once could only dream of. But at the
same time, the Web has factions of innovation racing off in countless directions.
Good designers now worry as much about semantics, device-agnosticism, and
Ajax-style interactions as they do about color, typography, and layout. It is an
understandably intimidating time.
The weight of this book in your hands is a testimony to that complexity. And if it
seems daunting, at least take comfort in the fact that the author could not
possibly be a more capable guide. Jennifer Robbins has been designing web sites
longer than anyone else I know. For years she has been the one we’ve all turned to
for reassurance and clarity as our industry propels itself into the future.
There is nobody I would trust more than Jennifer to show us where we’ve been,
and where we’re heading next. You should, too.
—Jeffrey Veen
December 2005, San Francisco

xvi |

Foreword
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006 O’Reilly
& Associates, Inc. All rights reserved.

Chapter 3

Contributors

Tantek Çelik
Tantek Çelik contributed Appendix E, Microformats: Extending (X)HTML. He is
also a Lead Technical Editor for this book. His bio is listed on the Technical
Reviewers page.

Derek Featherstone
Derek is a well-known instructor, speaker, and developer with expertise in web
accessibility consulting and training. He advises many government agencies, educational institutions, and private sector companies, providing them with expert
accessibility testing, and review and recommendations for improving the accessibility of their web sites to all people. As a member of the Web Standards Project
(webstandards.org), Derek serves on two task forces: Accessibility/Assistive Devices
and DOM Scripting. He is a dedicated advocate for standards that ensure simple,
affordable access to web technologies for all. Derek wrote Chapter 5, Accessibility.

Aaron Gustafson
Aaron Gustafson has been working on the Web since 1996, plying his trade for
many top companies including Delta Airlines, Gartner, IBM, Konica Minolta, and
the U.S. EPA. He is an advocate for web standards and open source languages,
often writing on those topics and more for A List Apart, Digital Web Magazine,
and on his blog, easy-reader.net. When not behind a desk, he can sometimes be
found publicly preaching the web standards gospel alongside Molly E.
Holzschlag. He and his wife, Kelly, reside in Connecticut, where he works as Sr.
Web Designer/Developer for Cronin and Company. Aaron wrote Chapter 25,
Managing Browser Bugs: Workarounds,Hacks,and Filters, Chapter 26, Introduction to JavaScript, and Chapter 27, DOM Scripting.

xvii
This is the Title of the Book, eMatter Edition

www.it-ebooks.info
Copyright © 2006 O’Reilly
& Associates, Inc. All rights reserved.


Todd Marks
Todd Marks is an avid developer, designer, instructor, author, and manager of
information display technologies. In 2002, Todd founded MindGrub Technologies, LLC where he created Flash information display systems for clients such as
Oracle, Zurich, and ARINC. Todd currently works as a Products Manager for the
mediaEdge division of Exceptional Software, where he oversees development of
Media Edge’s training applications. Todd is a Macromedia Certified Developer,
Designer, and Subject Matter Expert and has written and contributed to several
books including Flash MX Video (Peer Information), Beginning Dreamweaver MX
2004 (Wrox), Advanced PHP for Flash MX (Glasshaus), Flash MX Most Wanted
Components (Friends of Ed), and other Dreamweaver and Flash-related titles.
Todd wrote Chapter 35, The Flash Platform.

xviii |

Contributors
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006 O’Reilly
& Associates, Inc. All rights reserved.


Chapter 4

Technical Reviewers

Lead Technical Editors
Tantek Çelik
Tantek Çelik is Chief Technologist at Technorati (www.technorati.com) where he
leads the design and development of new standards and technologies. Prior to
Technorati, he was a veteran representative to the World Wide Web Consortium
(W3C) for Microsoft, where he also helped lead the development of the awardwinning Internet Explorer for Macintosh. As cofounder of the microformats.org
community and the Global Multimedia Protocols Group (gmpg.org), as well as
Steering Committee member of the Web Standards Project (WaSP, www.
webstandards.org) and invited expert to the W3C Cascading Style Sheets working
group, Tantek is dedicated to advancing open standards and simpler data formats
for the Web.

Molly E. Holzschlag
Molly E. Holzschlag is a well-known web standards advocate, instructor, and
author. She is Group Lead for the Web Standards Project (WaSP) and an invited
expert to the GEO working group at the World Wide Web Consortium (W3C).
Among her thirty-plus books is the recent The Zen of CSS Design (PeachPit Press,
coauthored with Dave Shea. The book artfully showcases the most progressive
csszengarden.com designs. A popular and colorful individual, you can catch up
with Molly’s blog at—where else?—molly.com.

Technical Reviewers
The following people also reviewed chapters and contributed their expertise to the
final product: Bill Sanders (Part II and Chapter 35), Aaron Gustafson (Chapters 7
and 24), Jeremy Keith (Chapters 26 and 27), Jason Carlin (Chapters 16 and 24),
Jeffrey Robbins (Chapter 33), and Matthew Klauschie (Chapter 34).
xix
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006 O’Reilly

& Associates, Inc. All rights reserved.


www.it-ebooks.info


Chapter 4

Preface

If you think you can take a web design book written in 2001 and “tweak” it for
release in 2006, guess again. I know...I tried.
In my first draft of the XHTML chapters, I took the content from the last edition
and just added some pointers to Cascading Style Sheet alternatives for font and a
few other elements and attributes. After all (I figured), the (X)HTML Recommendations hadn’t changed since 1999, right?
As it turned out, while I was busy doing things like designing corporate identities
and having babies (just one baby, actually), a major sea change had taken place in
the web design world. My little pointers to CSS alternatives amounted to “bandaids on a gaping wound,” as so aptly noted by Molly Holzschlag in her tech
review of those initial chapters. I had fallen out of step with contemporary web
design, and I had some catching up to do.
I learned that while it was true that the Recommendation was the same, what had
changed was how the professional web design community was using it. Designers
were actually complying with the standards. They were no longer using (X)HTML
as a design tool, but as a means of defining the meaning and structure of content.
Cascading Style Sheets were no longer just something interesting to tinker with,
but rather a reliable method for handling all matters of presentation, from fonts
and colors to the layout of the entire page. That ideal notion of “keeping style
separate from content” that I had been writing about for years had not only
become a possibility, it had become a reality.
I spent the next several months immersing myself in the world of standards-driven

web design: reading every book I could get my hands on, exploring oceans of
online resources, and of course, poring over the details of the W3C (X)HTML and
CSS Recommendations themselves.
As a result, Web Design in a Nutshell has not been tweaked; it has been transformed. The book now opens with an overview of web standards and the

xxi
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006 O’Reilly
& Associates, Inc. All rights reserved.


measurable advantages of designing standards-compliant sites. The (X)HTML
chapters have all been rewritten from scratch, in a way that promotes the proper
semantic use of each element and radically downplays presentational HTML and
how elements are rendered by default in browsers. There are now 10 chapters on
CSS (the prior edition had only one). Two new chapters on JavaScript and the
DOM, written by Aaron Gustafson, treat these topics in a more detailed and
useful manner than the previous editions ever offered.
All other sections of the book have been brought up to date as well, reflecting
some significant advancements (such as approaches to accessibility, support for
the PNG graphic format, and print-specific style sheets, to name a few) as well as
minor shifts (such as the guidelines on web graphics and multimedia production)
that have taken place since the last edition.
The tale of transformation does not end with the book. This author has been
transformed as well. Knowing what I know now, I shudder when I look at that
first draft of the book. I shudder more when I look at my sites with their layers of
nested tables, spacer-GIFs, and meaningless markup. Am I ashamed? Not especially...I was no different from most other web designers in the late ’90s. You have
to learn sometime, and for me, writing this book was my wake-up call.
I suspect that for every new web designer who comes along who has never used a

table for layout, there are many more like me who need to relearn their craft.
That’s to be expected in a medium as new and quickly evolving as the Web. I’ve
written this book to be the definitive resource for designers who are onboard with
standards-driven web design as well as those who are still making the transition.
Now, if you’ll excuse me, I have some sites to redesign.

What’s in the Book
This Nutshell book focuses on frontend matters of web design and development:
markup, style sheets, image production, multimedia, and so on. Ironically, despite
its title, there is little in the way of “design” advice, per se. Rather, it strives to be a
thorough reference for all the technical details and requirements that we face in
our day-to-day work designing and developing web content.
The book is divided into six parts (plus appendixes), each covering a general
subject area.
Part I: The Web Environment
Chapter 1, Web Standards, describes the current approach to web design and
sets the stage for the entire book. It is essential reading. Chapters on
designing for varying browsers and displays provide useful overviews of the
unique challenges web developers face. Chapter 5, Accessibility, and
Chapter 6, Internationalization, both serve as introductions to the ways web
content may be created to reach all users, regardless of ability, browsing
device, or language. Chapter 4, A Beginner’s Guide to the Server, is a primer
on basic server functions, system commands, uploading files, and file types.

xxii |

Preface
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006 O’Reilly

& Associates, Inc. All rights reserved.


Part II: The Structural Layer: XML and (X)HTML
This part of the book is about document markup, commonly referred to as
the structural layer because it provides the foundation upon which presentation (styles) and behaviors (scripting) are applied. I highly recommend
starting with Chapter 7, Introduction to XML, as it covers critical concepts
that guide the way (X)HTML is handled in contemporary web design. Chapters 8 through 15 focus on HTML and XHTML markup, including detailed
descriptions of all the elements and the way they should be used in standards-based web design.
Part III: The Presentation Layer: Cascading Style Sheets
Part III provides a thorough guide to using CSS for controlling the presentation of web content with a focus on visual media. It begins with an overview
of the fundamentals (Chapter 16) and an introduction to CSS selectors
(Chapter 17). Chapters 18 through 23 provide detailed descriptions of all the
visual properties in the CSS 2.1 specification. Finally, examples of how CSS is
used in the real world are provided in CSS Techniques (Chapter 24) and
Managing Browser Bugs: Workarounds, Hacks, and Filters (Chapter 25).
Part IV: The Behavioral Layer: JavaScript and the DOM
Part IV is all about adding interactivity to your pages with JavaScript.
Chapter 26 is an introduction to JavaScript, covering, syntax, control structures, object-orientation, and the whys and hows of unobtrusive scripting.
Chapter 27 introduces the Document Object Model and shows you how to
tap into it to manipulate both content and design. As a supplement to
Chapter 27, we’ve included a brief introduction to Ajax techniques that will
help you on your way to building rich Internet applications.
Part V: Web Graphics
The chapters in Part V contain essential information on working with RGB
color and choosing the appropriate graphic file formats. The chapters dedicated to GIF, JPEG, and PNG graphics offer practical tips for graphic
production and optimization based on the compression schemes used by
each format. The Animated GIFs chapter is a further examination of GIF’s
animation capabilities.
Part VI: Media

Because the Web is not limited to text and images, Part VI is included to
provide a basic introduction to adding audio, video, and Flash movies to web
pages. There is also a chapter on printing from web pages using print-specific
CSS style sheets as well as an introduction to the PDF format for document
distribution.
Appendixes
The Appendixes in this book are sure to get a lot of use. Appendix A is an
alphabetical listing of all elements and attributes in the HTML 4.01 Recommendation, as well as a few nonstandard elements that are well supported
and in common use. Appendix B is an alphabetical listing of all properties
defined in the CSS 2.1 specification. Appendix C lists all the character entities defined in HTML 4.01 and XHTML 1.0 with their numerical references.
Appendix D provides a detailed explanation of the color names and RGB
color values used both in (X)HTML and CSS. Finally, Appendix E, contributed by Tantek Çelik, describes the future of XHTML and Microformats.

Preface
This is the Title of the Book, eMatter Edition
www.it-ebooks.info
Copyright © 2006 O’Reilly
& Associates, Inc. All rights reserved.

| xxiii