Tài liệu HTML and Web Design Secrets P1 pdf

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

permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the
Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600.
Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing,
Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4447, e-mail:

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or
warranties with respect to the accuracy or completeness of the contents of this work and specifically
disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No
warranty may be created or extended by sales or promotional materials. The advice and strategies contained
herein may not be suitable for every situation. This work is sold with the understanding that the publisher is
not engaged in rendering legal, accounting, or other professional services. If professional assistance is
required, the services of a competent professional person should be sought. Neither the publisher nor the
author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to
in this work as a citation and/or a potential source of further information does not mean that the author or
the publisher endorses the information the organization or Web site may provide or recommendations it may
make. Further, readers should be aware that Internet Web sites listed in this work may have changed or
disappeared between when this work was written and when it is read.
For general information on our other products and services or to obtain technical support, please contact
our Customer Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317) 572-3993 or
fax (317) 572-4002.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not
be available in electronic books.
Library of Congress Cataloging-in-Publication Data
Trademarks: Wiley and related trade dress are registered trademarks of Wiley Publishing, Inc., in the
United States and other countries, and may not be used without written permission. All other trademarks
are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or
vendor mentioned in this book.
eISBN: 0-7645-7708-5
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29

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

Editorial Manager
Mary Beth Wakefield
Vice President and Executive Group
Publisher
Richard Swadley
Vice President and Executive Publisher
Robert Ipsen
Vice President and Publisher
Joseph B. Wikert
Executive Editorial Director
Mary Bednarek
Project Coordinator
TechBooks
Proofreading and Indexing
TechBooks Production Services
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
To Bill Cullifer for his unflagging enthusiasm for the Internet, desire
to uplift and educate, and for his friendship
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
Contents
Acknowledgments ......................................................... xvii
Introduction ................................................................xix
Part I: Tools, Planning, and Content .......................... 1
Chapter 1: Setting up a Master Toolbox .................................3
Web Browsers ................................................................ 5
Choosing a Code Editor . ..................................................... 8

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

Creating a Project Workflow .................................................. 43
Listing Creative Tasks . . . .................................................... 44
Clarifying Technical Tasks ................................................... 44
Defining Administrative Tasks . . .............................................. 44
P1: GIG
WY021-FM WY021-Holzshlag-v2 June 5, 2004 3:29
ࡗ
x
Contents
ࡗ ࡗࡗ
Listing Marketing Tasks ..................................................... 45
Addressing Quality Assurance Concerns ...................................... 45
Setting Milestones .......................................................... 46
Getting Signoff Throughout the Process ....................................... 46
Encouraging Collaboration . . ................................................ 47
Managing Scope Creep ..................................................... 48
Summary ................................................................... 49
Chapter 3: Architecting Your Information ..............................51
What Is Information Architecture? . . . ......................................... 52
Sites Big and Small, New and Old ......................................... 52
Organic Growth and the Web .............................................. 52
Performing a Content Audit . . ................................................ 53
Determining Hierarchies of Content . ......................................... 54
Defining Technical Infrastructure ............................................. 56
Determining Naming Conventions . . ......................................... 57
Site Mapping . . ............................................................. 59
Understanding Wireframing . ................................................ 60
Developing Prototypes . ...................................................... 61
Creating User Pathways ..................................................... 62
Creating Archive Systems .................................................... 63

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
ࡗ

ࡗࡗࡗ
Contents
xi
Removing Extraneous Information ........................................... 102
Using Tables to Organize Data . ............................................. 102
Using Lists to Simplify Ideas . . . ............................................. 104
Using Headers Meaningfully . . ............................................. 105
Applying Style Standards ................................................... 106
Avoiding Problem Grammar ................................................. 107
Understand Copyright! . . ................................................... 107
Extending Copyright with Creative Commons ................................ 108
Protecting Intellectual Property with Trademarks .............................. 109
The Role of Patents on the Web . ............................................. 110
What Is Digital Rights Management? . . ...................................... 110
Exploring Content Management Systems .................................... 111
Summary . . ................................................................ 112
Part II: HTML, XHTML, CSS, and Accessibility .............113
Chapter 6: Crafting Pages with HTML .................................115
Is HTML Easy? . . .......................................................... 116
HTML is a Markup Language ............................................ 116
Face the Changes ....................................................... 116
Document Conformance . ................................................... 117
Author to the Specification . . ............................................. 117
Validate the Document ................................................... 118
Create a Markup Style and Stick to It . . ...................................... 118
Understand Document Types and Language Versions ......................... 119
Use DOCTYPEs . . .......................................................... 122
HTML is Root . . . .......................................................... 123
Use <head> and <body> Appropriately ..................................... 124
Always Use <title> ........................................................ 125

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

