Tài liệu Web design in a nutshell, 3rd edition

www.it-ebooks.info www.it-ebooks.info WEB DESIGN IN A NUTSHELL www.it-ebooks.info Other web design resources from O’Reilly Related titles oreilly.com Head Rush Ajax Ajax Hacks™ Learning Web Design HTML and XHTML Pocket Reference Creating Web Sites: The Missing Manual Cascading Style Sheets: The Definitive Guide CSS Pocket Reference Head First HTML with CSS and XHTML CSS Cookbook™ Dreamweaver 8: The Missing Manual oreilly.com is more than a complete catalog of O’Reilly books. You’ll also find links to news, events, articles, weblogs, sample chapters, and code examples. oreillynet.com is the essential portal for developers interested in open and emerging technologies, including new platforms, programming languages, and operating systems. Conferences O’Reilly brings diverse innovators together to nurture the ideas that spark revolutionary industries. We specialize in documenting the latest tools and systems, translating the innovator’s knowledge into useful skills for those in the trenches. Visit conferences.oreilly.com for our upcoming events. Safari Bookshelf (safari.oreilly.com) is the premier online reference library for programmers and IT professionals. Conduct searches across more than 1,000 books. Subscribers can zero in on answers to time-critical questions in a matter of seconds. Read the books on your Bookshelf from cover to cover or simply flip to the page you need. Try it today for free. www.it-ebooks.info WEB DESIGN IN A NUTSHELL Third Edition Jennifer Niederst Robbins Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo www.it-ebooks.info Web Design in a Nutshell, Third Edition by Jennifer Niederst Robbins Copyright © 2006, 2001, 1999 O’Reilly Media, Inc. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (safari.oreilly.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Editor: Steve Weiss Developmental Editor: Linda Laflamme Technical Editors: Tantek Çelik and Molly E. Holzschlag Production Editor: Mary Brady Copyeditor: Linley Dolby Proofreader: Sada Preisch Indexer: Lucie Haskins Cover Designer: Edie Freedman Interior Designer: David Futato Cover Illustrator: Lorrie LeJeune Illustrator: Christopher Reilley Printing History: January 1999: September 2001: February 2006: First Edition. Second Edition. Third Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. The In a Nutshell series designations,Web Design in a Nutshell, the image of a least weasel, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. This book uses RepKover™ a durable and flexible lay-flat binding. , ISBN-10: 0-596-00987-9 ISBN-13: 978-0-596-00987-8 [M] [9/06] www.it-ebooks.info Chapter 1 Table of Contents Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Contributors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Technical Reviewers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Part I. The Web Environment 1. Web Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 What Are Standards? Current Web Standards Standards-Driven Design For Further Reading 3 6 9 11 2. Designing for a Variety of Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Browser History Browser Roll-Call Gathering Usage Statistics Learning from Browser Statistics Dealing with Browser Differences Know Your Audience Test! 12 14 19 20 22 25 25 v This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. 3. Designing for a Variety of Displays . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Designing for Unknown Monitor Resolutions Fixed Versus Liquid Web Pages Designing “Above the Fold” Mobile Devices 28 30 37 37 4. A Beginner’s Guide to the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Servers 101 Unix Directory Structures File Naming Conventions Uploading Documents (FTP) File (MIME) Types 42 46 50 50 53 5. Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Types of Disabilities Overview of Assistive Technology Who Is Responsible for Accessibility? Web Content Accessibility Guidelines Web Content Accessibility Guidelines 2.0 (WCAG 2.0) Standards Variations and Section 508 Web Accessibility Techniques Testing for Accessibility 56 57 59 60 64 64 65 68 6. Internationalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Character Sets and Encoding Character References Language Features Style Sheets Language Features For Further Reading 73 78 80 84 85 Part II. The Structural Layer: XML and (X)HTML 7. Introduction to XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 XML Basics How It Works XML Document Syntax Well-Formed XML Document Type Definition (DTD) vi | Table of Contents This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. 90 91 93 96 97 XML Namespaces XML on the Web Web-Related XML Applications Where to Learn More 103 104 105 112 8. HTML and XHTML Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 The Role of HTML Markup Basics Introduction to XHTML Which Standard Is Right for You? Well-Formed XHTML Web Authoring Tools Good Authoring Practices 114 115 119 122 123 126 128 9. Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Minimal Document Structure Document Type Declaration The Root Element The Document Header The Document Body 130 132 135 136 142 10. Text Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Choosing Text Elements The Building Blocks of Content Inline Elements Deleted and Inserted Text Generic Elements (div and span) Lists Presentational Elements Character Entity References 145 146 149 152 153 156 161 167 11. Creating Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Simple Hypertext Links Linking Within a Document Targeting Windows Alternative Protocols Linking Documents with link 169 171 173 173 175 12. Images and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Inline Images Image Maps 178 186 Table of Contents | This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. vii Embedded Media Java Applets Inline (Floating) Frames 192 201 203 13. Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Table Uses Basic Table Structure Row Groups Columns and Column Groups Table Presentation Accessible Tables Responsible Layout Tables 206 207 213 214 216 220 226 14. Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Introduction to Frames Basic Frameset Structure Frame Function and Appearance Targeting Frames Frame Design Tips and Tricks 232 234 239 241 244 15. Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 The Basic Form Element Form Controls Accessibility Features disabled and readonly Affecting Form Appearance 248 250 263 267 267 Part III. The Presentation Layer: Cascading Style Sheets 16. Cascading Style Sheets Fundamentals . . . . . . . . . . . . . . . . . . . . . . . 273 CSS in a Nutshell The Benefits of CSS How CSS Works Rule Syntax Adding Styles to a Document Key Concepts Specifying Values Browser Support For Further Reading viii | Table of Contents This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. 273 274 275 275 278 283 291 293 294 17. Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Type (Element) Selector Contextual Selectors Class and ID Selectors Attribute Selectors Pseudoselectors 297 298 299 301 302 18. Font and Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Typography on the Web Font Family Font Size Other Font Settings Text Transformation (Capitalization) Text Decoration Line Height Text Alignment Properties Text Spacing Text Direction 307 310 312 318 322 323 325 327 332 335 19. Basic Box Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 The Box Model, Revisited Width and Height Margins Borders Padding 338 341 344 347 352 20. Color and Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 Foreground Color Background Color Background Images 355 357 358 21. Floating and Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 Normal Flow Floating Positioning Basics Absolute Positioning Fixed Positioning Relative Positioning 368 369 375 385 389 390 Table of Contents | This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. ix 22. CSS for Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 The Essence of Tables Styling Tables Borders Table Layout (Width and Height) Table Display Values 392 396 398 401 403 23. Lists and Generated Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 CSS for Lists Generated Content 406 412 24. CSS Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 Centering a Page Two-Column Layouts Three-Column Layouts Boxes with Rounded Corners Image Replacement CSS Rollovers List-Based Navigation Bars CSS Techniques Resources 419 421 424 432 436 440 443 446 25. Managing Browser Bugs: Workarounds,Hacks,and Filters . . . . . . 448 Working with “Troubled” Browsers The Browsers Hack and Workaround Management 101 448 449 459 Part IV. The Behavioral Layer: JavaScript and the DOM 26. Introduction to JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 A Little Background Using JavaScript JavaScript Syntax Event Handling The Browser Object Where to Learn More 465 466 468 484 486 487 27. DOM Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488 A Sordid Past Out of the Dark Ages The DOM x | Table of Contents This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. 488 489 489 Manipulating Documents with the DOM Working with Style DOM Scripting in Action Supplement: Getting Started with Ajax 491 501 502 507 Part V. Web Graphics 28. Web Graphics Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515 Web Graphic File Formats Image Resolution Color on the Web Web Graphics Production Tips 515 517 519 524 29. GIF Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 8-Bit Indexed Color LZW Compression Interlacing Transparency Minimizing GIF File Sizes Designing GIFs with the Web Palette 530 531 533 534 536 541 30. JPEG Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 24-Bit Color JPEG Compression Progressive JPEGs Creating JPEGs Minimizing JPEG File Size 544 545 547 548 548 31. PNG Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 When to Use PNGs PNG Features Platform/Browser Support Creating PNG Files PNG Optimization Strategies For Further Reading 552 554 558 559 561 563 32. Animated GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564 How They Work Using Animated GIFs 564 565 Table of Contents | This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. xi Tools Creating Animated GIFs Optimizing Animated GIFs 565 566 570 Part VI. Media 33. Audio on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 Basic Digital Audio Concepts Using Existing Audio Preparing Your Own Audio Streaming Audio Audio Formats Choosing an Audio Format Adding Audio to a Web Page 575 577 578 581 583 590 590 34. Video on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595 Basic Digital Video Concepts Compression Video File Formats Adding Video to an HTML Document 595 596 598 603 35. The Flash Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609 Using Flash on Web Pages Creating Flash Movies ActionScript Adding Flash to a Web Page Integrating Flash with Other Technologies The Flash Player Flash Resources 610 612 615 616 622 623 625 36. Printing from the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626 Browser Print Mechanisms Cascading Style Sheets for Print Portable Document Format (PDF) Flash Printing xii | Table of Contents This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. 626 627 634 637 Part VII. Appendixes A. HTML Elements and Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641 B. CSS 2.1 Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684 C. Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 722 D. Specifying Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733 E. Microformats: Extending (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 742 Glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 747 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757 Table of Contents | This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. xiii www.it-ebooks.info Chapter 2 Foreword I recall sitting at my desk many years ago, struggling with a piece of HTML markup, when someone walked by and dropped off a floppy disk. Written in block letters across the label was “Netscape .9b”—a pre-release beta version of what would soon become the most widely used browser of that time. I installed it and clicked around my company’s web site, and I remember thinking to myself, “Huh. My job just completely changed.” Up to that point in the nascent history of the World Wide Web, there had really been only one browser to worry about. Nearly everyone used Mosaic, and as long as my pages were also functional in a text-only browser like Lynx, I could safely forget about that aspect of web design. But suddenly there was competition. And with competition came new concerns about rendering, feature support, and bugs. That would prove to be one of innumerable watershed events in more than a decade of growth and evolution of the Web as a world-changing technological platform. Soon after Netscape shipped its browser, my job would completely change over and over again. First came fonts and colors; then frames, JavaScript, database-driven dynamic web applications, XML, Cascading Style Sheets, Flash, semantic markup—and all of those innovations have iterated through countless new versions. If there’s one thing that is certain in the life of a web designer, it’s that every day something you thought you knew will change. And then change again. Yet in any journey—whether literal or metaphorical—it pays to occasionally find a vantage point and take stock of where you’ve been and how far you have to go. We’ve come a long way on the Web, but we also have so much more to learn. The earliest days of the Web were the domain of the webmaster. At that time, the Web was viewed as another service provided as technical infrastructure—much like the email server or firewall. The webmaster’s duties included maintaining the HTTP server, keeping things secure, monitoring bandwidth usage, and—oh, yeah—creating the HTML pages for this new service. Web design back then was xv This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. simply the output of a web server. And the IT department found itself in the position of building pages and even occasionally using Photoshop. Those were crazy times. By the mid ’90s, the Web had moved from IT to marketing. Every company needed a web site if they expected to survive, and there was a mad scramble to develop an “interactive strategy.” This was the era of the transitional web designer—when people with experience in more traditional media design came to the Web and tried to bend it to fit. No control of typography? Build the whole page as an image. Page layout not up to our standards? We’ll hack on tables and invisible GIFs until things look exactly like they should. The Web didn’t respond very well to this onslaught. The cornerstones of digital design—usability, content reuse, accessibility—buckled under the hubris of graphic artists. But today holds both tremendous opportunity and significant trepidation for those who call themselves web designers. The legacy of the so-called “Browser Wars” is behind us; we have a strong and stable platform for building with increasing sophistication. A foundation of accepted and well-implemented industry standards offers a constancy we once could only dream of. But at the same time, the Web has factions of innovation racing off in countless directions. Good designers now worry as much about semantics, device-agnosticism, and Ajax-style interactions as they do about color, typography, and layout. It is an understandably intimidating time. The weight of this book in your hands is a testimony to that complexity. And if it seems daunting, at least take comfort in the fact that the author could not possibly be a more capable guide. Jennifer Robbins has been designing web sites longer than anyone else I know. For years she has been the one we’ve all turned to for reassurance and clarity as our industry propels itself into the future. There is nobody I would trust more than Jennifer to show us where we’ve been, and where we’re heading next. You should, too. —Jeffrey Veen December 2005, San Francisco xvi | Foreword This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. Chapter 3 Contributors Tantek Çelik Tantek Çelik contributed Appendix E, Microformats: Extending (X)HTML. He is also a Lead Technical Editor for this book. His bio is listed on the Technical Reviewers page. Derek Featherstone Derek is a well-known instructor, speaker, and developer with expertise in web accessibility consulting and training. He advises many government agencies, educational institutions, and private sector companies, providing them with expert accessibility testing, and review and recommendations for improving the accessibility of their web sites to all people. As a member of the Web Standards Project (webstandards.org), Derek serves on two task forces: Accessibility/Assistive Devices and DOM Scripting. He is a dedicated advocate for standards that ensure simple, affordable access to web technologies for all. Derek wrote Chapter 5, Accessibility. Aaron Gustafson Aaron Gustafson has been working on the Web since 1996, plying his trade for many top companies including Delta Airlines, Gartner, IBM, Konica Minolta, and the U.S. EPA. He is an advocate for web standards and open source languages, often writing on those topics and more for A List Apart, Digital Web Magazine, and on his blog, easy-reader.net. When not behind a desk, he can sometimes be found publicly preaching the web standards gospel alongside Molly E. Holzschlag. He and his wife, Kelly, reside in Connecticut, where he works as Sr. Web Designer/Developer for Cronin and Company. Aaron wrote Chapter 25, Managing Browser Bugs: Workarounds,Hacks,and Filters, Chapter 26, Introduction to JavaScript, and Chapter 27, DOM Scripting. xvii This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved. Todd Marks Todd Marks is an avid developer, designer, instructor, author, and manager of information display technologies. In 2002, Todd founded MindGrub Technologies, LLC where he created Flash information display systems for clients such as Oracle, Zurich, and ARINC. Todd currently works as a Products Manager for the mediaEdge division of Exceptional Software, where he oversees development of Media Edge’s training applications. Todd is a Macromedia Certified Developer, Designer, and Subject Matter Expert and has written and contributed to several books including Flash MX Video (Peer Information), Beginning Dreamweaver MX 2004 (Wrox), Advanced PHP for Flash MX (Glasshaus), Flash MX Most Wanted Components (Friends of Ed), and other Dreamweaver and Flash-related titles. Todd wrote Chapter 35, The Flash Platform. xviii | Contributors This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved.