Web Standards Creativity · Innovations in Web Design With XHTML, CSS, and DOM Scripting by Rubin, Dan -- Read -- Imperial Library of Trantor

Index

About the Technical Reviewer Acknowledgments Getting Creative with Web Standards I. Layout Magic

1. Semantic Structure, Dirty Pretty Presentation

The brief Semantic structure Dirty pretty presentation

Background images Background, masthead, and menu Content highlights

Conclusion

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

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

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!

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

II. Effective Print Techniques Applied to CSS Design

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

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

III. DOM Scripting Gems

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

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 thatwhat about saving the planet? Conclusion

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

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

← Prev
Back
Next →

← Prev
Back
Next →