P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
250 HTML
and Web Design
Secrets
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
250 HTML and
Web Design
Secrets
Molly E. Holzschlag
Wiley Publishing, Inc.
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
Published by
Wiley Publishing, Inc.,
10475 Crosspoint Boulevard,
Indianapolis, IN 46256,
www.wiley.com
Copyright
c
 2004 by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
Manufactured in the United States of America
10987654321
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by
any means, electronic, mechanical, photocopying, recording, scanning, or otherwise, except as permitted
under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written

About the Author
In the world of Web design and development, Molly E. Holzschlag is one of the
most vibrant and influential people around. With over 30 Web development book
titles to her credit, Molly is also a noted columnist, speaker, and educator.
As a Steering Committee Member of the Web Standards Project (WaSP), Molly
works along with a group of other dedicated Web developers and designers to pro-
mote open standards for the Web. She serves as an advisor and spokeswoman for
the World Organization of Webmasters. Molly speaks regularly at conferences in
addition to teaching and developing curriculum for a number of colleges and uni-
versities, including the University of Arizona, University of Phoenix, New School
University, and Pima Community College.
Many recognize Molly from her column, “Integrated Design,” which appeared
in the much-missed Web Techniques Magazine for three years, and from sister
publication Webreview.com, where Molly served as Executive Editor for a year
during the best of the San Francisco dot.com era. Molly has been honored as one
of the Top 25 Most Influential Women on the Web. For more information about
Molly, drop by at www.molly.com/.
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
Credits
Acquisitions Editor
Katie Mohr
Development Editor
Marcia Ellett
Technical Editor
Ethan Marcotte
Production Editor
Pamela Hanley
Copy Editor
TechBooks

File Management with FTP .................................................. 11
Telnet and SSH . . ........................................................... 12
Validation Tools . . ........................................................... 14
PNH Toolbar ............................................................... 16
Sidebar Reference Panels .................................................... 17
Bitmap Image Programs . .................................................... 17
Vector Image Programs . . .................................................... 21
Web Animation Utilities . .................................................... 22
Screen Capture Utilities . .................................................... 24
Rename Utilities . ........................................................... 25
Tag Strippers ............................................................... 26
HTML Tidy ................................................................. 26
Compression Utilities ........................................................ 27
Audio and Video Players . .................................................... 29
Plug-Ins . . . ................................................................. 29
SVG and SMIL Support . .................................................... 30
Software for Security and Safety .............................................. 30
Collaborative Communication Software ....................................... 32
Summary . . ................................................................. 33
Chapter 2: Managing Your Web Project ............................... 35
The Challenge of Web Project Management . . ................................. 36
Toward Consistent Organizational Structure ................................ 36
Creating Industry-Wide Standards for Web Project Management . ............. 37
Fixing Disparities in Problem-solving Approaches . .......................... 37
Selecting the Project Manager . .............................................. 38
Defining the Budget ......................................................... 39
Identifying Goals ........................................................... 39
Determining the Stakeholders . . .............................................. 40
Determining Market Needs .................................................. 41
Identifying Roles and Responsibilities . . ....................................... 41

Considering Frequency of Updates and Redesigns . ............................ 64
Setting Site-Wide Standards . ................................................ 65
Developing a Site-Wide Style Guide . ......................................... 65
Summary ................................................................... 66
Chapter 4: Making Sites Usable and Persuasive ....................... 67
Create Consistent Branding . . ................................................ 68
Determining Primary Navigation ............................................. 69
Secondary Navigation . ...................................................... 71
Grouping Navigation by Like Items . . ......................................... 72
Iconography and Language Use .............................................. 74
Managing External Links .................................................... 77
Direct Access to Site Features ................................................ 81
Placement of Critical Information ............................................. 83
Consistent Placement of Elements . . . ......................................... 84
Drop-Down Menus .......................................................... 84
Pop-Up Windows ............................................................ 85
Consider Tabbed Navigation . ................................................ 87
Provide Orientation . . . ...................................................... 88
Date and Time Formats ...................................................... 89
Cost-Controlled Usability Testing ............................................. 90
Summary ................................................................... 91
Chapter 5: Creating and Managing Fantastic Content ................. 93
Finding Your Voice .......................................................... 94
Clarifying Site Purpose ...................................................... 95
Text and the Computer Screen ............................................... 96
Writing Effective Paragraphs . ................................................ 99
Varying Pace . . ............................................................ 100
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
ࡗ

