Contents x Chapter 16 Page Layout with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Page Layout Strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Fixed Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Elastic Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Page Layout Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 Centering a Fixed Width Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 CSS Layouts in Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 Chapter 17 CSS Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Style Properties for Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Changing List Bullets and Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 Using Lists for Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Image Replacement Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347 CSS Rollovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 Wrapping Up Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 Review: Table and List Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 Part IV Creating Web Graphics Chapter 18 Web Graphics Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Image Sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Meet the Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362 Image Size and Resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 Working with Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 Web Graphics 101 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 Contents xi Chapter 19 Lean and Mean Web Graphics . . . . . . . . . . . . . . . . . . . . . . 387 Why Optimize? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 General Optimization Strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 Optimizing GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Optimizing JPEGs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 Optimizing PNGs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Optimize to File Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 Optimization in Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Part V From Start to Finish Chapter 20 The Site Development Process . . . . . . . . . . . . . . . . . . . . . 405 1. Conceptualize and Research. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 2. Create and Organize Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 3. Develop the “Look and Feel” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 4. Produce a Working Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 5. Test It . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 6. Launch the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 7. Maintain the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 The Development Process in Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Chapter 21 Getting Your Pages on the Web. . . . . . . . . . . . . . . . . . . . . 415 www.“YOU”.com! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 Finding Server Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 The Publishing Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Transferring Files with FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426 Contents xii Appendix A Answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Appendix B CSS 2.1 Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 xiii Hello and welcome to the third edition of Learning Web Design! When I first started writing it, I figured, “It’s just an update I’ll just make a few tweaks and it will be done in a jiffy.” I couldn’t have been more wrong. As it turns out, pretty much everything about web design changed since I wrote the second edition four years ago. Most significantly, web designers as well as browser developers are finally abiding by the standards for writing and styling web pages set forth by the World Wide Web Consortium (W3C). You’ll learn a lot more about these standards throughout the book. What it means is that using HTML markup for visual effects is out—HTML for describing the meaning and structure of content is in. Table-based layouts are out—style sheet-driven layouts are in. And the font element, spacer GIFs, and other clever hacks of the past forget about it! They’re all history. This edition has been completely rewritten to be in compliance with the standards and modern web design practices. The markup chapters emphasize using HTML to describe your content accurately, not as a tool for formatting the appearance of text. And now you will find seven chapters on Cascading Style Sheets (CSS), where the second edition had just one. But like the first two editions, this book addresses the specific needs and con- cerns of beginners of all backgrounds, including seasoned graphic designers, programmers looking for a more creative outlet, office assistants, recent col- lege graduates, work-at-home moms, and anyone else wanting to learn how to design web sites. I’ve done my best to put the experience of sitting in my beginner web design class into a book, with exercises and tests along the way, so you get hands-on experience and can check your progress. I start at square one, with answers to common beginner questions and an explanation of how the Web works. By the end of the book, you’ll have the skills necessary to create multicolumn CSS layouts with optimized graphic files, and you’ll know how to get them on the Web. You can start at the very beginning, or feel free to jump in at any point. The Companion Web Site Be sure to visit the companion web site for this book at learningwebdesign.com . It features materials for the exercises, downloadable articles, lists of links from the book, updates, and other good stuff. The Companion Web Site Be sure to visit the companion web site for this book at learningwebdesign.com . It features materials for the exercises, downloadable articles, lists of links from the book, updates, and other good stuff. PREFACE Preface xiv Acknowledgments Whether you are reading this book on your own or using it as a companion to a web design course, I hope it gives you a good head start and that you have fun in the process. Acknowledgments I want to thank my editors, Brian Sawyer, Chuck Toporek, Linda Laflamme, and Steve Weiss, for their valuable input to this new edition. A special thank you goes to my technical reviewer, Aaron Gustafson, for his expert guidance, generosity, and for keeping on the straight and narrow when it comes to standards compliance. Thanks also to the others who contributed hands-on time to the creation of this book: Ron Bilodeau for the updated interior design, Rob Romano for the figure production, Chris Reilley for helping me envision some of the more complex figures, Sohaila Abdulali for copyediting, Reg Aubry for writing the index, and everyone else who helped with the project. Finally, I want to thank my Mom, Dad, brother Liam, and the whole Robbins clan for their inspiration and continued support while I labored to crank out this edition. And it pleases me greatly, Jeff and Arlo, to tell you that I am finally done writing. Thanks for putting up with me being half there. O’Reilly Would Like to Hear From You Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international/local) 707-829-0104 (fax) There is a web page for this book, which lists errata and additional informa- tion. You can access this page at: http://www.oreilly.com/catalog/9780596527525 To comment or ask technical questions about this book, send email to: bookquestions@oreilly.com For more information about books, conferences, software, Resource Centers, and the O’Reilly Network, see the O’Reilly web site at: http://www.oreilly.com Conventions Used in This Book The following typographic conventions are used in this book: Italic Used to indicate URLs, email addresses, filenames, and directory names, as well as for emphasis Colored roman text Used for special terms that are being defined and for cross- reference. Constant width Used to indicate code examples and keyboard commands Colored constant width Used to indicate (X)HTML tags and attributes, and used for emphasis in code examples. Constant width italic Used to indicate placeholders for attribute and style sheet property values. Conventions Used in This Book The following typographic conventions are used in this book: Italic Used to indicate URLs, email addresses, filenames, and directory names, as well as for emphasis Colored roman text Used for special terms that are being defined and for cross- reference. Constant width Used to indicate code examples and keyboard commands Colored constant width Used to indicate (X)HTML tags and attributes, and used for emphasis in code examples. Constant width italic Used to indicate placeholders for attribute and style sheet property values. IN THIS PART Chapter 1 Where Do I Start? Chapter 2 How the Web Works Chapter 3 The Nature of Web Design GETTING STARTED PART I 3 IN THIS CHAPTER Am I too late? Where do I start? What do I need to learn? Do I need to learn Java? What other languages do I need to know? What software and equipment do I need to buy? The Web has been around for well over a decade now, experiencing euphoric early expansion, an economic-driven bust, an innovation-driven rebirth, and constant evolution along the way. One thing is certain: the Web as a com- munication and commercial medium is here to stay. For many people, it’s a call to action—a new career opportunity, an incentive to keep up with competitors, or just a chance to get stuff out there for the world to see. But the world of web design can also seem overwhelming. Through my experience teaching web design courses and workshops, I’ve had the opportunity to meet people of all backgrounds who are inter ested in learning how to build web pages. Allow me to introduce you to just a few: “I’ve been a print designer for 17 years, and now all my clients want web sites.” “I work as a secretary in a small office. My boss has asked me to put together a small internal web site to share company information among employees.” “I’ve been a programmer for years, but I want to try my hand at more visual design. I feel like the Web is a good opportunity to explore new skills.” “I am an artist and I want to know how to get samples of my paintings and sculpture online.” “I’m a designer who has watched all my colleagues switch to web design in the last few years. I’m curious about it, but I feel like I may be too late.” Whatever the motivation, the first question is always the same: “Where do I start?” It may seem like there is an overwhelming amount of stuff to learn and it’s not easy to know where to jump in. But you have to start somewhere. This chapter attempts to put the learning curve in perspective by answering the most common questions I get asked by people ready to make the leap. It provides an introduction to the disciplines, technologies, and tools associated with web design. WHERE DO I START? CHAPTER 1 Part I: Getting Started 4 Am I Too Late? Am I Too Late? That’s an easy one—absolutely not! Although it may seem that everyone in the whole world has a personal web page, or that your colleagues are all light- years ahead of you in web experience, I can assure you that you’re not late. The Web has become an essential part of standard business practice. We’re at the point where we just assume that a business, regardless of its size, will have a useful web site. It also remains a uniquely powerful tool for self-publishing, whether to a small circle of friends or to a worldwide audience. We can be certain that there will be a steady need for web designers and developers. Where Do I Start? Your particular starting point will no doubt depend on your background and goals. However, a good first step for everyone is to get a basic understanding of how the Web and web pages work. That you are reading this book now shows that you are already on the right track. Once you learn the fundamen- tals, there are plenty of resources on the Web and in bookstores for you to further your learning in specific areas. One way to get up to speed quickly is to take an introductory web design class. If you don’t have the luxury of a full-semester course, even a weekend or one-day seminar can be extremely useful in getting over that first hump. You’ll learn that the term “web design” has come to encompass many skills, and you don’t necessarily need to learn all of them (most people don’t). This chapter introduces the various disciplines and paths you may take. Similarly, there are many levels of involvement in web design, from just build- ing a site for yourself to making it a full-blown career. You may enjoy being a full-service web site developer or just specializing in one skill, like Flash development. There are a lot of ways you can go. If your involvement in web design is purely at the hobbyist level, or if you have just one or two web projects you’d like to publish, you may find that a combination of personal research (like reading this book), taking advantage of available templates, and perhaps even investing in solid web design tools (such as Dreamweaver from Adobe) may be all you need to accomplish the task at hand. If you are interested in pursuing web design as a career, you’ll need to bring your skills up to a professional level. Employers may not require a web design degree, but they will expect to see sample web sites that demonstrate your skills and experience. These sites can be the result of class assignments, personal projects, or a simple site for a small business. What’s important is that they look professional and have clean, working HTML and style sheets behind the scenes. Getting an entry-level job and working as part of a team is The first step is understanding the fundamentals of how the Web works. I Just Want a Blog! You don’t necessarily need to become a web designer to start publishing your words and pictures on the Web. You can start your own “blog” or personal journal site using one of the free or inexpensive blog hosting services. These services provide templates that spare you the need to learn HTML (although it still doesn’t hurt). These are three of the most popular as of this writing: Blogger ( www.blogger.com ) TypePad ( www.typepad.com ) LiveJournal ( www.livejournal. com ) If you use a Mac, Apple’s iWeb software makes it simple to publish blogs (including video) using one of several stylish templates. What Do I Need to Learn? Chapter 1, Where Do I Start 5 a great way to learn how larger sites are constructed and can help you decide which aspects of web design you would like to pursue. What Do I Need to Learn? This one’s a big question. The short answer is “not everything.” A more accu- rate answer depends on where you are starting and what you want to do. As mentioned earlier, the term “web design” has become a catch-all for a process that actually encompasses a number of different disciplines, from graphic design to serious programming. We’ll take a look at each of them. If you are designing a small web site on your own, you will need to wear many hats. The good news is that you probably won’t notice. Consider that the day-to-day upkeep of your household requires you to be part-time chef, housecleaner, accountant, diplomat, gardener, and construction worker—but to you it’s just the stuff you do around the house. In the same way, as a solo web designer, you’ll be part-time graphic designer, writer, producer, and infor- mation architect, but to you, it’ll just feel like “making web pages.” Nothing to worry about. There are also specialists out there whom you can hire to fill in the skills you don’t have. For example, I have been creating web sites for more than a decade and I still hire programmers and multimedia developers when my clients require those features. That allows me to focus on the parts I do well. Large-scale web sites are almost always created by a team of people, number- ing from a handful to hundreds. In this scenario, each member of the team focuses on just one facet of the site building process. If that is the case, you may be able to simply adapt your current set of skills and interests to the new medium. The following are some of the core disciplines involved in the web design process, along with brief descriptions of the skills required in each area. Graphic design Because the Web is a visual medium, web pages require attention to presenta- tion and design. The graphic designer makes decisions regarding everything you see on a web page: graphics, type, colors, layout, etc. As in the print world, graphic designers play an important role in the success of the final product. If you work as a graphic designer in the web design process, you may never need to learn any backend programming languages. (I didn’t.) If you are interested in doing the visual design of commercial sites profes- sionally, I strongly recommend graphic design training as well as a strong proficiency in Adobe Photoshop (the industry standard). If you are already a graphic designer, you will be able to adapt your skills to the Web easily. If you are not interested in becoming a jack-of-all- trades solo web designer, you may choose to specialize and work as part of a team or as a freelance contractor. If you are not interested in becoming a jack-of-all- trades solo web designer, you may choose to specialize and work as part of a team or as a freelance contractor. “Web design” actually combines a number of disciplines, including: Graphic design Information design Interface design HTML, style sheet, and graphic production Scripting and programming Multimedia A t A G l A n c e . the web design process, along with brief descriptions of the skills required in each area. Graphic design Because the Web is a visual medium, web pages require attention to presenta- tion and design. . the book, updates, and other good stuff. The Companion Web Site Be sure to visit the companion web site for this book at learningwebdesign.com . It features materials for the exercises, downloadable. of web design can also seem overwhelming. Through my experience teaching web design courses and workshops, I’ve had the opportunity to meet people of all backgrounds who are inter ested in learning