Table of Contents · Table of Contents Foreword xvii Introduction xix Part I Starting Out 1 1...
6
Table of Contents Foreword xvii Introduction xix Part I Starting Out 1 1 Planning and Structuring Content . . . . . . . . . . . . . . . . . .3 Know Your Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3 Customer Types: Toma - to or Tomäto . . . . . . . . . . . . . . . . .4 Reader Types Versus Customer Types . . . . . . . . . . . . . . . .6 Experience Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 Liberation Through Audience Limitations . . . . . . . . . . . . .8 Gathering Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 Where Things Go Wrong . . . . . . . . . . . . . . . . . . . . . . . . .10 Getting the Content Right: I’ve Learned This Lesson Before, But Never Like This . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 The Mistake of Design Before Content . . . . . . . . . . . . . . .14 Ensure Proper Communication . . . . . . . . . . . . . . . . . . . . .16 Guide, Don’t Tell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 Structured Markup Is Why We Are Here in the First Place . . . .17 HTML Terrorists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 Blame the Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 CSS: Terrorist Rehabilitation . . . . . . . . . . . . . . . . . . . . . . . . .19 Content Structuring Exercise . . . . . . . . . . . . . . . . . . . . . .22 Include Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24 Review Content for Design Possibilities . . . . . . . . . . . . . . .29 2 Designing for the Unknown . . . . . . . . . . . . . . . . . . . . . . .31 Web-Safe Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32 Using Web-Safe Colors . . . . . . . . . . . . . . . . . . . . . . . . . . .33 HTML Tables for Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . .33 Types of Web Page Layouts . . . . . . . . . . . . . . . . . . . . . . . . .37 Solid Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 Liquid Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 Suspension Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39 Problems Attempting to be Exact on the Web . . . . . . . . . . . .39 Use Percentages When Possible . . . . . . . . . . . . . . . . . . . .44 Ems as an Alternative . . . . . . . . . . . . . . . . . . . . . . . . . . . .46 Vertical Values, Parent’s Width . . . . . . . . . . . . . . . . . . . . .46 Practice Is Much Different Than Theory . . . . . . . . . . . . . .47 Pushpin Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Why to Use a Pushpin . . . . . . . . . . . . . . . . . . . . . . . . . . .52 Contents v
Transcript of Table of Contents · Table of Contents Foreword xvii Introduction xix Part I Starting Out 1 1...
Table of ContentsForeword xvii
Introduction xix
Part I Starting Out 1
1 Planning and Structuring Content . . . . . . . . . . . . . . . . . .3
Know Your Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3Customer Types: Toma-to or Tomäto . . . . . . . . . . . . . . . . .4Reader Types Versus Customer Types . . . . . . . . . . . . . . . .6Experience Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7Liberation Through Audience Limitations . . . . . . . . . . . . .8
Gathering Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10Where Things Go Wrong . . . . . . . . . . . . . . . . . . . . . . . . .10Getting the Content Right: I’ve Learned This Lesson Before, But Never Like This . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13The Mistake of Design Before Content . . . . . . . . . . . . . . .14Ensure Proper Communication . . . . . . . . . . . . . . . . . . . . .16Guide, Don’t Tell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Structured Markup Is Why We Are Here in the First Place . . . .17HTML Terrorists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18Blame the Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
CSS: Terrorist Rehabilitation . . . . . . . . . . . . . . . . . . . . . . . . .19Content Structuring Exercise . . . . . . . . . . . . . . . . . . . . . .22Include Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24Review Content for Design Possibilities . . . . . . . . . . . . . . .29
2 Designing for the Unknown . . . . . . . . . . . . . . . . . . . . . . .31
Web-Safe Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32Using Web-Safe Colors . . . . . . . . . . . . . . . . . . . . . . . . . . .33
HTML Tables for Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Types of Web Page Layouts . . . . . . . . . . . . . . . . . . . . . . . . .37Solid Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37Liquid Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38Suspension Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39
Problems Attempting to be Exact on the Web . . . . . . . . . . . .39Use Percentages When Possible . . . . . . . . . . . . . . . . . . . .44Ems as an Alternative . . . . . . . . . . . . . . . . . . . . . . . . . . . .46Vertical Values, Parent’s Width . . . . . . . . . . . . . . . . . . . . .46Practice Is Much Different Than Theory . . . . . . . . . . . . . .47
Pushpin Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47Why to Use a Pushpin . . . . . . . . . . . . . . . . . . . . . . . . . . .52
Contents v
00 2638 FM 8/26/02 12:24 PM Page v
Part II Using CSS 53
3 Setting Up Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Getting to Know Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Associating Styles to a Web Page . . . . . . . . . . . . . . . . . . . . .58Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59Embedded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59Linked . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59@import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62
Development Tips from Style Associations . . . . . . . . . . . . . . .62Use External Associative Methods . . . . . . . . . . . . . . . . . . .62Exploring the link Method . . . . . . . . . . . . . . . . . . . . . . . .62Excluding Netscape Navigator with @import . . . . . . . . . .63Windows Flicker with @import . . . . . . . . . . . . . . . . . . . . .65
CSS Aids: The Way Things Are . . . . . . . . . . . . . . . . . . . . . . .65Learn to Love the Box Model . . . . . . . . . . . . . . . . . . . . . .66Color Your CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66Distance Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67class Versus id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68div Versus span . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68Pseudo-Classes and Pseudo-Elements . . . . . . . . . . . . . . . .74Incorporating CSS Ideally . . . . . . . . . . . . . . . . . . . . . . . . .76
The Cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80Links, Specificity, and Math . . . . . . . . . . . . . . . . . . . . . . .81
4 Laying Out Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85
Jeffrey Zeldman on Web Standards and Development . . . . . .85Interview with Jeffrey Zeldman . . . . . . . . . . . . . . . . . . . . .86
Splash Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90Traditional Splashes: A Practical Example . . . . . . . . . . . . .91
Column Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99Two-Column Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . .99Three-Column Layout . . . . . . . . . . . . . . . . . . . . . . . . . . .117
5 CSS for Dynamic HTML . . . . . . . . . . . . . . . . . . . . . . . . . .129
Steven Champeon on Dynamic HTML . . . . . . . . . . . . . . . . .129
Slight of Hand: Dynamic HTML in Action . . . . . . . . . . . . . . .134Changing More Styles on-the-Fly . . . . . . . . . . . . . . . . . . .138
Designing CSS Web Pagesvi
00 2638 FM 8/26/02 12:24 PM Page vi
Manipulating Images Using DHTML . . . . . . . . . . . . . . . . . . .141
Hiding and Showing Page Elements . . . . . . . . . . . . . . . . . . .148
Resizing Form Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153Do Something Different . . . . . . . . . . . . . . . . . . . . . . . . . .153
JavaScript: Great Power, Great Responsibility . . . . . . . . . . . . .158Recommended Reading . . . . . . . . . . . . . . . . . . . . . . . . . .159
Part III Advanced CSS 161
6 Creating CSS for Beyond the Screen . . . . . . . . . . . . . . . .163
Designing CSS for Print . . . . . . . . . . . . . . . . . . . . . . . . . . . .163Remove the Clutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165Designing the Heart of Printed Content . . . . . . . . . . . . . .166
CSS for Audio Presentation . . . . . . . . . . . . . . . . . . . . . . . . . .175The Aural CSS Properties . . . . . . . . . . . . . . . . . . . . . . . . .176Potential Strategies for Coding Aural CSS . . . . . . . . . . . . .180
7 Utilizing PNG and SVG with CSS . . . . . . . . . . . . . . . . . . .185
PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185Interview with Greg Roelof . . . . . . . . . . . . . . . . . . . . . . .185Alpha Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189Built-In Gamma Correction . . . . . . . . . . . . . . . . . . . . . . .192The Bad News About PNGs . . . . . . . . . . . . . . . . . . . . . . .193
SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194Interview with J. David Eisenberg . . . . . . . . . . . . . . . . . . .194Graphics from Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196Applying CSS to SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . .198Reality Check for SVG Development . . . . . . . . . . . . . . . . .200Reality Check for SVG Usage . . . . . . . . . . . . . . . . . . . . . .200
The Future of PNG and SVG . . . . . . . . . . . . . . . . . . . . . . . . .201
Part IV Launching Progressive Design with CSS:Deconstructions 203
8 Business Publishing . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205
A Company News Page . . . . . . . . . . . . . . . . . . . . . . . . . . . .205Minor Bugs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206Valid Hacks and Workarounds . . . . . . . . . . . . . . . . . . . . .208
E-Commerce Shopping Cart Page . . . . . . . . . . . . . . . . . . . . .211Horizontal Navigation Through CSS . . . . . . . . . . . . . . . . .223
Online News Magazine Layout . . . . . . . . . . . . . . . . . . . . . . .223
Contents vii
00 2638 FM 8/26/02 12:24 PM Page vii
9 Independent Publishing . . . . . . . . . . . . . . . . . . . . . . . . . .235
Personal Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .236Creating the Daily Blog Entry Design . . . . . . . . . . . . . . . .238
E-Zine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249Main Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258The Site’s Title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258The Background Image . . . . . . . . . . . . . . . . . . . . . . . . . .259Main Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .259The Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .260The Rest of the Layout . . . . . . . . . . . . . . . . . . . . . . . . . . .260
10 Underground Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261
Drafting Table/Transformer Stylized with SVG . . . . . . . . . . . .261
HTMinimaList Stylized Site with a Mondrian Twist . . . . . . . . .264Breakdown of the CSS Used in This Site . . . . . . . . . . . . . .267
Don’t Hesitate. Dive In. . . . . . . . . . . . . . . . . . . . . . . . . . . . .272
Part V Appendixes 273
A Formatting Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . .275Example 1: Basic Headline and Paragraph . . . . . . . . . . . . .276Example 2: How to Create a One-Pixel Headline Rule . . . .277Example 3: How to Create a Ten-Pixel Headline Rule . . . . .278Example 4: How to Create a Dotted Line . . . . . . . . . . . . .278Example 5: How to Create Large, Bold, Type . . . . . . . . . .279Example 6: How to Create Small, Bold Text . . . . . . . . . . .280Example 7: How to Create a Simple, Centered Headline . .281Example 8: How to Create a Right-Justified Heading . . . . .281Example 9: Enclosing the Headline in a Thin Lined Box . . .282Example 10: Indenting the First Line of the Paragraph . . . .283Example 11: Indenting the Paragraph and the Headline . .284Example 12: How to Create a Hanging Indent . . . . . . . . .284Example 13: How to Create a Hanging Headline . . . . . . . .285Example 14: How to Create a Variation of the Hanging Headline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286Example 15: How to Insert Background Texture . . . . . . . .287Example 16: How to Add Color to the Header’s Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287Example 17: How to Insert a Larger Background Image . . .288Example 18: How to Insert a Rule Above the Header . . . . .289Example 19: How to Insert a Rule Below the Header . . . . .290Example 20: How to Insert a Space Below the Header . . . .290
Designing CSS Web Pagesviii
00 2638 FM 8/26/02 12:24 PM Page viii
Example 21: How to Insert a Rule Below the Header with Some Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291Example 22: How to Insert Two Rules . . . . . . . . . . . . . . . .292Example 23: How to Create a Larger Headline and Keep the Double Rule . . . . . . . . . . . . . . . . . . . . . . . . . . .293Example 24: How to Insert an Image Between the Double Rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293Example 25: How to Create a Stressed Headline Rule Under the Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294Example 26: How to Create a Right-Justified Stressed Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295Example 27: How to Center, Add a Box, and Add an Image to the Headline . . . . . . . . . . . . . . . . . . . . . . . . . . .296Example 28: How to Insetting the Headline in the Text and Add a Rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296Example 29: How to Right-Align Example 28 . . . . . . . . . .297Example 30: How to Create an Outlined Variation of Example 28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298Example 31: How to Create an Outlined Variation Flushed Right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299Example 32: How to Add a Background Image to a Paragraph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299Example 33: How to Make Your Text Look Trapped . . . . . .300Example 34: How to Insert a Bold Box on the Left Side . . .301Example 35: How to Add a Thick Line . . . . . . . . . . . . . . .302Example 36: How to Shelter the Header and Change the Leading and Typeface . . . . . . . . . . . . . . . . . . . . . . . .303Example 37: How to Enclose the Heading in a Thin Line and Add Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303Example 38: How to Enclose the Heading with a Wide Width on the Side Borders . . . . . . . . . . . . . . . . . . . . . . . .304Example 39: How to Add a Thick Top Rule and a Thin Bottom Rule Around the Header . . . . . . . . . . . . . . . . . . .305Example 40: How to Add a Thin Top Rule and a Bottom Dotted Line Around the Header . . . . . . . . . . . . . .306Example 41: How to Make the Top Line Thicker . . . . . . . .306Example 42: How to Make the Bottom Line Thicker . . . . .307Example 43: How to Make the Top Headline Rule Larger Than the Headline . . . . . . . . . . . . . . . . . . . . . . . . .308Example 44: How to Make a Strong Initial Cap . . . . . . . . .309Example 45: How to Add the Header on Top of a Strong Initial Cap and Bold the First Word in the Paragraph . . . . .310Example 46: How to Enclose the Headline in a Thick Ruled Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311Example 47: How to Insert an Image into the Thick Ruled Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .312
Contents ix
00 2638 FM 8/26/02 12:24 PM Page ix
Example 48: How to Tuck the Header into the Paragraph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313Example 49: How to Tuck the Header and Indent the Paragraph to Add a Dynamic to an Otherwise Dull Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .314Example 50: How to Tuck the Header While Indenting Both the Header and Paragraph . . . . . . . . . . . . . . . . . . . .315
B CSS Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317
C HTML 4.01 Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . .329
D HTML to XHTML Conversion Tips . . . . . . . . . . . . . . . . . .335
Use a Valid DTD and Include Namespace . . . . . . . . . . . . . . .336
Inlined JavaScript and Style Sheets Should Be Free of CertainCharacters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336
Keep Only Clean Nests . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336
Fragment Identifiers: Name and ID Have the Same Value . . . .337
Closing Tags Are Not Optional . . . . . . . . . . . . . . . . . . . . . . .337
All Elements Should Be Lowercase . . . . . . . . . . . . . . . . . . . . .337
Slash Empty Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338
Avoid Line Breaks in Attribute Values . . . . . . . . . . . . . . . . . . .338
Quotes Around Attribute Values . . . . . . . . . . . . . . . . . . . . . .338
Where There’s an Attribute, There’s a Value . . . . . . . . . . . . . .339
Ampersands in Attribute Values . . . . . . . . . . . . . . . . . . . . . .339
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .341
00 2638 FM 8/26/02 12:24 PM Page x
