Thông tin tài liệu
WEB DESIGN IN A NUTSHELL A Desktop Quick Reference WEB DESIGN IN A NUTSHELL A Desktop Quick Reference Jennifer Niederst Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo Web Design in a Nutshell by Jennifer Niederst Copyright © 1999 O’Reilly & Associates, Inc. All rights reserved. Printed in the United States of America. Cover illustration by Lorrie LeJeune, Copyright © 1999 O’Reilly & Associates, Inc. All rights reserved. Published by O’Reilly & Associates, Inc., 101 Morris Street, Sebastopol, CA 95472. Editor: Richard Koman Production Editor: Clairemarie Fisher O’Leary Printing History: January 1999: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly & Associates, Inc. The association of the image of a weasel and the topic of web design is a trademark of O’Reilly & Associates, 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 & Associates, 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 assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 1-56592-515-7 [12/99] [M] v Web Design in a Nutshell, eMatter Edition Copyright © 2000 O’Reilly & Associates, Inc. All rights reserved. Table of Contents Preface xiii Part I: The Web Environment Chapter 1—Designing for a Variety of Browsers 3 Browsers . 3 Design Strategies 9 Writing Good HTML . 11 Knowing Your Audience . 12 Considering Your Site’s Purpose . 13 Test! Test! Test! . 13 Chapter 2—Designing for a Variety of Displays 14 Dealing with Unknown Monitor Resolutions . 14 Fixed versus Flexible Web Page Design . 19 Accessibility 23 Alternative Displays 26 Chapter 3—Web Design Principles for Print Designers 28 Color on the Web . 28 Graphics on the Web . 34 Typography on the Web 41 vi Web Design in a Nutshell, eMatter Edition Copyright © 2000 O’Reilly & Associates, Inc. All rights reserved. Chapter 4—A Beginner’s Guide to the Server . 47 Servers 101 47 Introduction to Unix . 50 File Naming Conventions . 57 Uploading Documents (FTP) . 57 File (MIME) Types 61 Part II: HTML Chapter 5—HTML Overview 67 HTML Editing Tools . 68 WYSIWYG Authoring Tools 68 Document Structure . 70 HTML Tags 71 Information Browsers Ignore . 73 Tips on Good HTML Style . 74 Specifying Color in HTML 75 Character Entities 84 HTML Resources in This Book 89 Chapter 6—Structural HTML Tags . 91 Summary of Structural Tags . 91 Setting Up an HTML Document 94 Global Settings with the <body> Tag 96 Using <meta> Tags . 98 Chapter 7—Formatting Text . 102 Summary of Text Tags . 102 Working with HTML Text 112 Inline Type Styles . 114 The <font> Tag . 116 Lists 118 Layout Techniques with HTML 122 Chapter 8—Creating Links . 130 Summary of Tags Related to Linking 130 Simple Hypertext Links 133 Linking Within a Document . 134 Affecting the Appearance of Links 135 vii Web Design in a Nutshell, eMatter Edition Copyright © 2000 O’Reilly & Associates, Inc. All rights reserved. Targeting Windows 137 Imagemaps 137 Non-Web Links and Protocols . 143 Chapter 9—Adding Images and Other Page Elements 146 Summary of Object Placement Tags 146 Horizontal Rules . 154 Image Basics . 157 The <img> Tag and Its Attributes 158 Adding Java Applets to the Page . 164 Adding Plug-in Media with <embed> . 165 Adding Media Files with <object> . 166 Chapter 10—Tables 168 Summary of Table Tags . 168 Introduction to Tables 176 Basic Table Structure 177 Affecting Table Appearance . 181 Table Troubleshooting . 187 Tips and Tricks . 193 Standard Table Templates 196 Multipart Images in Tables . 201 Chapter 11—Frames 206 Summary of Frame Tags 206 Introduction to Frames . 209 Basic Frameset Structure 211 Frame Function and Appearance 214 Targeting Frames 217 Inline (Floating) Frames . 219 Frame Design Tips and Tricks . 220 Chapter 12—Forms 226 Summary of Form Tags 226 Introduction to Forms 233 The Basic Form (<form>) 234 Form Elements 236 New Form Attributes (HTML 4.0) 241 Affecting the Appearance of Forms . 242 Unconventional Use of Form Elements 246 Demystifying CGI . 247 viii Web Design in a Nutshell, eMatter Edition Copyright © 2000 O’Reilly & Associates, Inc. All rights reserved. Chapter 13—Server Side Includes 251 How SSI Is Used . 251 SSI and the Server 253 Adding SSI Commands to a Document . 253 Using Environment Variables 255 XSSI . 255 List of Elements 256 Include Variables 259 Time Formats for SSI Output . 260 Part III: Graphics Chapter 14—GIF Format . 265 GIF87a versus GIF89a 265 Eight-Bit Indexed Color . 266 GIF Compression 266 When to Use GIFs 266 Tools Overview 267 Interlacing . 268 Transparency 269 Minimizing GIF File Sizes 277 Chapter 15—JPEG Format 283 24-bit Color . 283 JPEG Compression . 283 When to Use JPEGs 285 Progressive JPEGs . 285 JPEGs in AOL Browsers . 286 Creating JPEGs 286 Minimizing JPEG File Size 287 Chapter 16—PNG Format . 291 Platform/Browser Support . 292 8-Bit Palette, Grayscale, and Truecolor . 293 PNG Compression 293 When to Use PNGs 294 Special Features 295 Creating PNG Files . 297 Optimizing PNG File Size 301 Online PNG Resources . 302 ix Web Design in a Nutshell, eMatter Edition Copyright © 2000 O’Reilly & Associates, Inc. All rights reserved. Chapter 17—Designing Graphics with the Web Palette 303 The Web Palette . 303 Other Palettes . 305 Image Types . 306 Designing with Web-Safe Colors . 307 Converting to the Web Palette . 309 Survey of Web Graphics Tools 310 Color Blenders 315 Where to Learn More . 317 Part IV: Multimedia and Interactivity Chapter 18—Animated GIFs 321 How They Work . 321 Using Animated GIFs . 322 Browser Support . 322 Tools . 323 Creating Animated GIFs . 324 Optimizing Animated GIFs 328 Chapter 19—Audio on the Web 330 Copyright Issues . 330 Audio Tools Overview . 331 Basic Digital Audio Concepts 332 Nonstreaming versus Streaming 333 Nonstreaming (Static) Audio 335 Streaming Audio . 341 Bibliography . 345 Chapter 20—Video on the Web . 347 Tools Overview 347 Basic Digital Video Concepts . 348 Compression . 349 Video File Formats . 351 Streaming Video Technologies 353 Adding Video to an HTML Document 355 Bibliography . 358 x Web Design in a Nutshell, eMatter Edition Copyright © 2000 O’Reilly & Associates, Inc. All rights reserved. Chapter 21—Interactivity . 359 Flash 359 Shockwave for Director . 366 Java Applets 370 Interactive Buttons with JavaScript 373 Chapter 22—Introduction to JavaScript 379 JavaScript Basics . 379 Sample Scripts . 381 Handling Multiple Browsers 383 Browser Compatibility 385 Part V: Emerging Technologies Chapter 23—Cascading Style Sheets . 389 How Style Sheets Work 391 Selectors 395 Specifying Values . 398 Properties 399 Positioning with Style Sheets . 418 What’s New in CSS2 . 422 Style Sheet Tips and Tricks 426 Browser Support Charts . 428 Chapter 24—Introduction to DHTML . 429 Advantages to Using DHTML 430 Disadvantages . 430 Learning DHTML 431 Browser Differences . 431 The Document Object Model 431 DHTML Examples . 435 DHTML Tools . 441 Where to Learn More . 443 Chapter 25—Introduction to XML . 445 Background 445 Document Type Definition (DTD) 446 XML Syntax Basics 446 Examples of XML Technology . 448 Where to Learn More . 451 [...]... nonstreaming and streaming audio file formats for web delivery Chapter 20, Video on the Web, provides an overview of nonstreaming and streaming video file formats Chapter 21, Interactivity, looks at Macromedia’s Flash and Director Shockwave formats as well as Java applets and interactive buttons created with JavaScript Chapter 22, Introduction to JavaScript, provides a general introduction to JavaScript as... (an optional keyboard is also available) WebTV uses its own specialized browser for viewing web pages It does a respectable job of parsing standard HTML 3.2, but is unable to display frames, Java, JavaScript, ActiveX, or any format that requires a plug -in (except Shockwave Flash and RealAudio 3.0, which are built in) They have also created many new proprietary HTML tags for use only with WebTV Because... formatting of text elements in an HTML document Chapter 8, Creating Links, lists HTML tags related to linking one document to another, including imagemaps Chapter 9, Adding Images and Other Page Elements, focuses on the tags used for placing objects such as images, rules, or multimedia objects on a web page xiv Preface Web Design in a Nutshell, eMatter Edition Copyright © 2000 O’Reilly & Associates, Inc... display of background images In addition, some technologies, such as Java and Cascading Style Sheets are not available to users with Windows 3.0 (approximately 40% of AOL’s audience) JavaScript (and many other features) will not work for AOL’s Macintosh users (approximately 8%) Fortunately, AOL publishes a site specifically for web developers who want their sites to be accessible and attractive for AOL... O’Reilly’s Global Network Navigator, since sold to and put to rest by America Online), there was only one browser for viewing web pages and it ran exclusively on the Unix platform There were about a dozen tags that made any difference Designing a web page was a relatively simple task It isn’t so easy anymore With the explosion of the Web came an avalanche of new technologies, proprietary tags, and acronyms... related to form creation and provides an introduction to working with CGI scripts Chapter 13, Server Side Includes, provides an overview of Server Side Includes, including their capabilities and listings of the available elements and variables Part III, Graphics The chapters in this part provide background information on web graphics file formats as well as overviews of available tools and practical... alienating by relying on certain features such as Java or JavaScript Every HTML tag in Part II of this book is accompanied by a chart indicating which browsers support it Exceptional attribute support (or lack thereof) is noted in the descriptions following each tag Table 1-1 provides a general listing of popular browsers and the web features and technologies they support Anim GIFs Tables Frames Plug-ins... Creating exciting web features that depend on cutting-edge features does create an incentive for users to keep themselves up-to-date Splitting the Difference Far more commonly, designers take a more balanced approach to web site creation Designing web pages that “degrade gracefully” is the buzz phrase in web design circles This design incorporates the cutting-edge web technologies, such as DHTML or JavaScript,... Designing Graphics with the Web Palette, discusses the tools and techniques used in creating graphics with colors from the Web Palette Part IV, Multimedia and Interactivity The chapters in this part focus on the animation, audio, and interactive capabilities of the Web Chapter 18, Animated GIFs, looks at the creation and optimization of animated GIFs Chapter 19, Audio on the Web, provides an overview... make your images and page elements appear smaller as well If you create graphics and pages on a monitor with a relatively high resolution, say 1280×1024, be prepared for everything to look a lot bigger on standard 14" monitors running at 640×480 It is for this reason that web measurements are made in pixels, not inches Something that appears to be an inch wide on your system may look smaller or larger . Associates, 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. nonstreaming and streaming video file formats. Chapter 21, Interactivity, looks at Macromedia’s Flash and Director Shockwave formats as well as Java applets and
Ngày đăng: 21/12/2013, 05:17
Xem thêm: Tài liệu Web Design in a Nutshell: A Desktop Quick Reference doc, Tài liệu Web Design in a Nutshell: A Desktop Quick Reference doc
