Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting

Size: px

Start display at page:

Download "Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting"

Hollie Mitchell
5 years ago
Views:

1 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

2 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): ISBN-10 (pbk): Printed and bound in China 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 Phone SPRINGER, fax , orders-ny@springer-sbm.com, or visit For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA Phone , fax , info@apress.com, or visit 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 in the Downloads section. Lead Editor Chris Mills Credits Assistant Production Director Kari Brooks-Copony Technical Reviewer Molly Holzschlag 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 Project Manager Kylie Johnston Copy Edit Manager Nicole Flores Copy Editors Marilyn Smith, Nicole Flores Compositor Diana Van Winkle, Van Winkle Design Group Proofreader Lori Bring Indexer Brenda Miller Interior Designer Diana Van Winkle, Van Winkle Design Group Cover Designer Kurt Krames Manufacturing Director Tom Debolski

3 Contents About the Technical Reviewer ix Acknowledgments xi Getting Creative with Web Standards xiii PART 1: LAYOUT MAGIC Chapter 1: Semantic Structure, Dirty Pretty Presentation The brief Semantic structure Dirty pretty presentation Background images Background, masthead, and menu Content highlights Conclusion Chapter 2: Taming a Wild CMS with CSS, Flash, and JavaScript Setting the scene A crash course on CMS The CMS challenge Design on a dime The visual elements The markup is but a shell The layout and styles The typography Spit and polish Issues with the design Such a #teaser Taking care of Internet Explorer Conclusion

4 Chapter 3: New York Magazine: My, What a Classy <body> Mo metro, mo style Getting started Structuring the CSS Adding a layer of style Negative margins and columns and stuff! Oh my! Getting column-tastic (finally) My class-fu is unstoppable Intelligent modules Additional classes, additional control Starting small (980 pixels worth) Tying in JavaScript Summary Chapter 4: Designing for Outside the Box Worries? Worrying about the Web Designing for WorrySome.net Stop worrying, start with markup Adding the content elements Adding divisions from the content out Satisfying your soul (with CSS) Styling WorrySome.net Dealing with legacy browsers No worries! Chapter 5: Creative Use of PNG Transparency in Web Design PNG, GIF, and JPEG What is PNG? So why is GIF still so popular? What about JPEG? Some great uses for the humble PNG The gradient The image that needs to work on any background The translucent HTML overlay The watermark The mask The color-changing icon OK, but what browsers does it work in? The Internet Explorer workaround: AlphaImageLoader A real-world use of AlphaImageLoader Conclusion vi

5 PART 2: EFFECTIVE PRINT TECHNIQUES APPLIED TO CSS DESIGN Chapter 6: Grid Design for the Web What is a grid system? Through the ages Ratios and the canvas Putting grid systems into practice Beginning with the pen Breaking down the elements Designing the columns Adding gutters, margins, and padding What about colors and other visual elements? Building the XHTML Building the CSS It s starting to look like a website Issues with the design Conclusion Chapter 7: Bridging the Type Divide: Classic Typography with CSS A brief history of type Know your text face Introducing Georgia The process The right man for the job A page for Poe A readable line length Paragraph indents Drop caps All caps Text figures vs. titling figures Small caps Conclusion PART 3: DOM SCRIPTING GEMS Chapter 8: Print Magic: Using the DOM and CSS to Save the Planet A printing technique is born The basic idea Preparing the foundations Sectioning the page Identifying the sections Pseudocode first Event planning From pseudocode to real code Recap: what these scripts do vii

6 What about the CSS? A couple of refinements Let s see it in action, already! Sliding in the code Styling the print links Pulling it all together Never mind all that what about saving the planet? Conclusion Chapter 9: Creating Dynamic Interfaces Using JavaScript Different layouts for different needs Resolution-dependent layouts Browser size, not resolution Multiple CSS files Turning on the style Optimizations for Internet Explorer 5.x Modular layouts The markup Expanding and collapsing modules Reorganizing modules Keeping track of changes Conclusion Chapter 10: Accessible Sliding Navigation The killer feature Accessibility basics Accessibility guidelines Accessibility and JavaScript The accessible solution Starting with pristine HTML Adding the presentation Switching between CSS states with JavaScript Adding sliding behaviors Where does the accessibility come in to it? Low vision Voice recognition Screen readers Keyboard-only use Conclusion Index viii

Silverlight and ASP.NET Revealed. Matthew MacDonald

Silverlight and ASP.NET Revealed Matthew MacDonald Silverlight and ASP.NET Revealed Copyright 2007 by Matthew MacDonald All rights reserved. No part of this work may be reproduced or transmitted in any