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

165 Chapter 8: Style Tips for Type and Design.. 269 Chapter 11: Sophisticated Visual Design.. 271 Visual Design and Site Intent... 310 Style Sheet Switching for Visual Design.. 327 Chapt

250 HTML and Web Design

Secrets

250 HTML and Web Design

Secrets

Molly E Holzschlag

Wiley Publishing, Inc.

Copyright c
2004 by Wiley Publishing, Inc., Indianapolis, Indiana

Published simultaneously in Canada

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.

eISBN: 0-7645-7708-5

About the Author

In the world of Web design and development, Molly E Holzschlag is one of themost vibrant and influential people around With over 30 Web development booktitles to her credit, Molly is also a noted columnist, speaker, and educator

As a Steering Committee Member of the Web Standards Project (WaSP), Mollyworks 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 forthe World Organization of Webmasters Molly speaks regularly at conferences inaddition to teaching and developing curriculum for a number of colleges and uni-versities, including the University of Arizona, University of Phoenix, New SchoolUniversity, 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 aboutMolly, drop by at www.molly.com/

Mary Beth Wakefield

Vice President and Executive Group Publisher

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

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

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

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

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

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

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

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

This was my first book with Wiley Publishing, and I’m happy to say it was a ful experience Katie Mohr is a most awesome acquisitions editor Marcia Ellettalways had a steady, calm eye as my development editor My thanks also to theentire editorial team who helped make this book possible

delight-It’s a fairly regular convention that computer book authors get to pick their 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 narrowwith his technical edits and endless good cheer

techni-From Waterside Productions, my agent David Fugate is always my shimmeringknight in armor

For providing technical support, research, comments, and resources directly fecting this book, my thanks go in no specific order to Stephanie Troeth, DunstanOrchard, Matthew Mullenweg, Eric A Meyer, Tantek C¸ elik, Porter Glendinning,Dori Smith At large: AdaptivePath, Boxes and Arrows, Digital Web Magazine, theentire blogging community, and, of course, to all my readers who keep me inspiredand happy as a computer book author—no easy task

Web design has come a long way in just over a decade The concerns facing anyoneworking on Web sites are so complex and changing so rapidly that it’s downrightoverwhelming From a consumer perspective, Web designs and redesigns can bevery 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 standardsbeing used by today’s practical but progressive Web sites such as ESPN and WiredNews We all need help to improve workflow, develop rich designs that can beaccessed by numerous browsers and alternative devices such as cell phones andPDAs, 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 issomewhat experienced with HTML and Web graphic design and are interested inramping up to the next level of expertise If you’re like me, you want to make yourlife easier by streamlining the design process and management, and increasingawareness and promotion of the sites you design and develop Your primary jobmight not even be that of a Web designer—perhaps you are a scientist, librarian,documentation specialist, promotions specialist, educator, or serving in the armedforces The people working on Web sites at this point in history come from a verywide range of backgrounds and professions, and we come from all parts of theglobe Some readers will be avid hobbyists, too, using the Web as a means forself-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 ics covered include tools, project management, information architecture, usability,content development and management, HTML, XHTML, and CSS, graphics andmultimedia for the Web, accessibility, best uses of dynamic content and rich me-dia, keeping content fresh, improving site ranking and promotions, and managingredesigns

top-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 arebroken down into specific “secrets” that will help you immediately improve yourcurrent sites; help you build new sites that are visually exciting, extremely portable,and cross-platform compatible; help you manage redesigns; and take your sitesfrom 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 canalso 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, andContent;” “HTML, XHTML, CSS and Accessibility;” and “Designing Sites forLong-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 thescope of this book