Learning Web Design - A Beginner’s Guide to (X)HTML, Style Sheets, and Web Graphics

Everything you need to know to create professional web sites is right here. Learning Web Design starts from the beginning — defining how the Web and web pages work — and builds from there. By the end of the book, you'll have the skills to create multi-column CSS layouts with optimized graphic files, and you'll know how to get your pages up on the Web. This thoroughly revised edition teaches you how to build web sites according to modern design practices and professional standards. Learning Web Design explains: How to create a simple (X)HTML page, how to add links and images Everything you need to know about web standards — (X)HTML, DTDs, and more Cascading Style Sheets — formatting text, colors and backgrounds, using the box model, page layout, and more All about web graphics, and how to make them lean and mean through optimization The site development process, from start to finish Getting your pages on the Web — hosting, domain names, and FTP The book includes exercises to help you to learn various techniques, and short quizzes to make sure you're up to speed with key concepts. If you're interested in web design, Learning Web Design is the place to start. Learning Web Design 1 Preface 14 Part I Getting Started 16 Chapter 1 18 Where Do I Start? 18 Am I Too Late? 19 Where Do I Start? 19 What Do I Need to Learn? 20 Do I Need to Learn Java? 23 What Do I Need to Buy? 27 What You’ve Learned 33 Test Yourself 33 Chapter 2 34 How the Web Works 34 Serving Up Your Information 35 A Word About Browsers 35 Web Page Addresses (URLs) 36 The Anatomy of a Web Page 38 Putting It All Together 41 Test Yourself 43 Browser Versions 44 Chapter 3 44 The Nature of Web Design 44 Alternative Browsing Environments 47 User Preferences 50 Different Platforms 53 Connection Speed 54 Browser Window Size and Monitor Resolution 55 Monitor Color 59 Know Your Audience 62 Keeping the Big Picture in Mind 63 Test Yourself 63 Part II HTML Markup for Structure 64 Chapter 4 66 Creating a Simple Page 66 (HTML Overview) 66 A Web Page, Step by Step 66 Before We Begin, Launch a Text Editor 67 Step 1: Start with Content 70 Step 2: Give the Document Structure 72 Step 3: Identify Text Elements 75 Step 4: Add an Image 78 Step 5: Change the Look with a Style Sheet 81 When Good Pages Go Bad 82 Test Yourself 84 (X)HTML Review: Document Structure Elements 85 Chapter 5 86 Marking up Text 86 Building Blocks 87 Lists 91 Adding Line Breaks 94 The Inline Text Element Round-up 96 Generic Elements (div and span) 101 Some Special Characters 104 Putting It All Together 106 Test Yourself 108 (X)HTML Review: Text Elements 109 Chapter 6 110 Adding Links 110 The href Attribute 111 Linking to Pages on the Web 112 Linking Within Your Own Site 113 Targeting a New Browser Window 123 Mail Links 126 Test Yourself 126 (X)HTML Review: The Anchor Element 128 Chapter 7 130 Adding Images 130 First, a Word on Image Formats 130 The img Element 131 Imagemaps 138 Test Yourself 141 (X)HTML Review: Image and Imagemap Elements 142 Chapter 8 144 Basic Table Markup 144 How Tables Are Used 144 Minimal Table Structure 145 Table Headers 149 Spanning Cells 149 Cell Padding and Spacing 151 Captions and Summaries 153 Table Accessibility 154 Wrapping Up Tables 155 Test Yourself 157 (X)HTML Review: Table Elements 157 Chapter 9 158 Forms 158 How Forms Work 158 The form Element 160 Variables and Content 162 Form Accessibility Features 163 The Great Form Control Round-up 165 Form Layout and Design 177 Test Yourself 177 (X)HTML Review: Forms 178 Chapter 10 180 Understanding the Standards 180 Everything You’ve Wanted to Know About HTML But Were Afraid to Ask 180 Enter XHTML 184 From the Browser’s Point of View 189 Declaring the Document Type 189 Which One Should You Use? 191 Validating Your Documents 192 Character Encoding 195 Putting It All Together 196 Test Yourself 198 HTML Markup for Structure 64 Part III CSS For Presentation 200 Chapter 11 202 Cascading Style Sheets 202 The Benefits of CSS 202 How Style Sheets Work 203 The Big Concepts 209 Moving Forward with CSS 215 Test Yourself 217 Chapter 12 218 Formatting Text (Plus More Selectors) 218 The Font Properties 219 Changing Text Color 232 A Few More Selector Types 233 Text Line Adjustments 237 Underlines and Other “Decorations” 240 Changing Capitalization 241 Spaced Out 242 Test Yourself 245 CSS Review: Font and Text Properties 247 Chapter 13 248 Colors and Backgrounds (Plus Even More Selectors and External Style Sheets) 248 Specifying Color Values 248 Foreground Color 253 Background Color 254 Introducing.... Pseudoclass Selectors 255 Pseudoelement Selectors 257 Background Images 261 The Shorthand background Property 269 Finally, External Style Sheets 269 Style Sheets for Print (and Other Media) 272 Test Yourself 274 Review: Color and Background Properties 275 Chapter 14 276 Thinking Inside the Box (Padding, Borders, and Margins) 276 The Element Box 276 Setting the Content Dimensions 277 Padding 281 Borders 284 Margins 290 Assigning Display Roles 296 The Box Model in Review 297 Test Yourself 297 Review: Basic Box Properties 299 Chapter 15 300 Floating and Positioning 300 Normal Flow 300 Floating 301 Positioning Basics 310 Relative Positioning 311 Absolute Positioning 312 Fixed Positioning 322 Test Yourself 324 Review: Basic Layout Properties 325 Chapter 16 326 Page Layout with CSS 326 Page Layout Strategies 326 Fixed Layouts 329 Elastic Layouts 331 Page Layout Templates 333 Centering a Fixed Width Page 349 CSS Layouts in Review 350 Test Yourself 351 Chapter 17 352 CSS Techniques 352 Style Properties for Tables 352 Changing List Bullets and Numbers 355 Using Lists for Navigation 359 Image Replacement Techniques 362 CSS Rollovers 364 Wrapping Up Style Sheets 369 Test Yourself 369 Review: Table and List Properties 371 Part IV Creating Web Graphics 372 Chapter 18 374 Web Graphics Basics 374 Image Sources 374 Meet the Formats 377 Image Size and Resolution 388 Working with Transparency 392 Web Graphics 101 Summary 400 Test Yourself 400 Chapter 19 402 Lean and Mean Web Graphics 402 Why Optimize? 402 General Optimization Strategies 403 Optimizing GIFs 405 Optimizing JPEGs 409 Optimizing PNGs 415 Optimize to File Size 416 Optimization in Review 417 Test Yourself 417 Part V From Start to Finish 418 Chapter 20 420 The Site Development Process 420 1. Conceptualize and Research 420 2. Create and Organize Content 422 3. Develop the “Look and Feel” 423 4. Produce a Working Prototype 424 5. Test It 425 6. Launch the Site 428 7. Maintain the Site 428 The Development Process in Review 428 Test Yourself 429 Chapter 21 430 Getting Your Pages on the Web 430 www.“YOU”.com! 430 Finding Server Space 432 The Publishing Process 436 Transferring Files with FTP 438 Test Yourself 441 Appendix B 466 CSS 2.1 Selectors 466 Appendix A 442 Answers 442 Index 468