intTypePromotion=1

Web design in a nutshell

Chia sẻ: Phung Tuyet | Ngày: | Loại File: PDF | Số trang:828

0
79
lượt xem
15
download

Web design in a nutshell

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

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 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...

Chủ đề:
Lưu

Nội dung Text: Web design in a nutshell

  1. www.it-ebooks.info
  2. www.it-ebooks.info
  3. WEB DESIGN IN A NUTSHELL www.it-ebooks.info
  4. Other web design resources from O’Reilly Related titles Head Rush Ajax CSS Pocket Reference Ajax Hacks™ Head First HTML with CSS and XHTML Learning Web Design CSS Cookbook™ HTML and XHTML Pocket Reference Dreamweaver 8: The Missing Manual Creating Web Sites: The Missing Manual Cascading Style Sheets: The Definitive Guide oreilly.com 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 inter- ested 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. Sub- scribers can zero in on answers to time-critical questions in a matter of seconds. Read the books on your Book- shelf from cover to cover or simply flip to the page you need. Try it today for free. www.it-ebooks.info
  5. WEB DESIGN IN A NUTSHELL Third Edition Jennifer Niederst Robbins Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo www.it-ebooks.info
  6. 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 corporate@oreilly.com. Editor: Steve Weiss Proofreader: Sada Preisch Developmental Editor: Linda Laflamme Indexer: Lucie Haskins Technical Editors: Tantek Çelik and Cover Designer: Edie Freedman Molly E. Holzschlag Interior Designer: David Futato Production Editor: Mary Brady Cover Illustrator: Lorrie LeJeune Copyeditor: Linley Dolby Illustrator: Christopher Reilley Printing History: January 1999: First Edition. September 2001: Second Edition. February 2006: 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
  7. 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? 3 Current Web Standards 6 Standards-Driven Design 9 For Further Reading 11 2. Designing for a Variety of Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Browser History 12 Browser Roll-Call 14 Gathering Usage Statistics 19 Learning from Browser Statistics 20 Dealing with Browser Differences 22 Know Your Audience 25 Test! 25 v This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved.
  8. 3. Designing for a Variety of Displays . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Designing for Unknown Monitor Resolutions 28 Fixed Versus Liquid Web Pages 30 Designing “Above the Fold” 37 Mobile Devices 37 4. A Beginner’s Guide to the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Servers 101 42 Unix Directory Structures 46 File Naming Conventions 50 Uploading Documents (FTP) 50 File (MIME) Types 53 5. Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Types of Disabilities 56 Overview of Assistive Technology 57 Who Is Responsible for Accessibility? 59 Web Content Accessibility Guidelines 60 Web Content Accessibility Guidelines 2.0 (WCAG 2.0) 64 Standards Variations and Section 508 64 Web Accessibility Techniques 65 Testing for Accessibility 68 6. Internationalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Character Sets and Encoding 73 Character References 78 Language Features 80 Style Sheets Language Features 84 For Further Reading 85 Part II. The Structural Layer: XML and (X)HTML 7. Introduction to XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 XML Basics 90 How It Works 91 XML Document Syntax 93 Well-Formed XML 96 Document Type Definition (DTD) 97 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.
  9. XML Namespaces 103 XML on the Web 104 Web-Related XML Applications 105 Where to Learn More 112 8. HTML and XHTML Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 The Role of HTML 114 Markup Basics 115 Introduction to XHTML 119 Which Standard Is Right for You? 122 Well-Formed XHTML 123 Web Authoring Tools 126 Good Authoring Practices 128 9. Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Minimal Document Structure 130 Document Type Declaration 132 The Root Element 135 The Document Header 136 The Document Body 142 10. Text Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Choosing Text Elements 145 The Building Blocks of Content 146 Inline Elements 149 Deleted and Inserted Text 152 Generic Elements (div and span) 153 Lists 156 Presentational Elements 161 Character Entity References 167 11. Creating Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Simple Hypertext Links 169 Linking Within a Document 171 Targeting Windows 173 Alternative Protocols 173 Linking Documents with link 175 12. Images and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Inline Images 178 Image Maps 186 Table of Contents | vii This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved.
  10. Embedded Media 192 Java Applets 201 Inline (Floating) Frames 203 13. Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Table Uses 206 Basic Table Structure 207 Row Groups 213 Columns and Column Groups 214 Table Presentation 216 Accessible Tables 220 Responsible Layout Tables 226 14. Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Introduction to Frames 232 Basic Frameset Structure 234 Frame Function and Appearance 239 Targeting Frames 241 Frame Design Tips and Tricks 244 15. Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 The Basic Form Element 248 Form Controls 250 Accessibility Features 263 disabled and readonly 267 Affecting Form Appearance 267 Part III. The Presentation Layer: Cascading Style Sheets 16. Cascading Style Sheets Fundamentals . . . . . . . . . . . . . . . . . . . . . . . 273 CSS in a Nutshell 273 The Benefits of CSS 274 How CSS Works 275 Rule Syntax 275 Adding Styles to a Document 278 Key Concepts 283 Specifying Values 291 Browser Support 293 For Further Reading 294 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.
  11. 17. Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Type (Element) Selector 297 Contextual Selectors 298 Class and ID Selectors 299 Attribute Selectors 301 Pseudoselectors 302 18. Font and Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Typography on the Web 307 Font Family 310 Font Size 312 Other Font Settings 318 Text Transformation (Capitalization) 322 Text Decoration 323 Line Height 325 Text Alignment Properties 327 Text Spacing 332 Text Direction 335 19. Basic Box Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 The Box Model, Revisited 338 Width and Height 341 Margins 344 Borders 347 Padding 352 20. Color and Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 Foreground Color 355 Background Color 357 Background Images 358 21. Floating and Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 Normal Flow 368 Floating 369 Positioning Basics 375 Absolute Positioning 385 Fixed Positioning 389 Relative Positioning 390 Table of Contents | ix This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved.
  12. 22. CSS for Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 The Essence of Tables 392 Styling Tables 396 Borders 398 Table Layout (Width and Height) 401 Table Display Values 403 23. Lists and Generated Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 CSS for Lists 406 Generated Content 412 24. CSS Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 Centering a Page 419 Two-Column Layouts 421 Three-Column Layouts 424 Boxes with Rounded Corners 432 Image Replacement 436 CSS Rollovers 440 List-Based Navigation Bars 443 CSS Techniques Resources 446 25. Managing Browser Bugs: Workarounds,Hacks,and Filters . . . . . . 448 Working with “Troubled” Browsers 448 The Browsers 449 Hack and Workaround Management 101 459 Part IV. The Behavioral Layer: JavaScript and the DOM 26. Introduction to JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 A Little Background 465 Using JavaScript 466 JavaScript Syntax 468 Event Handling 484 The Browser Object 486 Where to Learn More 487 27. DOM Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488 A Sordid Past 488 Out of the Dark Ages 489 The DOM 489 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.
  13. Manipulating Documents with the DOM 491 Working with Style 501 DOM Scripting in Action 502 Supplement: Getting Started with Ajax 507 Part V. Web Graphics 28. Web Graphics Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515 Web Graphic File Formats 515 Image Resolution 517 Color on the Web 519 Web Graphics Production Tips 524 29. GIF Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 8-Bit Indexed Color 530 LZW Compression 531 Interlacing 533 Transparency 534 Minimizing GIF File Sizes 536 Designing GIFs with the Web Palette 541 30. JPEG Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 24-Bit Color 544 JPEG Compression 545 Progressive JPEGs 547 Creating JPEGs 548 Minimizing JPEG File Size 548 31. PNG Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 When to Use PNGs 552 PNG Features 554 Platform/Browser Support 558 Creating PNG Files 559 PNG Optimization Strategies 561 For Further Reading 563 32. Animated GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564 How They Work 564 Using Animated GIFs 565 Table of Contents | xi This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved.
  14. Tools 565 Creating Animated GIFs 566 Optimizing Animated GIFs 570 Part VI. Media 33. Audio on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 Basic Digital Audio Concepts 575 Using Existing Audio 577 Preparing Your Own Audio 578 Streaming Audio 581 Audio Formats 583 Choosing an Audio Format 590 Adding Audio to a Web Page 590 34. Video on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595 Basic Digital Video Concepts 595 Compression 596 Video File Formats 598 Adding Video to an HTML Document 603 35. The Flash Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609 Using Flash on Web Pages 610 Creating Flash Movies 612 ActionScript 615 Adding Flash to a Web Page 616 Integrating Flash with Other Technologies 622 The Flash Player 623 Flash Resources 625 36. Printing from the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626 Browser Print Mechanisms 626 Cascading Style Sheets for Print 627 Portable Document Format (PDF) 634 Flash Printing 637 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.
  15. 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 | xiii This is the Title of the Book, eMatter Edition www.it-ebooks.info Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved.
  16. www.it-ebooks.info
  17. 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.
  18. simply the output of a web server. And the IT department found itself in the posi- tion 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.
  19. 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, educa- tional institutions, and private sector companies, providing them with expert accessibility testing, and review and recommendations for improving the accessi- bility 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, Introduc- tion 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.
  20. Todd Marks Todd Marks is an avid developer, designer, instructor, author, and manager of information display technologies. In 2002, Todd founded MindGrub Technolo- gies, 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.
ADSENSE
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2