Xem mẫu
- 250 HTML
and Web Design
Secrets
- 250 HTML and
Web Design
Secrets
Molly E. Holzschlag
Wiley Publishing, Inc.
- 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
eISBN: 0-7645-7708-5
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
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:
permcoordinator@wiley.com.
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.
- 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/.
- Credits
Acquisitions Editor Vice President and Executive Group
Katie Mohr Publisher
Richard Swadley
Development Editor
Marcia Ellett Vice President and Executive Publisher
Robert Ipsen
Technical Editor
Ethan Marcotte Vice President and Publisher
Joseph B. Wikert
Production Editor
Pamela Hanley Executive Editorial Director
Mary Bednarek
Copy Editor
TechBooks Project Coordinator
TechBooks
Editorial Manager
Mary Beth Wakefield Proofreading and Indexing
TechBooks Production Services
- To Bill Cullifer for his unflagging enthusiasm for the Internet, desire
to uplift and educate, and for his friendship
- 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
- 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
- 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 and Appropriately . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Always Use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Manage Character Sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Author Documents Structurally . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Use Lists to Enhance Structure and Readability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
and versus and . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
- 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
- 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
- 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
- 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
- Acknowledgments
This was my first book with Wiley Publishing, and I’mhappy to say it was a delight-
ful experience. Katie Mohr is a most awesome acquisitions editor. Marcia Ellett
always had a steady, calm eye as my development editor. My thanks also to the
entire editorial team who helped make this book possible.
It’s a fairly regular convention that computer book authors get to pick their techni-
cal editors. It’s also a fairly regular convention that there’s limited budget for TEs,
but Ethan Marcotte (www.sidesh0w.com/) kept me on the straight and narrow
with his technical edits and endless good cheer.
From Waterside Productions, my agent David Fugate is always my shimmering
knight in armor.
For providing technical support, research, comments, and resources directly af-
fecting this book, my thanks go in no specific order to Stephanie Troeth, Dunstan
Orchard, Matthew Mullenweg, Eric A. Meyer, Tantek ¸ elik, Porter Glendinning,
C
Dori Smith. At large: AdaptivePath, Boxes and Arrows, Digital Web Magazine, the
entire blogging community, and, of course, to all my readers who keep me inspired
and happy as a computer book author—no easy task.
- Introduction
Web design has come a long way in just over a decade. The concerns facing anyone
working on Web sites are so complex and changing so rapidly that it’s downright
overwhelming. From a consumer perspective, Web designs and redesigns can be
very expensive. The goal of this book is to provide you with all the top-flight infor-
mation you need to know to get up to speed with the best practices and standards
being used by today’s practical but progressive Web sites such as ESPN and Wired
News. We all need help to improve workflow, develop rich designs that can be
accessed by numerous browsers and alternative devices such as cell phones and
PDAs, create sites that meet legal concerns regarding content and accessibility,
managing sites for the long term, and improve the financial bottom line by signif-
icantly reducing bandwidth and increasing revenue.
Most likely you are a person who is working on public or private Web sites and is
somewhat experienced with HTML and Web graphic design and are interested in
ramping up to the next level of expertise. If you’re like me, you want to make your
life easier by streamlining the design process and management, and increasing
awareness and promotion of the sites you design and develop. Your primary job
might not even be that of a Web designer—perhaps you are a scientist, librarian,
documentation specialist, promotions specialist, educator, or serving in the armed
forces. The people working on Web sites at this point in history come from a very
wide range of backgrounds and professions, and we come from all parts of the
globe. Some readers will be avid hobbyists, too, using the Web as a means for
self-expression via Weblogs, social networks, and special interest groups.
250 HTML and Web Design Secrets looks into the detailed work required to create
successful Web sites and provides extremely up-to-date approaches to dealing with
an array of challenges that the creation of Web sites presents. Technologies and top-
ics covered include tools, project management, information architecture, usability,
content development and management, HTML, XHTML, and CSS, graphics and
multimedia for the Web, accessibility, best uses of dynamic content and rich me-
dia, keeping content fresh, improving site ranking and promotions, and managing
redesigns.
Using This Book
Focusing on theory, standards, and rigid practices is, in a word, dry. 250 HTML and
Web Design Secrets takes a fresh and fun approach, providing insider techniques
that will help designers get the information they need.
Instead of teaching individual languages or technologies, the lessons here are
broken down into specific “secrets” that will help you immediately improve your
current sites; help you build new sites that are visually exciting, extremely portable,
and cross-platform compatible; help you manage redesigns; and take your sites
from the past into a successful future. Another unique quality of the “Secrets”
format of this book is that while it’s written to be read from start to finish, it can
also be used as a quick reference when you’re facing a specific problem.
The book consists of 15 chapters broken into three parts: “Tools, Planning, and
Content;” “HTML, XHTML, CSS and Accessibility;” and “Designing Sites for
Long-Term Success.” There are also three appendices to help you get more re-
sources for Web site service provision, application, and database technologies,
and references of a wide range of helpful Web sites, articles, books, and organiza-
tions that can help you constantly challenge and improve your skills beyond the
scope of this book.
nguon tai.lieu . vn
