Table Of ContentVISUAL QUICKPRO GUIDE
DHTML
AND
CSS A
DVANCED
Jason Cranford Teague
Peachpit Press
Visual QuickPro Guide
DHTML and CSS Advanced
Jason Cranford Teague
Peachpit Press
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
800/283-9444
Find us on the World Wide Web at www.peachpit.com.
To report errors, please send a note to [email protected].
Peachpit Press is a division of Pearson Education.
Copyright © 2005 by Jason Cranford Teague
Editor: Kate McKinley
Production Coordinator: Andrei Pasternak
Proofreader: Elizabeth Welch
Compositor: Danielle Foster
Indexer: Julie Bess
Cover Design: The Visual Group
Cover Production: George Mattingly / GMD
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic,
mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For
information on getting permission for reprints and excerpts, contact [email protected].
Notice of Liability
The information in this book is distributed on an “As Is” basis, without warranty. While every precaution
has been taken in the preparation of the book, neither the author nor Peachpit Press 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 instructions contained in this book or by the computer software and hardware products
described in it.
Trademarks
Visual QuickPro Guide is a registered trademark of Peachpit Press, a division of Pearson Education.
All other trademarks are the property of their respective owners.
Throughout this book, trademarks are used. Rather than put a trademark symbol with every occurrence of
a trademarked name, we state that we are using the names in an editorial fashion only and to the benefit
of the trademark owner with no intention of infringement of the trademark. No such use, or the use of any
trade name, is intended to convey endorsement or other affiliation with this book.
ISBN 0-321-26691-9
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
Dedication:
For Tara
There is something within your voice
Something behind your eyes
Something inside your heart
That is beating in time with mine
Special Thanks To…
Jocelyn and Dashiel, who keep my spirits up. Charles Dodgson (a.k.a. Lewis Carroll),
for writing Alice Through the Looking Glass.
Mom, Dad, and Nancy, who made me who
I am. John Tennet, for his incredible illustrations
of Alice Through the Looking Glass.
Uncle Johnny, for his unwavering support.
Judy, Boyd, Dr. G and teachers everywhere
Pat and Red, my two biggest fans.
who care. Keep up the good work.
Nancy Davis, whose patience kept me from
Douglas Adams, Neil Gaiman, and Carl
going stark raving mad.
Sagan who inspired me to write.
Kate McKinley, who dotted my i’s and made
the The, Siouxsie and the Banshees, Air
sure that everything made sense.
America Radio, The Happytones,
Liz Welch, for her proofreading prowess.
Rammstein, The Hives, Electro Cute,
Andrei Pasternak, for keeping this moving Danielle Dax, Morrissey, The Craig
through the Peachpit production process. Charles Show, Republic of Loose, the
Pogues, The Pixies, New Model Army,
Danielle Foster, who pulled it all together
Cocteau Twins, Franz Ferdinand, Kate
to make it look this good.
Bush, Mojo Nixon, Bauhaus, Lady Tron,
Daniel Rymer, who wrote Chapter 10.
Bad Religion, This Mortal Coil, John Peel,
Kimberley Blessing, who coded Chapter 8. Monty Python, the Dead Milkmen,
Thomas Williams, who listened when I Johnny Cash, The Sex Pistols, Dead Can
needed to talk. Dance, BBC Radio 6, Le Tigre, and ZBS
Studios (for Ruby) whose noise helped keep
Neil Salkind and the good folks at Studio B
me from going insane while writing this book.
for representing my best interests.
This Book Is Safari Enabled
The Safari® Enabled icon on the cover of your favorite technology book means the
book is available through Safari Bookshelf. When you buy this book, you get free
access to the online edition for 45 days.
Safari Bookshelf is an electronic reference library that lets you easily search thou-
sands of technical books, find code samples, download chapters, and access technical
information whenever and wherever you need it.
To gain 45-day Safari Enabled access to this book:
• Go to http://www.peachpit.com/safarienabled
• Complete the brief registration form
• Enter the coupon code GZFE-NF2E-YJ2C-9XEN-6F23
If you have difficulty registering on Safari Bookshelf or accessing the online edition,
please e-mail [email protected].
Table of Contents
Introduction ix
Chapter 1: Creating a Dynamic Web Site 1
What Makes a Web Site Dynamic?. . . . . . . . . . . . . . 3
Understanding Layout on the Web. . . . . . . . . . . . . . 5
Creating an Accessible Web Site. . . . . . . . . . . . . . . . 8
Understanding Hypertext, Navigation,
T
and Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 a
b
Navigation Dos and Don’ts. . . . . . . . . . . . . . . . . . . . 12 l
e
Dynamic by Design . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 o
The Four Ds of Web Design. . . . . . . . . . . . . . . . . . . . 16 f
C
o
Chapter 2: Mastering CSS 27 n
t
The Myths of CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 e
n
Building Your Style Sheets. . . . . . . . . . . . . . . . . . . . . 30 t
s
Web Typography: Beyond Times and Arial. . . . . 33
Creating Web Pages for Print. . . . . . . . . . . . . . . . . . 37
Building a Master Style Sheet. . . . . . . . . . . . . . . . . . 39
Understanding CSS Shorthand. . . . . . . . . . . . . . . . . 41
Using Grouping and Context . . . . . . . . . . . . . . . . . . 43
Fixing CSS Browser Inconsistencies. . . . . . . . . . . . 45
CSS Beyond Internet Explorer 6. . . . . . . . . . . . . . . . 48
Chapter 3: Advanced DHTML Techniques 55
Setting Up and Accessing Arrays. . . . . . . . . . . . . . . 56
Changing an Array. . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Sorting an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Working with Data Objects. . . . . . . . . . . . . . . . . . . . 69
Storing Data in Frames. . . . . . . . . . . . . . . . . . . . . . . . 71
Storing Data in URLs. . . . . . . . . . . . . . . . . . . . . . . . . . 78
Storing Data in Cookies . . . . . . . . . . . . . . . . . . . . . . . 84
Delaying or Stopping an Action. . . . . . . . . . . . . . . . 91
Handling Errors on the Fly. . . . . . . . . . . . . . . . . . . . . 94
Chapter 4: Content 97
Preloading Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Adding External Content with iframes. . . . . . . . 100
v
Contents
Adding External Content Using
Server-Side Includes . . . . . . . . . . . . . . . . . . . . . 102
Adding External Content with JavaScript. . . . . . 104
Viewing Someone Else’s External JavaScript
or CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Adding External Content with PHP. . . . . . . . . . . 109
Inserting a New Element . . . . . . . . . . . . . . . . . . . . . 111
Inserting a New Text Element . . . . . . . . . . . . . . . . 114
Inserting a New iframe Element. . . . . . . . . . . . . . . 116
Removing an Element. . . . . . . . . . . . . . . . . . . . . . . . 118
Including Random Content. . . . . . . . . . . . . . . . . . . 120
Including Multiple Pages in a Single Page. . . . . . 122
Including a Clock . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Chapter 5: Layout 129
Creating Simple Columns . . . . . . . . . . . . . . . . . . . . 130
s
Creating Balanced Columns . . . . . . . . . . . . . . . . . . 133
t
n
Creating Graphic Background Columns . . . . . . 137
e
t Creating Contextual Layouts . . . . . . . . . . . . . . . . . 141
n
o Centering Layouts Horizontally
C
f and Vertically . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
o
Creating Curved Text Wrapping. . . . . . . . . . . . . . 147
e
l Creating Curved Borders . . . . . . . . . . . . . . . . . . . . . 150
b
a Creating a Drop Shadow Around
T
an Element. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Creating a Frame Drop Shadow. . . . . . . . . . . . . . . 158
Keeping Pages Framed . . . . . . . . . . . . . . . . . . . . . . . 162
Switching Layouts on the Fly. . . . . . . . . . . . . . . . . 166
Highlighting Table Rows . . . . . . . . . . . . . . . . . . . . . 169
Chapter 6: Navigation 173
Working with Link Styles. . . . . . . . . . . . . . . . . . . . . 174
Creating an HTML Text Graphic Button. . . . . . 182
Creating Tabbed Navigation. . . . . . . . . . . . . . . . . . 186
Adding a Simple Menu. . . . . . . . . . . . . . . . . . . . . . . 189
Adding a Fixed Drop-down Menu. . . . . . . . . . . . . 192
Adding a Floating Menu Bar. . . . . . . . . . . . . . . . . . 200
Adding a Clipping Menu . . . . . . . . . . . . . . . . . . . . . 203
Adding a Jump Menu . . . . . . . . . . . . . . . . . . . . . . . . 212
Adding Pop-up Menus . . . . . . . . . . . . . . . . . . . . . . . 215
Educating the Browser. . . . . . . . . . . . . . . . . . . . . . . 220
Chapter 7: Controls 223
Creating Customized Browser Controls . . . . . . . 224
Creating a Sortable Table. . . . . . . . . . . . . . . . . . . . . 228
Adding Font Size Controls. . . . . . . . . . . . . . . . . . . . 233
vi
Contents
Creating a Scrollable Area . . . . . . . . . . . . . . . . . . . . 239
Animating Scroll Controls. . . . . . . . . . . . . . . . . . . . 242
Adding a Calendar Date Picker . . . . . . . . . . . . . . . 249
Adding QuickTime Video Controls . . . . . . . . . . . 255
Opening and Closing Frames . . . . . . . . . . . . . . . . . 259
Chapter 8: Forms 269
Styling Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Highlighting Form Fields. . . . . . . . . . . . . . . . . . . . . 276
Auto-Focusing Form Fields. . . . . . . . . . . . . . . . . . . 282
Performing Form Validation. . . . . . . . . . . . . . . . . . 286
Creating Contextual Forms. . . . . . . . . . . . . . . . . . . 290
Creating Contextual Form Data. . . . . . . . . . . . . . . 294
Restricting a Form Field’s Content. . . . . . . . . . . . 298
Disabling Form Controls . . . . . . . . . . . . . . . . . . . . . 301
Creating Graphic Form Controls. . . . . . . . . . . . . . 305
T
a
Chapter 9: Special Effects 309 b
l
Creating Transparent Layers . . . . . . . . . . . . . . . . . 310 e
o
Creating Text Drop Shadows . . . . . . . . . . . . . . . . . 314
f
Floating Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 C
o
Adding a GIF Animation. . . . . . . . . . . . . . . . . . . . . 320 n
t
Adding Ambient Sound. . . . . . . . . . . . . . . . . . . . . . 326 e
n
Creating Transparent Graphics
t
s
in PNG Format . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Special Effects in Internet Explorer
for Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Chapter 10: Databases 339
Understanding XML. . . . . . . . . . . . . . . . . . . . . . . . . 340
Accessing XML Data in Internet Explorer
for Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Accessing XML Data with Mozilla
and Internet Explorer. . . . . . . . . . . . . . . . . . . . 345
Understanding MySQL. . . . . . . . . . . . . . . . . . . . . . . 349
Creating Database Objects in MySQL . . . . . . . . . 350
Understanding PHP. . . . . . . . . . . . . . . . . . . . . . . . . . 352
Using PHP with MySQL. . . . . . . . . . . . . . . . . . . . . . 353
Adding Comments to the PHP Blog. . . . . . . . . . . 356
Adding a Comments Input Form . . . . . . . . . . . . . 360
Adding an Administrator Page. . . . . . . . . . . . . . . . 366
Creating a Secure Blog Entry Input Form. . . . . . 371
Appendix A: CSS Quick Reference 375
Adding Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Selectors: HTML, Classes, IDs. . . . . . . . . . . . . . . . . 378
vii
Contents
Grouping Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Properties and Values. . . . . . . . . . . . . . . . . . . . . . . . 380
Appendix B: DHTML Quick Reference 389
The DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Properties and Values. . . . . . . . . . . . . . . . . . . . . . . . 392
Reserved Words. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Appendix C: WAI Accessibility Checklist 397
Priorities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Priority 1 Checkpoints . . . . . . . . . . . . . . . . . . . . . . . 399
Priority 2 Checkpoints. . . . . . . . . . . . . . . . . . . . . . . . 401
Priority 3 Checkpoints. . . . . . . . . . . . . . . . . . . . . . . . 403
Appendix D: Browser-Safe Fonts 405
s Index 411
t
n
e
t
n
o
C
f
o
e
l
b
a
T
viii
i
Introduction
When a page loads in my browser window, the first thing I want to figure out is “How
did they do that?” Whether it’s tabs using HTML text, a menu bar floating down the
page, or drop shadows behind text, I am constantly discovering new ideas for Web
design and user experience. Almost invariably, though, the answer to my question
involves cascading style sheets or dynamic HTML.
I
CSS and DHTML (along with HTML and JavaScript) form the core skill set of every n
t
Web designer, yet mastering these two technologies takes more than knowing the r
o
basics of how they work. The problem is that, though both HTML and JavaScript have d
u
been relatively stable for several years now, CSS and DHTML have only in the last c
t
i
couple of years become standardized technologies that can be counted on to behave o
n
in a reliable manner on different browsers.
Today’s Web designers, whether their approach is that of a programmer or a visual
designer, need to draw on more than just a bag of tricks. They need ideas for creat-
ing designs that look great and can be easily updated. They need ideas for creating a
superior user experience that puts the visitor in control. They need ideas for linking
complex data streams to their Web pages that will turn data into knowledge.
If that sounds like you, then have I got the book for you.
ix
