Foreword |
|
v | |
Acknowledgments |
|
vii | |
Introduction |
|
ix | |
|
The Planning and Development of Your Site |
|
|
1 | (28) |
|
|
2 | (5) |
|
Determining Roles and Responsibilities |
|
|
3 | (1) |
|
Budgeting Time and Expectations |
|
|
4 | (1) |
|
|
4 | (3) |
|
|
7 | (4) |
|
|
7 | (1) |
|
|
8 | (1) |
|
Creating Personas: Putting a Face to Your Audience |
|
|
8 | (3) |
|
|
11 | (10) |
|
|
12 | (1) |
|
Taking Stock of Your Content |
|
|
12 | (2) |
|
From Inventory to Hierarchy |
|
|
14 | (2) |
|
|
16 | (2) |
|
Wireframes: Blueprints for Your Pages |
|
|
18 | (3) |
|
|
21 | (7) |
|
Setting the Tone for Your Site |
|
|
21 | (1) |
|
|
22 | (1) |
|
Selecting a Layout: Fixed or Liquid |
|
|
23 | (5) |
|
|
28 | (1) |
|
Best Practices for XHTML and CSS |
|
|
29 | (48) |
|
Structure and Presentation: Shoehorned Together |
|
|
30 | (5) |
|
A Valid Foundation: Learning to Love Our Markup |
|
|
35 | (13) |
|
|
36 | (3) |
|
Abstracting Style from Structure |
|
|
39 | (9) |
|
|
48 | (16) |
|
|
48 | (3) |
|
|
51 | (3) |
|
|
54 | (1) |
|
|
55 | (1) |
|
|
56 | (2) |
|
Putting It All into Action |
|
|
58 | (6) |
|
Understanding the Cascade |
|
|
64 | (4) |
|
|
64 | (2) |
|
|
66 | (2) |
|
|
68 | (1) |
|
|
68 | (8) |
|
Build to a Reliable Browser |
|
|
68 | (1) |
|
|
69 | (3) |
|
|
72 | (2) |
|
|
74 | (2) |
|
|
76 | (1) |
|
Blogger: Rollovers and Design Improvements |
|
|
77 | (82) |
|
Interviewing the Designer |
|
|
78 | (3) |
|
|
81 | (6) |
|
The Straight Lines of the Box Model |
|
|
84 | (2) |
|
|
86 | (1) |
|
Creating Fixed-Width, Round-Cornered Boxes |
|
|
87 | (20) |
|
|
88 | (1) |
|
|
89 | (1) |
|
|
89 | (1) |
|
|
90 | (17) |
|
Creating Fluid-Width, Round-Cornered Boxes |
|
|
107 | (12) |
|
|
109 | (1) |
|
|
109 | (1) |
|
|
110 | (1) |
|
|
111 | (7) |
|
Better Thinking Through Pseudo-Elements |
|
|
118 | (1) |
|
|
119 | (1) |
|
Writing CSS That Benefits Your Site Maintainers |
|
|
120 | (9) |
|
|
120 | (1) |
|
|
121 | (5) |
|
|
126 | (1) |
|
|
127 | (1) |
|
|
127 | (2) |
|
|
129 | (29) |
|
Changing the Color and Background Color of Links (Simple) |
|
|
129 | (2) |
|
Changing the Color and Background Color of Links (Complex) |
|
|
131 | (9) |
|
Changing the Background Color of Table Rows |
|
|
140 | (3) |
|
Changing the Color of Text |
|
|
143 | (4) |
|
Changing the Background Position on Links |
|
|
147 | (11) |
|
|
158 | (1) |
|
|
159 | (18) |
|
|
160 | (8) |
|
|
161 | (4) |
|
|
165 | (3) |
|
|
168 | (6) |
|
Customization: Positioning the Drop-Down Menus |
|
|
169 | (1) |
|
Customization: Styling the Drop-Down Menus |
|
|
170 | (4) |
|
Web Standards--Compliant Flash Embedding |
|
|
174 | (2) |
|
|
174 | (1) |
|
Write the object/embed Tags Using JavaScript |
|
|
175 | (1) |
|
|
175 | (1) |
|
|
176 | (1) |
|
The University of Florida |
|
|
177 | (28) |
|
University of Florida's Web Site |
|
|
177 | (3) |
|
|
178 | (2) |
|
|
180 | (1) |
|
|
180 | (3) |
|
|
181 | (1) |
|
|
181 | (1) |
|
|
181 | (1) |
|
|
182 | (1) |
|
Creating a Main Navigational Structure |
|
|
183 | (8) |
|
|
184 | (2) |
|
|
186 | (1) |
|
|
187 | (1) |
|
|
188 | (3) |
|
Making the Supplementary Navigation |
|
|
191 | (8) |
|
|
191 | (2) |
|
|
193 | (6) |
|
Flash Embedding Revisited |
|
|
199 | (4) |
|
|
199 | (2) |
|
Flash Satay with Server-Side Detection |
|
|
201 | (2) |
|
|
203 | (1) |
|
|
203 | (1) |
|
``Force of Habit'' or ``Who Moved My Input Field?'' |
|
|
203 | (1) |
|
|
203 | (2) |
|
ESPN.com: Powerful Layout Changes |
|
|
205 | (34) |
|
ESPN and CSS Sitting in a Tree |
|
|
205 | (1) |
|
Interviewing the Designer |
|
|
206 | (2) |
|
|
208 | (16) |
|
|
211 | (1) |
|
|
211 | (1) |
|
|
212 | (1) |
|
|
212 | (2) |
|
|
214 | (6) |
|
Where Else Is This Applicable? |
|
|
220 | (3) |
|
Up a Bit . . . a Bit More . . . Stop! |
|
|
223 | (1) |
|
|
224 | (1) |
|
A Glimpse into a Classless Future (Not a Socialist Manifesto) |
|
|
224 | (14) |
|
The Selectors of Tomorrow |
|
|
224 | (13) |
|
Love Your <body> Even More Tomorrow |
|
|
237 | (1) |
|
|
238 | (1) |
|
FastCompany.com: Building a Flexible Three-Column Layout |
|
|
239 | (38) |
|
Fast Company: Picking Up the Gauntlet |
|
|
240 | (2) |
|
Meet the Designer: Dan Cederholm |
|
|
242 | (4) |
|
CSS Positioning: The Fundamentals |
|
|
246 | (6) |
|
Absolutely Fabulous Positioning |
|
|
247 | (3) |
|
Positioning That's Absolutely Relative |
|
|
250 | (2) |
|
Building Three Columns: Laying the Foundation |
|
|
252 | (21) |
|
Writing the XHTML: From Mockup to Markup |
|
|
254 | (2) |
|
|
256 | (10) |
|
|
266 | (7) |
|
Setting Some Boundaries: The max-width Property |
|
|
273 | (3) |
|
|
276 | (1) |
|
Stuff and Nonsense: Strategies for CSS Switching |
|
|
277 | (40) |
|
|
278 | (6) |
|
|
284 | (2) |
|
The Mechanics: How It's Supposed to Work |
|
|
286 | (5) |
|
|
286 | (1) |
|
|
287 | (1) |
|
|
287 | (3) |
|
Another Solution We (Almost) Can't Quite Use |
|
|
290 | (1) |
|
The Reality: How It Can Work Today |
|
|
291 | (13) |
|
Jumping on the JavaScript Bandwagon |
|
|
292 | (8) |
|
|
300 | (4) |
|
|
304 | (5) |
|
Media Types: Let the Healing Begin |
|
|
305 | (4) |
|
|
309 | (1) |
|
Stuff and Nonsense: Building a Better Switcher |
|
|
309 | (2) |
|
Meet the Designer: Andy Clarke |
|
|
311 | (5) |
|
|
316 | (1) |
|
|
317 | (66) |
|
Enter ChristopherSchmitt.com |
|
|
317 | (2) |
|
|
319 | (1) |
|
Defining the Site's Scope |
|
|
320 | (1) |
|
|
321 | (1) |
|
|
322 | (2) |
|
|
324 | (5) |
|
|
324 | (1) |
|
|
324 | (4) |
|
|
328 | (1) |
|
|
329 | (14) |
|
Outside-In, Top-Down Approach to CSS |
|
|
329 | (1) |
|
Centering the Page (and Why It Matters) |
|
|
329 | (3) |
|
|
332 | (3) |
|
|
335 | (1) |
|
|
336 | (3) |
|
|
339 | (4) |
|
Starting the Two-Column Layout |
|
|
343 | (6) |
|
|
344 | (1) |
|
|
344 | (4) |
|
|
348 | (1) |
|
|
349 | (10) |
|
My Site Says, ``Hi,'' Does Yours? |
|
|
349 | (3) |
|
|
352 | (7) |
|
|
359 | (22) |
|
|
360 | (7) |
|
Wayfinding with Navigation |
|
|
367 | (6) |
|
|
373 | (5) |
|
|
378 | (2) |
|
|
380 | (1) |
|
|
381 | (2) |
|
Appendix A: HTML 4.01 Elements |
|
|
383 | (6) |
|
Appendix B: Rules for HTML-to-XHTML Conversion |
|
|
389 | (6) |
|
|
390 | (1) |
|
Picking Your Comfort Level |
|
|
390 | (1) |
|
|
391 | (4) |
|
Don't Forget the Namespace Attribute |
|
|
391 | (1) |
|
|
392 | (1) |
|
No Attribute Minimization |
|
|
392 | (1) |
|
Terminating Empty Elements |
|
|
392 | (1) |
|
|
393 | (1) |
|
XHTML with CSS and JavaScript Files |
|
|
393 | (1) |
|
|
393 | (1) |
|
Introduce ID When Using name |
|
|
393 | (1) |
|
|
394 | (1) |
|
|
394 | (1) |
|
Appendix C: CSS 2.1 Properties |
|
|
395 | (12) |
|
Appendix D: Troubleshooting CSS Guide |
|
|
407 | (4) |
|
|
407 | (1) |
|
|
407 | (1) |
|
|
408 | (1) |
|
Manipulating the Elements |
|
|
408 | (2) |
|
Zeroing Out the Padding and Margins |
|
|
408 | (1) |
|
Applying Color to Borders and Backgrounds |
|
|
408 | (1) |
|
Placing Variations in Property Values |
|
|
409 | (1) |
|
|
409 | (1) |
|
|
409 | (1) |
|
|
410 | (1) |
|
|
410 | (1) |
|
|
410 | (1) |
Index |
|
411 | |