Avoid the XML Declaration . . ............................................... 148
Use Correct XHTML DOCTYPEs ............................................ 149
Add the Namespace to Root . . ............................................... 150
Implementing Style in XHTML ............................................. 151
Adding Scripts in XHTML . . . ............................................... 152
XHTML and Case Sensitivity ............................................... 153
Quotation of Attribute Values in XHTML ..................................... 154
Managing Nonempty Elements ............................................. 155
Terminating Empty Elements . ............................................... 155
Managing Minimized Attributes ............................................ 156
Entities and XHTML . . ..................................................... 156
alt Attribute Required . ..................................................... 157
Understand Well-Formedness ............................................... 158
Proper Nesting of Lists ..................................................... 159
DOCTYPE Switching . . ..................................................... 162
Enclose Inline Elements in Blocks . . . ........................................ 163
name Becomes id .......................................................... 164
The target Attribute is Unavailable in Anchor ................................. 165
Summary .................................................................. 165
Chapter 8: Style Tips for Type and Design ........................... 167
Learning CSS . ............................................................ 168
When to Use Linked Style . . . ............................................... 168
When to Use Embedded Style ............................................... 169
When to Use Inline Styles . . . ............................................... 170
Importing Style ............................................................ 170
Understand the Cascade .................................................... 171
Work with Inheritance . ..................................................... 171
Be Aware of Specificity ..................................................... 173
Creating Multiple Link Styles ............................................... 174
Link Effects . . . ............................................................ 177

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

Vertical Centering in CSS ................................................... 220
Ordering DIVs for Backward Compatibility . . . ................................ 226
@import for Graceful Degradation ........................................... 227
CSS Hacking Strategies . ................................................... 228
The Box Model Hack ....................................................... 230
The High Pass Filter ........................................................ 231
The Mid Pass Filter ........................................................ 232
IE 5.0 Windows Band Pass Filter ............................................. 232
IE 5.5 Windows Band Pass Filter ............................................. 233
Opera Hacks .............................................................. 233
Understanding CSS Media Types ............................................ 234
Alternate Style Sheet for Print . . ............................................. 235
Alternate Style Sheet for Small-screen Media . ................................ 236
Alternate Style Sheet for Projection .......................................... 237
CSS Best Practices ......................................................... 237
Summary . . ................................................................ 241
Chapter 10: Adding Accessibility Features ............................ 243
What is Web Accessibility? .................................................. 244
The Advent of Accessibility Challenges .................................... 244
Accessibility and Law . ................................................... 246
Accessibility and You . ................................................... 247
Describing Visual and Aural Content . . . ...................................... 247
Providing Alternate Content . . . ............................................. 247
They’re NOT alt “Tags!” .................................................... 249
Use the title Attribute in Links . . ............................................. 249
Using the abbr Element for Abbreviations .................................... 251
Using the acronym Element for Acronyms .................................... 252
Understand the accesskey Attribute .......................................... 254
Index Link and Form Controls Using tabindex ................................ 255
Group Form Selections with select and optgroup .............................. 256

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

The Psychology of Color .................................................... 287
Color and Culture .......................................................... 288
Color and Gender .......................................................... 290
Color Tips ................................................................. 290
Exploring Scalable Vector Graphics . . ........................................ 291
Summary .................................................................. 292
Chapter 12: Spicing It Up with Dynamic Content ..................... 293
All about Scripting and Rich Media . . ........................................ 294
JavaScript, ECMAScript, and DOM ...................................... 294
Using Rich Media . . ..................................................... 296
Providing the Current Date . . ............................................... 297
Doing Popups Properly ..................................................... 298
Randomize Images and Text . ............................................... 301
Open a New Window Without target . ........................................ 307
Check for Plug-Ins ......................................................... 309
Text Size Switching . . . ..................................................... 310
Style Sheet Switching for Visual Design ...................................... 315
Dynamic Menu Systems .................................................... 317
Forms Validation with JavaScript ............................................ 319
The Trouble with applet, object, and embed . . ................................. 320
Adding Flash and Complying with Standards ................................. 322
Adding Audio . . ............................................................ 323
Adding Video . . ............................................................ 324
About Digital Storytelling ................................................... 326
Summary .................................................................. 327
Chapter 13: Keeping Sites Fresh and Engaging ....................... 329
Use Personalization . . . ..................................................... 330
Offer Useful Information and Applications . . ................................. 332
Provide Random or Frequently Changed Features . . ........................... 334
Add a Weblog . . ............................................................ 335

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

Learn More About Web Ads ................................................. 365
Add Sponsored Links ....................................................... 366
Search Engine Submission .................................................. 367
Don’t Forget Offline Promotions!............................................. 368
Summary . . ................................................................ 368
Chapter 15: Dealing with Growth and Redesigns .................... 369
The Importance of Server Logs . ............................................. 370
Develop a Regular Assessment Cycle . . ...................................... 372
Ensure Scalability .......................................................... 373
Manage Content Growth ................................................... 374
When to Redesign .......................................................... 374
Map Redesign Projects and Timelines Carefully .............................. 375
Express Upcoming Changes to Audience Members . . ......................... 376
Re-Evaluate Long-Term Goals . . ............................................. 377
Summary . . ................................................................ 378
Part IV: Appendixes ........................................ 379
Appendix A: Demystifying Service Provision ......................... 381
Appendix B: Overview of Application and Database
Technology ............................................................ 387
Appendix C: Helpful Reading, Web Sites, and Resources ............. 393
Index .................................................................. 399