www.it-ebooks.info Learning Web Design www.it-ebooks.info www.it-ebooks.info Learning Web Design Third Edition A Beginner’s Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer Niederst Robbins Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo www.it-ebooks.info Learning Web Design, Third Edition A Beginner’s Guide to (X)HTML, Style Sheets, and Web Graphics by Jennifer Niederst Robbins Copyright © 2007 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 Media books may be purchased for educational, business, or sales promotional use. Online editions are also avail- able for most titles (safari.oreilly.com). For more information, contact our corporate/institutional sales department: 800-998- 9938 or corporate@oreilly.com. Editor: Linda Laflamme Production Editor: Philip Dangler Cover Designer: Mark Paglietti Interior Designer: Ron Bilodeau Print History: March 2001: First edition. June 2003: Second edition. June 2007: Third edition. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. “O’Reilly Digital Studio” and related trade dress are trademarks of O’ReillyMedia, Inc. Photoshop, Illustrator, Dreamweaver, Elements, HomeSite, and Fireworks are either regis- tered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Microsoft and Expression Web are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trade- marks. Where those designations appear in this book, and O’ReillyMedia, Inc. was aware of a trademark claim, the designa- tions 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 TM , a durable and flexible lay-flat binding. ISBN-10: 0-596-52752-7 ISBN-13: 978-0-596-52752-5 [C] www.it-ebooks.info v Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Part I Getting Started Chapter 1 Where Do I Start? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Am I Too Late? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Where Do I Start? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 What Do I Need to Learn? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Do I Need to Learn Java? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 What Do I Need to Buy? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 What You’ve Learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Chapter 2 How the Web Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 The Internet Versus the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Serving Up Your Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 A Word About Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Web Page Addresses (URLs) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 The Anatomy of a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Putting It All Together. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Browser Versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 CONTENTS www.it-ebooks.info Contents vi Chapter 3 The Nature of Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Alternative Browsing Environments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 User Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Different Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Connection Speed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Browser Window Size and Monitor Resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Monitor Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Know Your Audience. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Keeping the Big Picture in Mind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Part II HTML Markup for Structure Chapter 4 Creating a Simple Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 (HTML Overview) A Web Page, Step by Step . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Before We Begin, Launch a Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Step 1: Start with Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Step 2: Give the Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Step 3: Identify Text Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Step 4: Add an Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Step 5: Change the Look with a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 When Good Pages Go Bad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 (X)HTML Review: Document Structure Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Chapter 5 Marking up Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Building Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Adding Line Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 The Inline Text Element Round-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Generic Elements (div and span) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Some Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Putting It All Together. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 (X)HTML Review: Text Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 www.it-ebooks.info Contents vii Chapter 6 Adding Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 The href Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Linking to Pages on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Linking Within Your Own Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Targeting a New Browser Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Mail Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 (X)HTML Review: The Anchor Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Chapter 7 Adding Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 First, a Word on Image Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 The img Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Imagemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 (X)HTML Review: Image and Imagemap Elements . . . . . . . . . . . . . . . . . . . . . . 127 Chapter 8 Basic Table Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 How Tables Are Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Minimal Table Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Table Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Spanning Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Cell Padding and Spacing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Captions and Summaries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Table Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Wrapping Up Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 (X)HTML Review: Table Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Chapter 9 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 How Forms Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 The form Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Variables and Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Form Accessibility Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 The Great Form Control Round-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Form Layout and Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 (X)HTML Review: Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 www.it-ebooks.info Contents viii Chapter 10 Understanding the Standards . . . . . . . . . . . . . . . . . . . . . . 165 Everything You’ve Wanted to Know About HTML But Were Afraid to Ask 165 Enter XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 From the Browser’s Point of View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Declaring the Document Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Which One Should You Use? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Validating Your Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Character Encoding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Putting It All Together. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Part III CSS For Presentation Chapter 11 Cascading Style Sheets Orientation . . . . . . . . . . . . . . . . 187 The Benefits of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 How Style Sheets Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 The Big Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Moving Forward with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Chapter 12 Formatting Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 (Plus More Selectors) The Font Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Changing Text Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 A Few More Selector Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Text Line Adjustments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Underlines and Other “Decorations” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Changing Capitalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Spaced Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Review: Font and Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 www.it-ebooks.info Contents ix Chapter 13 Colors and Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 (Plus Even More Selectors and External Style Sheets) Specifying Color Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Foreground Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Background Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Introducing Pseudoclass Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Pseudoelement Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 The Shorthand background Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Finally, External Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Style Sheets for Print (and Other Media) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Review: Color and Background Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Chapter 14 Thinking Inside the Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 (Padding, Borders, and Margins) The Element Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Setting the Content Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Assigning Display Roles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 The Box Model in Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Review: Basic Box Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Chapter 15 Floating and Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Normal Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Floating . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 Positioning Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Relative Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Fixed Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Test Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Review: Basic Layout Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 www.it-ebooks.info [...]... (Peachpit Press, 2003) The Non-Designer’s Web Book, Third Edition by Robin Williams and John Tollett (Peachpit Press, 2005) Design Basics, Sixth Edition by David Lauer and Stephen Pentak (Harcourt College Publishers, 2004) Graphic Design Solutions, Third Edition by Robin Landa (Thomson Delmar Learning, 2005) Information design One easily overlooked aspect of web design is information design, the organization... graphics are a big part of web design, even hobbyist web designers will need to know how to use some image-editing software, at minimum If you don’t have visual design experience, you may want to do some personal research on the fundamentals of graphic design The following books will give you a good start on rounding out your design skills The Non-Designer’s Design Book, Second Edition by Robin Williams... PREFACE 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... aspect of web development, check out these books: Information Architecture for the World Wide Web: Designing Large-Scale Web Sites, Third Edition by Lou Rosenfeld and Peter Morville (O’Reilly, 2006) for a good overview Information Architecture: Blueprints for the Web, by Christina Wodtke (New Riders, 2002) Interface design If graphic design is concerned with how the page looks, interface design focuses... following questions:  What are your web design goals? To become a professional web designer? To make personal web sites only?   Which aspects of web design interest you the most?  What current skills do you have that will be useful in creating web pages?  Which skills will you need to brush up on?  Which hardware and software tools do you already have for web design?  Which tools do you need to... Make Me Think, A Common Sense Approach to Web Usability, Second Edition, by Steve Krug (New Riders, 2005) O NL I NE R E S O U R CE The topics of information and interface design are covered in more detail in my article “Building Usable Web Sites”, available as a PDF download at www learningwebdesign.com The Elements of User Experience: User-Centered Design for the Web, by Jesse James Garrett (New Riders,... disciplines involved in the web design process, along with brief descriptions of the skills required in each area If you are not interested in becoming a jack-of-alltrades solo web designer, you may choose to specialize and work as part of a team or as a freelance contractor Graphic design Because the Web is a visual medium, web pages require attention to presentation and design The graphic designer makes decisions... introduce you to the most common and proven tools for web design Note that you can download trial versions of many of these programs from the company web sites, as listed in the At a Glance: Popular Web Design Software sidebar later in this chapter Web page authoring Web- authoring tools are similar to desktop publishing tools, but the end product is a web page (an (X)HTML file and its related style sheet... to see But the world of web design can also seem overwhelming What do I need to learn? Through my experience teaching web design courses and workshops, I’ve had the opportunity to meet people of all backgrounds who are interested 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.” Am I too late?... 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 professionally, I strongly recommend graphic design . www.it-ebooks.info Learning Web Design www.it-ebooks.info www.it-ebooks.info Learning Web Design Third Edition A Beginner’s Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer. Taipei • Tokyo www.it-ebooks.info Learning Web Design, Third Edition A Beginner’s Guide to (X)HTML, Style Sheets, and Web Graphics by Jennifer Niederst