Web Design Garage
Published on 3. February 2005
Book
Paperback/Softback
552 pages
978-0-13-148199-2 (ISBN)
Description
Tinker with the tools of Web design-in the Garage!
Learn how to construct cool and interactive Web sites with this hands-on guide to the world of Web design and usability. In this title from Prentice Hall PTR's Garage Series, author Marc Campbell shows you the "ins and outs" of designing sites with HTML, JavaScript, and CSS as core technologies. Using layout diagrams and graphics to illustrate your journey, Campbell takes you through every step of designing Web sites, from basic layout and usability to uploading your site onto the Web. Want to learn more on a specific topic? Flip to one of the book's "links" that help you delve deeper into certain areas, allowing you to browse the text quickly and easily!
Specific topics covered include
Managing pop-up windows
Working with scripts and style sheets
Controlling design space with HTML and CSS
Making rollover graphics
Using text elements properly
Creating e-mail links and hyperlinks
Embedding media in Web pages
Choosing a Web host
Testing and uploading Web sites
Whether you're new to Web design or you "speak" HTML as a second language, Web Design Garage will help you discover the solutions you need to create fun and effective Web sites.
Learn how to construct cool and interactive Web sites with this hands-on guide to the world of Web design and usability. In this title from Prentice Hall PTR's Garage Series, author Marc Campbell shows you the "ins and outs" of designing sites with HTML, JavaScript, and CSS as core technologies. Using layout diagrams and graphics to illustrate your journey, Campbell takes you through every step of designing Web sites, from basic layout and usability to uploading your site onto the Web. Want to learn more on a specific topic? Flip to one of the book's "links" that help you delve deeper into certain areas, allowing you to browse the text quickly and easily!
Specific topics covered include
Managing pop-up windows
Working with scripts and style sheets
Controlling design space with HTML and CSS
Making rollover graphics
Using text elements properly
Creating e-mail links and hyperlinks
Embedding media in Web pages
Choosing a Web host
Testing and uploading Web sites
Whether you're new to Web design or you "speak" HTML as a second language, Web Design Garage will help you discover the solutions you need to create fun and effective Web sites.
More details
Language
English
Place of publication
Upper Saddle River
United States
Publishing group
Pearson Education (US)
Target group
College/higher education
Dimensions
Height: 178 mm
Width: 232 mm
Thickness: 23 mm
Weight
780 gr
ISBN-13
978-0-13-148199-2 (9780131481992)
Copyright in bibliographic data and cover images is held by Nielsen Book Services Limited or by the publishers or by their respective licensors: all rights reserved.
Schweitzer Classification
Person
Marc Campbell is a freelance writer and Web designer/developer. He's been building Web sites professionally since 1997 and has helped design fan-community destination sites, such as www.dccomics.com and www.madmag.com; state government service portals; and e-business applications. He participates in the Macromedia Dreamweaver beta program and is a Macromedia-certified Dreamweaver Developer. In addition, Marc has taught several sections of a ten-week Web design and graphics course for the Millenium Institute of Computers in Connecticut and New Jersey.
Content
Preface xvPart I: Design and Usability Topics 1Topic 1: Designing to Aid Navigation 3Topic 2: Grouping Similar Functions 9Topic 3: Designing Graphics for Clicks 17Topic 4: Achieving Balance 25Topic 5: Choosing Colors 33Choosing Text and Background Colors 33
Choosing Link Colors 37
Choosing Interface Colors 38
Topic 6: Designing for Accessibility 41Making Images Accessible 42
Making Multimedia Accessible 44
Managing Your Use of Color 45
Topic 7: Leaving Breadcrumb Trails 47Topic 8: Using Jump Menus 53Topic 9: Managing Popup Windows 59Making Popups 61
Topic 10: Creating Popup Menus 67Understanding Layers 68
Laying Out Popup Menus 69
Topic 11: Providing a Way Back 79Topic 12: Working with Scripts and Style Sheets 83Embedding Scripts 83
Embedding Style Sheets 85
Attaching Scripts 86
Attaching Style Sheets 86
BLOG: Embedding or Attaching? 89Topic 13: Launching Scripts with Links 91BLOG: JavaScript Links or onClick Links? 93Part II: Layout Topics 95Topic 14: Creating Fixed-Width Layouts with Tables 97BLOG: HTML or CSS for Layout? 103Topic 15: Creating Fixed-Width Layouts with CSS 105Topic 16: Centering Fixed-Width CSS Layouts 111Topic 17: Creating Liquid Layouts with Tables 115Topic 18: Creating Liquid Layouts with CSS 121Topic 19: Slicing Images for Layout Tables 127Topic 20: Creating Multicolumn Layouts with Tables 133Topic 21: Creating Multicolumn Layouts with CSS 137Topic 22: Preventing a Nav Bar from Breaking 141Topic 23: Coloring Table Cells 149Topic 24: Coloring and Formatting CSS Divs 155Topic 25: Controlling Design Space with HTML 163Topic 26: Controlling Design Space with CSS 165Part III: Image Topics 167Topic 27: Choosing the Right Image File Type 169Topic 28: Optimizing Web Images 171Optimizing Resolution 172
Optimizing Image Size 173
Optimizing the Palette in GIFs and PNGs 174
Optimizing the Compression in JPEGs 174
Topic 29: Transforming Images with HTML Attributes 177Topic 30: Positioning Inline Images with HTML 181Topic 31: Floating Inline Images with CSS 185Topic 32: Designing Button States 189Topic 33: Making Rollover Graphics 193Topic 34: Making Images More Accessible 197Topic 35: Creating Image Maps 199Topic 36: Making Image Maps More Accessible 203Topic 37: Using Background Images in Table Cells 207Topic 38: Using Background Images in CSS Divs 211Topic 39: Using Background Images on Web Pages 215Part IV: Text Topics 219Topic 40: Using Text Elements Properly 221Working with Header Tags 222
Marking up Paragraphs 224
Using Quote Elements 224
Displaying Addresses 225
Topic 41: Using Phrase Elements Properly 227Topic 42: Adding Cascading Style Sheets 231Writing CSS 232
Topic 43: Replacing Formatting Tags with CSS 243Topic 44: Creating Custom Formatting Styles 247Topic 45: Changing the Look of a Text Element 251Defining Contextual Selectors 251
Defining Child Selectors 254
Defining Sibling Selectors 255
Mixing It Up 257
Topic 46: Defining Class Styles 259Forming an Exclusive Club 262
Topic 47: Controlling the Typeface 265Troubleshooting Fonts 266
Choosing the Best Typeface 268
Topic 48: Controlling Type Size 269Using the Font Tag 269
Using the Font-Size Attribute 270
BLOG: Sizing up Type Sizing 273Topic 49: Controlling Spacing 275Controlling Space around Elements 275
Controlling Space inside Elements 277
Controlling Space between Lines of Type 277
Controlling Space between Words 278
Controlling Space between Letters 279
Topic 50: Controlling Justified and Ragged Type 281Topic 51: Controlling Indents 285Topic 52: Building Lists 291Nesting Lists in HTML 293
Adjusting List Properties with CSS 295
Topic 53: Highlighting Text with Color 303Topic 54: Rehabilitating Horizontal Rules 307Creating End Signs 310
Topic 55: Adding a Dateline and Timestamp 311Topic 56: Designing Data Tables 319Making the Most of the Grouping Tags 323
Working with Colspans and Rowspans 324
Adjusting Cellpadding and Cellspacing 328
Changing the Border 331
Improving Accessibility 335
Topic 57: Using Pseudo-Elements 341Topic 58: Defining ID Styles 347Part V: Link Topics 349Topic 59: Applying Styles to Hyperlinks 351BLOG: In Defense of the Hyperlink Underline 357Topic 60: Making Rollover Hyperlinks 359Topic 61: Choosing the Right Path 363Using Absolute Paths 363
Using Document-Relative Paths 364
Using Root-Relative Paths 366
Topic 62: Changing the Color of a Single Hyperlink 369Changing the Default Color for All Link States 369
Changing the Default Color for Individual Link States 370
Topic 63: Choosing the Right Text for a Hyperlink 373Topic 64: Creating ScreenTips for Hyperlinks 379Topic 65: Opening a New Browser Window 381Topic 66: Using Named Anchors 383Setting Named Anchors 383
Linking to Named Anchors 385
Topic 67: Creating Email Links 387Part VI: Form Topics 389Topic 68: Working with Form Widgets 391Working with Generic Buttons 392
Working with Checkboxes 393
Working with File Fields 395
Working with Hidden Fields 396
Working with Image Fields 397
Working with Lists 399
Working with Menus 401
Working with Password Fields 402
Working with Radio Buttons 403
Working with Reset Buttons 405
Working with Submit Buttons 406
Working with Text Areas 407
Working with Text Fields 408
Topic 69: Applying Styles to Text Widgets 411Changing the Text Style 411
Changing the Colors and the Border 414
Topic 70: Validating Form Input 417Topic 71: Setting the Tab Order 425Topic 72: Working with Fieldsets 429Topic 73: Working with Labels 437
Part VII: Tricks Topics 441Topic 74: Embedding Media 443Topic 75: Automatically Refreshing the Page 449Topic 76: Automatically Redirecting the Browser 453Topic 77: Displaying Random Content 457Topic 78: Displaying a Browser Alert 467Topic 79: Displaying a "You Are Now Leaving" Popup 473Part VIII: Basic Training Topics 475Topic 80: Creating HTML Documents 477Organizing Your Web Site 482
Topic 81: Adding Keywords and Page Descriptions 487Topic 82: Blocking Parts of Your Site from Search Engines 489Topic 83: Testing Your Site 493Topic 84: Choosing a Web Host 495Finding a Web Host 495
Considering Features 497
Topic 85: Uploading Your Site 501Topic 86: Validating Your Source Code 503Glossary 505Index 515
Choosing Link Colors 37
Choosing Interface Colors 38
Topic 6: Designing for Accessibility 41Making Images Accessible 42
Making Multimedia Accessible 44
Managing Your Use of Color 45
Topic 7: Leaving Breadcrumb Trails 47Topic 8: Using Jump Menus 53Topic 9: Managing Popup Windows 59Making Popups 61
Topic 10: Creating Popup Menus 67Understanding Layers 68
Laying Out Popup Menus 69
Topic 11: Providing a Way Back 79Topic 12: Working with Scripts and Style Sheets 83Embedding Scripts 83
Embedding Style Sheets 85
Attaching Scripts 86
Attaching Style Sheets 86
BLOG: Embedding or Attaching? 89Topic 13: Launching Scripts with Links 91BLOG: JavaScript Links or onClick Links? 93Part II: Layout Topics 95Topic 14: Creating Fixed-Width Layouts with Tables 97BLOG: HTML or CSS for Layout? 103Topic 15: Creating Fixed-Width Layouts with CSS 105Topic 16: Centering Fixed-Width CSS Layouts 111Topic 17: Creating Liquid Layouts with Tables 115Topic 18: Creating Liquid Layouts with CSS 121Topic 19: Slicing Images for Layout Tables 127Topic 20: Creating Multicolumn Layouts with Tables 133Topic 21: Creating Multicolumn Layouts with CSS 137Topic 22: Preventing a Nav Bar from Breaking 141Topic 23: Coloring Table Cells 149Topic 24: Coloring and Formatting CSS Divs 155Topic 25: Controlling Design Space with HTML 163Topic 26: Controlling Design Space with CSS 165Part III: Image Topics 167Topic 27: Choosing the Right Image File Type 169Topic 28: Optimizing Web Images 171Optimizing Resolution 172
Optimizing Image Size 173
Optimizing the Palette in GIFs and PNGs 174
Optimizing the Compression in JPEGs 174
Topic 29: Transforming Images with HTML Attributes 177Topic 30: Positioning Inline Images with HTML 181Topic 31: Floating Inline Images with CSS 185Topic 32: Designing Button States 189Topic 33: Making Rollover Graphics 193Topic 34: Making Images More Accessible 197Topic 35: Creating Image Maps 199Topic 36: Making Image Maps More Accessible 203Topic 37: Using Background Images in Table Cells 207Topic 38: Using Background Images in CSS Divs 211Topic 39: Using Background Images on Web Pages 215Part IV: Text Topics 219Topic 40: Using Text Elements Properly 221Working with Header Tags 222
Marking up Paragraphs 224
Using Quote Elements 224
Displaying Addresses 225
Topic 41: Using Phrase Elements Properly 227Topic 42: Adding Cascading Style Sheets 231Writing CSS 232
Topic 43: Replacing Formatting Tags with CSS 243Topic 44: Creating Custom Formatting Styles 247Topic 45: Changing the Look of a Text Element 251Defining Contextual Selectors 251
Defining Child Selectors 254
Defining Sibling Selectors 255
Mixing It Up 257
Topic 46: Defining Class Styles 259Forming an Exclusive Club 262
Topic 47: Controlling the Typeface 265Troubleshooting Fonts 266
Choosing the Best Typeface 268
Topic 48: Controlling Type Size 269Using the Font Tag 269
Using the Font-Size Attribute 270
BLOG: Sizing up Type Sizing 273Topic 49: Controlling Spacing 275Controlling Space around Elements 275
Controlling Space inside Elements 277
Controlling Space between Lines of Type 277
Controlling Space between Words 278
Controlling Space between Letters 279
Topic 50: Controlling Justified and Ragged Type 281Topic 51: Controlling Indents 285Topic 52: Building Lists 291Nesting Lists in HTML 293
Adjusting List Properties with CSS 295
Topic 53: Highlighting Text with Color 303Topic 54: Rehabilitating Horizontal Rules 307Creating End Signs 310
Topic 55: Adding a Dateline and Timestamp 311Topic 56: Designing Data Tables 319Making the Most of the Grouping Tags 323
Working with Colspans and Rowspans 324
Adjusting Cellpadding and Cellspacing 328
Changing the Border 331
Improving Accessibility 335
Topic 57: Using Pseudo-Elements 341Topic 58: Defining ID Styles 347Part V: Link Topics 349Topic 59: Applying Styles to Hyperlinks 351BLOG: In Defense of the Hyperlink Underline 357Topic 60: Making Rollover Hyperlinks 359Topic 61: Choosing the Right Path 363Using Absolute Paths 363
Using Document-Relative Paths 364
Using Root-Relative Paths 366
Topic 62: Changing the Color of a Single Hyperlink 369Changing the Default Color for All Link States 369
Changing the Default Color for Individual Link States 370
Topic 63: Choosing the Right Text for a Hyperlink 373Topic 64: Creating ScreenTips for Hyperlinks 379Topic 65: Opening a New Browser Window 381Topic 66: Using Named Anchors 383Setting Named Anchors 383
Linking to Named Anchors 385
Topic 67: Creating Email Links 387Part VI: Form Topics 389Topic 68: Working with Form Widgets 391Working with Generic Buttons 392
Working with Checkboxes 393
Working with File Fields 395
Working with Hidden Fields 396
Working with Image Fields 397
Working with Lists 399
Working with Menus 401
Working with Password Fields 402
Working with Radio Buttons 403
Working with Reset Buttons 405
Working with Submit Buttons 406
Working with Text Areas 407
Working with Text Fields 408
Topic 69: Applying Styles to Text Widgets 411Changing the Text Style 411
Changing the Colors and the Border 414
Topic 70: Validating Form Input 417Topic 71: Setting the Tab Order 425Topic 72: Working with Fieldsets 429Topic 73: Working with Labels 437
Part VII: Tricks Topics 441Topic 74: Embedding Media 443Topic 75: Automatically Refreshing the Page 449Topic 76: Automatically Redirecting the Browser 453Topic 77: Displaying Random Content 457Topic 78: Displaying a Browser Alert 467Topic 79: Displaying a "You Are Now Leaving" Popup 473Part VIII: Basic Training Topics 475Topic 80: Creating HTML Documents 477Organizing Your Web Site 482
Topic 81: Adding Keywords and Page Descriptions 487Topic 82: Blocking Parts of Your Site from Search Engines 489Topic 83: Testing Your Site 493Topic 84: Choosing a Web Host 495Finding a Web Host 495
Considering Features 497
Topic 85: Uploading Your Site 501Topic 86: Validating Your Source Code 503Glossary 505Index 515