Learning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins

Transcription

1 Learning Web Design Third Edition A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer Niederst Robbins O'REILLY Beijing- Cambridge Farnham Koln Paris Sebastopol -Taipei -Tokyo

2 CONTENTS 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 -J 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

3 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 InlineText 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

4 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 TestYourself 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 TestYourself 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 UpTables 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 TestYourself 162 (X)HTML Review: Forms 163

5 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 TestYourself 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 Othef'Decorations" 225 Changing Capitalization 226 Spaced Out 227 TestYourself 230 Review: Font and Text Properties 232

6 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.* 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 «r 285 Floating ~ 286 Positioning Basics 295 Relative Positioning 296 Absolute Positioning 297 Fixed Positioning 307 TestYourself!'. 309 Review: Basic Layout Properties 310

7 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 TestYourself 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 TestYourself 385

8 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 TestYourself 402 Part V From Start to Finish Chapter 20 The Site Development Process Conceptualize and Research Create and Organize Content Develop the "Look and Feel" Produce a Working Prototype Test It, Launch the Site " " Maintain the Site 413 The Development Process in Review...,_ 413 Test Yourself 414 Chapter 21 Getting Your Pages on the Web ; 415 Finding Server Space 417 The Publishing Process T. 421 Transferring Files with FTP 423 Test Yourself 426

9 Appendix A Answers 427 Appendix B CSS 2.1 Selectors 451 Index 453