Innovations in Web Design With HTML, IT(1)
[ Pobierz całość w formacie PDF ]
Web Standards Creativity:
Innovations in Web Design
with XHTML, CSS, and
DOM Scripting
Cameron Adams
Mark Boulton
Andy Clarke
Simon Collison
Jeff Croft
Derek Featherstone
Ian Lloyd
Ethan Marcotte
Dan Rubin
Rob Weychert
Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting
Copyright © 2007 by Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Derek Featherstone,
Ian Lloyd, Ethan Marcotte, Dan Rubin, Rob Weychert
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system,
without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-803-0
ISBN-10 (pbk): 1-59059-803-2
Printed and bound in China
9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a
trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner,
with no intention of infringement of the trademark.
The White Pages® Online screenshots (Chapter 9, Figures 9-3 and 9-4) have been reproduced with the permission of
Sensis Pty Ltd.® Registered trade mark of Telstra Corporation Limited.
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013.
Phone 1-800-SPRINGER, fax 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com.
For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710.
Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, or visit www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in
the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to
any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work.
The source code for this book is freely available to readers at www.friendsofed.com in the Downloads section.
Credits
Lead Editor
Chris Mills
Assistant Production Director
Kari Brooks-Copony
Technical Reviewer
Molly Holzschlag
Compositor
Diana Van Winkle,
Van Winkle Design Group
Editorial Board
Steve Anglin, Ewan Buckingham,
Gary Cornell, Jason Gilmore,
Jonathan Gennick, Jonathan Hassell,
James Huddleston, Chris Mills,
Matthew Moodie, Dominic Shakeshaft,
Jim Sumser, Keir Thomas, Matt Wade
Proofreader
Lori Bring
Indexer
Brenda Miller
Interior Designer
Diana Van Winkle,
Van Winkle Design Group
Project Manager
Kylie Johnston
Copy Edit Manager
Nicole Flores
Cover Designer
Kurt Krames
Copy Editors
Marilyn Smith, Nicole Flores
Manufacturing Director
Tom Debolski
Contents at a Glance
About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Getting Creative with Web Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
PART 1: LAYOUT MAGIC
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
Chapter 1: Semantic Structure, Dirty Pretty Presentation
. . . . . . . . . . .
2
Chapter 2: Taming a Wild CMS with CSS, Flash, and JavaScript
. . . . . .
24
Chapter 3: New York Magazine: My, What a Classy <body>
. . . . . . . . .
50
Chapter 4: Designing for Outside the Box
. . . . . . . . . . . . . . . . . . . . . .
78
Chapter 5: Creative Use of PNG Transparency in Web Design
. . . . . . .
108
PART 2: EFFECTIVE PRINT TECHNIQUES APPLIED TO CSS DESIGN
. . . . .
129
Chapter 6: Grid Design for the Web
. . . . . . . . . . . . . . . . . . . . . . . . .
130
Chapter 7: Bridging the Type Divide: Classic Typography with CSS
. . .
156
PART 3: DOM SCRIPTING GEMS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
181
Chapter 8: Print Magic: Using the DOM and CSS to Save the Planet
. .
182
Chapter 9: Creating Dynamic Interfaces Using JavaScript
. . . . . . . . . .
208
Chapter 10: Accessible Sliding Navigation
. . . . . . . . . . . . . . . . . . . . .
242
Index
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
261
Contents
About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Getting Creative with Web Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
PART 1: LAYOUT MAGIC
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
Chapter 1: Semantic Structure, Dirty Pretty Presentation
. . . . . . .
2
The brief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Semantic structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Dirty pretty presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Background images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Background, masthead, and menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Content highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Chapter 2: Taming a Wild CMS with CSS, Flash, and JavaScript
. . .
24
Setting the scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
A crash course on CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
The CMS challenge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Design on a dime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The visual elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The markup is but a shell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
The layout and styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
The typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Spit and polish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Issues with the design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Such a #teaser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Taking care of Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Chapter 3: New York Magazine: My, What a Classy <body>
. . . . .
50
Mo’ metro, mo’ style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Structuring the CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Adding a layer of style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Negative margins and columns and stuff! Oh my! . . . . . . . . . . . . . . . . . . . . 58
Getting column-tastic (finally) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
My class-fu is unstoppable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Intelligent modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Additional classes, additional control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Starting small (980 pixels’ worth) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Tying in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Chapter 4: Designing for Outside the Box
. . . . . . . . . . . . . . . . . . .
78
Worries? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Worrying about the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Designing for WorrySome.net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Stop worrying, start with markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Adding the content elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Adding divisions from the content out . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Satisfying your soul (with CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Styling WorrySome.net . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Dealing with legacy browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
No worries! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Chapter 5: Creative Use of PNG Transparency in Web Design
. .
108
PNG, GIF, and JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
What is PNG? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
So why is GIF still so popular? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
What about JPEG? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Some great uses for the humble PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
The gradient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
The image that needs to work on any background . . . . . . . . . . . . . . . . . . . 112
The translucent HTML overlay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
The watermark . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
The mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
The color-changing icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
OK, but what browsers does it work in? . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
The Internet Explorer workaround: AlphaImageLoader . . . . . . . . . . . . . . . . . 126
A real-world use of AlphaImageLoader . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
vi
[ Pobierz całość w formacie PDF ]