Manage Character Sets . . ................................................... 125
Author Documents Structurally . ............................................. 127
Use Lists to Enhance Structure and Readability ............................... 128
<em> and <strong> versus <i> and <b> . . . ................................ 130
Know your Document Tree .................................................. 131
Elements, Tags, and Attributes . ............................................. 133
Intrinsic Events . . .......................................................... 134
Special Characters ......................................................... 135
Limit Color Names to Standard Colors . ...................................... 136
Avoid the font Element . . ................................................... 136
Avoid the center Element ................................................... 138
Avoid All Deprecated, Obsolete, and Proprietary Elements and Attributes . ...... 138
Use Elements as They Were Intended . . ...................................... 139
Restrict Use of Tables ....................................................... 140
Restrict Use of Frames . . . ................................................... 141
Validate, Validate, Validate! ................................................. 141
Summary . . ................................................................ 142
Chapter 7: Moving Ahead with XHTML .............................. 143
About XHTML . . . .......................................................... 144
History . ................................................................ 144
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
ࡗ
xii
Contents
ࡗ ࡗࡗ
Goals of XHTML . . . ..................................................... 144
XHTML Versions and DTDs .............................................. 145
So Is XHTML Better? .................................................... 147
Choose a DTD . ............................................................ 147

CSS Borders and Border Styles .............................................. 179
Gaining Space with Padding . ............................................... 181
Understanding Type Sizing Options in CSS . ................................. 182
Type Effects . . . ............................................................ 182
Styling Lists with CSS . ..................................................... 186
Using Lists for Vertical Navigation . . . ........................................ 188
Using Lists for Horizontal Navigation ........................................ 190
Spice Up Forms ............................................................ 191
Add Visual Effects to Data Tables ............................................ 193
Using Background Graphics in CSS . ........................................ 195
Image Replacement Techniques ............................................. 196
CSS-Based Text Mouseovers . ............................................... 198
Text and Image Mouseovers . ............................................... 201
Dynamic CSS Menus . ..................................................... 202
Rounded Tabs . . ............................................................ 205
Sliding Doors . . ............................................................ 205
Cool Rules ................................................................. 207
Summary .................................................................. 207
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
ࡗ
ࡗࡗࡗ
Contents
xiii
Chapter 9: Laying Out Pages with CSS ............................... 209
CSS Layout Basics ......................................................... 210
Two-Column Layout, Positioned Left Navigation .............................. 211
Float-Based Layout ......................................................... 212
Nested Float ............................................................... 214
Three-Column Layout . . . ................................................... 218

Add fieldset and legend to Forms ............................................ 258
Using the label Element with Forms . . . ...................................... 259
Summarize and Caption Data Tables . . . ...................................... 260
Consider Using Skip Links .................................................. 263
Making Frames Accessible .................................................. 265
Testing with Accessibility Validators . . . ...................................... 266
Testing with Lynx .......................................................... 267
Testing with Screen Reader Software . . . ...................................... 267
Summary . . ................................................................ 268
Part III: Designing Sites for Long-Term Success .......... 269
Chapter 11: Sophisticated Visual Design .............................. 271
Visual Design and Site Intent . . ............................................. 272
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
ࡗ
xiv
Contents
ࡗ ࡗࡗ
Defining and Maintaining Your Brand ....................................... 272
GIFs and JPEGs: Still Your Secret Graphic Weapon ........................... 273
Refinding the Lost Promise of PNG . . ........................................ 276
GIF Animation Do’s and Don’ts.............................................. 278
Image Maps: To Use or Not to Use . . . ........................................ 278
Make the Most Out of Text-Based Type ....................................... 279
Combine Graphics and Markup for Effective Typography . . .................... 280
What Is White Space and Why Do I Care? . . . ................................. 280
The Importance of Proximity . ............................................... 282
There’s No Such Thing as Web-Safe Color . . . ................................. 284
Making the Most Out of Web Color . . ........................................ 285
The Symbolic Meaning of Shapes . . . ........................................ 287

Consider Weblog Commenting Systems ...................................... 337
Offer Site Registration . ..................................................... 338
Consider Cookies to Track Usage ............................................ 340
The Power of Polls .......................................................... 341
Add Discussion Groups ..................................................... 343
Use Web-based Chat . . ..................................................... 343
Refresh Your Page Style Regularly . . . ........................................ 346
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
ࡗ
ࡗࡗࡗ
Contents
xv
Style Sheet Switching for Customization ..................................... 347
Add Search Technology . . ................................................... 349
Aggregate Content ......................................................... 349
Summary . . ................................................................ 351
Chapter 14: Improving Site Ranking and Managing .................. 353
About Web Site Marketing .................................................. 354
Now Focus Is on Structure and Content . . . ................................ 354
Avoid Unscrupulous Marketing Techniques ................................ 355
Targeting Keywords for meta Elements . ...................................... 356
Writing Effective meta Descriptions .......................................... 357
Using Targeted Words in Headers ........................................... 358
Using Keywords in Text . . ................................................... 359
Keeping URLs Short and Relevant ........................................... 360
Solicit Reciprocal Links . . ................................................... 361
Consider Affiliate Programs ................................................. 361
Use Opt-In E-mail Newsletters to Drive Traffic ................................ 363
Run Regular and Seasonal Promotions . ...................................... 364