Richard Wagner
9

IN
1
BOOKS
BOOKS
• Establish a Web Presence
• Web Design
• HTML/XHTML
• Style with CSS
• JavaScript
®
and Ajax
• Graphics
• Microsoft
®
Expression
®
Web
• Adobe
®
Dreamweaver
®
• Adobe
®
Flash
®

Creating Web Pages
ALL-IN-ONE

how-to articles, or to shop!
Here’s just what you
need to know to create a
cool Web site — and no more!
If you’re not a professional Web designer, and don’t want to
be, you probably just want to get the job done and make it
look good. There’s nothing wrong with that, and this book is
here to help! Self-contained minibooks cover all the essential
techniques and technologies, so you can get what you need
to plan, design, code, and maintain your site.
• You have a presence — explore your options for establishing
an online presence with a blog or full-scale Web site
• Design for your visitors — apply good Web design principles,
make navigation easy, and consider your mobile visitors
• All those initials — learn as much HTML, XHTML, and CSS as
you need
• Follow the script — find out how you can add interactive
features to your pages with JavaScript and Ajax
• Grab ’em with graphics — discover where to get graphics and
how to optimize them for the Web
• Express yourself — design, create, and publish a site using
Microsoft Expression Web
• Dream big — build a site with Dreamweaver for Windows
®

or Mac
®

• Get interactive in a Flash — make your site more appealing
with Flash movies and interactivity

Spine: 1.30”
Start with FREE Cheat Sheets
Cheat Sheets include
• Checklists
• Charts
• Common Instructions
• And Other Good Stuff!
Get Smart at Dummies.com
Dummies.com makes your life easier with 1,000s
of answers on everything from removing wallpaper
to using the latest version of Windows.
Check out our
• Videos
• Illustrated Articles
• Step-by-Step Instructions
Plus, each month you can win valuable prizes by entering
our Dummies.com sweepstakes. *
Want a weekly dose of Dummies? Sign up for Newsletters on
• Digital Photography
• Microsoft Windows & Office
• Personal Finance & Investing
• Health & Wellness
• Computing, iPods & Cell Phones
• eBay
• Internet
• Food, Home & Garden
Find out “HOW” at Dummies.com
*Sweepstakes not currently available in all countries; visit Dummies.com for official rules.
Get More and Do More at Dummies.com
®

‰
Creating
Web Pages
ALL-IN-ONE
FOR
DUMmIES
‰
4TH EDITION
01_9780470640326-ffirs.indd iii01_9780470640326-ffirs.indd iii 12/29/10 2:54 PM12/29/10 2:54 PM
www.it-ebooks.info
Creating Web Pages All-in-One For Dummies
®
, 4th Edition
Published by
Wiley Publishing, Inc.
111 River Street
Hoboken, NJ 07030-5774
www.wiley.com
Copyright © 2011 by Wiley Publishing, Inc., Indianapolis, Indiana
Published by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or
by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permit-
ted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written
permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the
Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600.
Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley
& Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://
www.wiley.com/go/permissions.
Trademarks: Wiley, the Wiley Publishing logo, For Dummies, the Dummies Man logo, A Reference for the

01_9780470640326-ffirs.indd iv01_9780470640326-ffirs.indd iv 12/29/10 2:54 PM12/29/10 2:54 PM
www.it-ebooks.info
About the Author
Richard Wagner is Lead Product Architect, Web/Mobile at MAARK and
author of several Web and mobile-related books, including Safari and WebKit
Development for iPhone OS 3.0, XSLT For Dummies, Web Design Before & After
Makeovers, and more. Richard has also authored several books outside of the
 eld of technology, including The Myth of Happiness and The Expeditionary Man.
01_9780470640326-ffirs.indd v01_9780470640326-ffirs.indd v 12/29/10 2:54 PM12/29/10 2:54 PM
www.it-ebooks.info
01_9780470640326-ffirs.indd vi01_9780470640326-ffirs.indd vi 12/29/10 2:54 PM12/29/10 2:54 PM
www.it-ebooks.info
Dedication
To Kimberly and the boys
01_9780470640326-ffirs.indd vii01_9780470640326-ffirs.indd vii 12/29/10 2:54 PM12/29/10 2:54 PM
www.it-ebooks.info
Publisher’s Acknowledgments
We’re proud of this book; please send us your comments at . For
other comments, please contact our Customer Care Department within the U.S. at 877-762-2974,
outside the U.S. at 317-572-3993, or fax 317-572-4002.
Some of the people who helped bring this book to market include the following:
Acquisitions and Editorial
Project Editor: Rebecca Senninger
(Previous Edition: Nicole Sholly)
Executive Editor: Steven Hayes
Copy Editor: Barry Childs-Helton
Technical Editor: Claudia Snell
Editorial Manager: Leah Cameron
Editorial Assistant: Amanda Graham
Sr. Editorial Assistant: Cherie Case

Chapter 3: Designing for Mobile Visitors 107
Book III: HTML/XHTML 115
Chapter 1: Exploring HTML and XHTML Documents 117
Chapter 2: Working with Text and Links 129
Chapter 3: Presenting Information with Lists and Tables 145
Chapter 4: Adding Images 157
Chapter 5: Divvying Up the Page with divs 167
Chapter 6: Creating Forms 183
Chapter 7: HTML5 Video and Audio 195
Book IV: Style with CSS 201
Chapter 1: Styling Your Web Pages with Cascading Style Sheets 203
Chapter 2: Selectively Speaking: Working with Selectors 213
Chapter 3: Formatting Text 221
Chapter 4: The Gang of Four: Formatting Box Properties 231
Chapter 5: Positioning with CSS 243
Book V: JavaScript and Ajax 253
Chapter 1: Understanding How Scripting Works 255
Chapter 2: Programming in JavaScript 261
Chapter 3: JavaScript Libraries and Frameworks 281
Chapter 4: Understanding the Document Object Model 289
Chapter 5: Adding Event Handlers to Your Web Page 307
02_9780470640326-ftoc.indd ix02_9780470640326-ftoc.indd ix 12/29/10 2:55 PM12/29/10 2:55 PM
www.it-ebooks.info
Chapter 6: Useful Things to Know When Scripting 313
Chapter 7: Introducing Ajax 335
Book VI: Graphics 345
Chapter 1: Understanding Web Graphics 347
Chapter 2: Optimizing Your Graphics 353
Chapter 3: Image Rollovers 361
Book VII: Microsoft Expression Web 369

Book I: Establish a Web Presence 3
Book II: Web Design 3
Book III: HTML/XHTML 3
Book IV: Style with CSS 4
Book V: JavaScript and Ajax 4
Book VI: Graphics 4
Book VII: Microsoft Expression Web 4
Book VIII: Adobe Dreamweaver 4
Book IX: Adobe Flash 4
Icons Used in This Book 5
Where to Go from Here 5
Book I: Establish a Web Presence 7
Chapter 1: Getting Up and Running. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Knowing the Lingo and the Basics 9
Navigating the Web 9
Creating and publishing a Web site 11
Exploring Your Web-Site Choices 13
Convenience of online blogging tools 13
Most  exibility: Building your own site 13
Compromise: Using an online site builder 15
Surf and Study: Discovering What Works and What Doesn’t 16
Chapter 2: WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Understanding Blogging 19
Creating a Blog with WordPress 20
Creating a Post 23
Managing Your Blog Posts 28
Designing Your Blog Look 29
Making Posts Outside of WordPress 32
Posting by e-mail 32
Creating audio blog entries 34

Applying Three Proven Design Principles to Your Site 85
Simplicity: Less is more 85
Keeping things clean with white space 91
Being consistent across the site 91
Understanding the Rule of Thirds 92
Tweaking your page design with the rule of thirds 93
Balancing the rule of thirds with the background 97
Positioning the background image 98
Finessing graphics 98
Avoiding Eight Common Web-Design Problems 99
Clutter eats your site alive 99
Overwhelming your visitors at the start 99
Confusion comes with complexity 99
Mixing and matching design ideas never works 100
Extreme symmetry is a yawner 101
Forgetting about the visitor 102
Negligence is like moldy bread 102
Insecurity makes people nervous 102
02_9780470640326-ftoc.indd xii02_9780470640326-ftoc.indd xii 12/29/10 2:55 PM12/29/10 2:55 PM
www.it-ebooks.info
Table of Contents
xiii
Chapter 2: Organizing and Navigating Your Web Site . . . . . . . . . . . .103
Creating a Site Hierarchy 103
Navigating Your Site with a Navigation Menu 105
Chapter 3: Designing for Mobile Visitors. . . . . . . . . . . . . . . . . . . . . . . .107
Previewing Your Mobile Site 107
Four Levels of Mobile Web-Enabling 108
Basic compatibility 108
Mobile-friendly site design 109

Giving your text some color 138
Creating Links 138
Dissecting a URL 139
Distinguishing between absolute and relative URLs 139
02_9780470640326-ftoc.indd xiii02_9780470640326-ftoc.indd xiii 12/29/10 2:55 PM12/29/10 2:55 PM
www.it-ebooks.info
Creating Web Pages All-in-One For Dummies, 4th Edition
xiv
Making a link 140
Linking to a location inside a page 141
Linking to an e-mail address 142
Linking to a picture, PDF document, or  le 142
Opening the link in a new browser window 143
Chapter 3: Presenting Information with Lists and Tables. . . . . . . . . .145
Creating a Bulleted List 145
Making a normal unordered list 145
Using alternative bullets 146
Using images for bullets 147
Creating a Numbered List 148
Working with Nested Lists 149
Working with Tables 149
Adding a border to the table 152
Sizing your table 153
Sizing the columns of a table 155
Spacing your table 156
Chapter 4: Adding Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157
Adding an Image 157
Positioning an Image on the Page 159
Adding Padding Around Your Image 161
Specifying the Dimensions of the Image 163

Using the <video> Tag 195
Working with the <audio> Tag 198
Book IV: Style with CSS 201
Chapter 1: Styling Your Web Pages with Cascading Style Sheets . . .203
Why Use CSS? 204
Introducing CSS 204
Make the rules — don’t break ’em 205
Being (kinda sorta) insensitive about case 206
Applying CSS Styles to a Web Page 206
Using embedded styles 207
Using an external style sheet 207
Using inline styles 208
Inheriting Properties 208
Cascading Styles 210
Chapter 2: Selectively Speaking: Working with Selectors . . . . . . . .213
Type Selectors: Selecting an Element by Its Type 213
Class Selectors: Selecting an Element by Class 214
Combining type and class selectors 215
Combining classes 215
ID Selectors: Selecting an Element by id 216
Universal Selectors: Selecting All Elements 216
Multiple Selectors: Selecting More than One Element 217
Descendant, Child, and Adjacent Sibling Selectors:
Selecting an Element Based on Hierarchy 217
Descendant selectors 217
Child selectors 218
Adjacent sibling selectors 218
Attribute Selector: Selecting an Element by Attribute 218
Understanding Pseudo-Classes and Pseudo-Elements 219
Chapter 3: Formatting Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221

Zeroing out default margin and padding settings 239
Using automatic margins with auto 239
Adding a Background 239
Getting Mousy with the Cursor 240
Chapter 5: Positioning with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243
Centering Elements on the Page 243
Breaking Normal Flow with Floating Elements 244
Tweaking a  oat with clear 247
Creating a Layout Using  oat and clear 248
Aligning Text Vertically 251
Book V: JavaScript and Ajax 253
Chapter 1: Understanding How Scripting Works. . . . . . . . . . . . . . . . .255
Surveying the JavaScript Scripting Language 255
Working with the script Element 256
Executing JavaScript automatically on load 257
Executing JavaScript on demand 257
Enabling JavaScript with an Event Handler 258
Embedding Ready-Made Scripts into Your Web Pages 259
Chapter 2: Programming in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . .261
It’s All about Objects 261
Making Sense of JavaScript Syntax 262
Case is all-important 263
Semicolons mark the end of a statement 263
02_9780470640326-ftoc.indd xvi02_9780470640326-ftoc.indd xvi 12/29/10 2:55 PM12/29/10 2:55 PM
www.it-ebooks.info
Table of Contents
xvii
Objects do dots 263
Curly braces are used to enclose blocks of code 264
Collections and arrays are zero-based 264

Chaining with jQuery 286
Adding CSS styling 286
Creating elements 287
Creating callbacks 287
Other Libraries and Frameworks 288
Mootools 288
Script.aculo.us 288
jQuery UI 288
moo.fx 288
Chapter 4: Understanding the Document Object Model . . . . . . . . . . .289
What Is the DOM? 289
Accessing DOM Objects 291
Using dot notation 292
Using square brackets 292
02_9780470640326-ftoc.indd xvii02_9780470640326-ftoc.indd xvii 12/29/10 2:55 PM12/29/10 2:55 PM
www.it-ebooks.info
Creating Web Pages All-in-One For Dummies, 4th Edition
xviii
Using DOM arrays 292
Accessing an element by its id value 293
Accessing an element by its tag name 293
Accessing and Modifying Properties 294
Calling Object Methods 294
Adding and Removing Nodes from the DOM 295
Adding new nodes 295
Removing a DOM object 295
Exploring the DOM 296
HTML elements 297
The document object 301
The window object 303

Making the request 338
Listening for responses 339
02_9780470640326-ftoc.indd xviii02_9780470640326-ftoc.indd xviii 12/29/10 2:55 PM12/29/10 2:55 PM
www.it-ebooks.info
Table of Contents
xix
Serving the request 340
Updating the Web page based on the response 341
Exploring an Ajax Example 341
Book VI: Graphics 345
Chapter 1: Understanding Web Graphics . . . . . . . . . . . . . . . . . . . . . . .347
It’s a Rasterized World: Exploring the Two Types of Graphics 347
It’s All about Quality: Finding Good Graphics 348
Avoiding Graphics That Lead to No Good 349
Choosing a Graphics Editor 349
Fitting Graphics into Your Design 350
Using graphical links 351
Incorporating hotspots and image maps 351
Chapter 2: Optimizing Your Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . .353
Determining Which Graphics File Type to Use 353
JPEG: A great all-around format 354
GIF: Great for text and transparencies 355
PNG: The (relatively new) kid on the block 355
Avoiding Graphic Violence: Speed Up Your Web Graphics 357
Reducing the  le size 357
Cropping and shrinking the image 358
Making the image download “seem” faster 359
Ensuring accurate image dimensions 359
Chapter 3: Image Rollovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361
Creating Rollovers by Using CSS 361

Modifying a picture 405
Working with Hyperlinks 408
Creating a hyperlink 408
Removing a hyperlink 409
Creating an image map and hotspots 409
Chapter 4: Laying Out Your Page with Expression Web. . . . . . . . . . .411
Working with div Elements 411
Adding a div element 412
Sizing and positioning a div element 413
Formatting a div element 415
Working with Layout Tables 418
Inserting a layout table 419
Editing layout cells 421
Chapter 5: “Been There, Formatted That”
with Dynamic Web Templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .423
Understanding Dynamic Web Templates 423
Creating a Dynamic Web Template 424
Using a Dynamic Web Template to Create a New Page 427
Making Changes to Your Dynamic Web Template 428
Attaching and Detaching a Dynamic Web Template 429
Book VIII: Adobe Dreamweaver 431
Chapter 1: Getting to Know Dreamweaver . . . . . . . . . . . . . . . . . . . . . .433
Introducing the Dreamweaver Workspace 433
Exploring the Document Window 435
02_9780470640326-ftoc.indd xx02_9780470640326-ftoc.indd xx 12/29/10 2:55 PM12/29/10 2:55 PM
www.it-ebooks.info
Table of Contents
xxi
Working with the Toolbars 437
Checking Out the Properties Inspector 439

Adding a div element 472
Adding an AP div 473
Chapter 4: Enhanced Page Elements:
Flash Controls and Spry Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .475
Working with Flash Controls 475
Working with Spry Widgets 477
Adding a Spry Menu Bar 478
Adding a Spry Tabbed Panel 481
Adding a Spry Collapsible Panel 483
02_9780470640326-ftoc.indd xxi02_9780470640326-ftoc.indd xxi 12/29/10 2:55 PM12/29/10 2:55 PM
www.it-ebooks.info
Creating Web Pages All-in-One For Dummies, 4th Edition
xxii
Chapter 5: Forms Follow Function. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .489
Adding a Form 489
Making Your Form Elements Accessible 492
Adding Form Elements 493
Capturing text 494
Creating a drop-down list box 495
Adding a check box 497
Adding a radio group 497
Powering up with buttons 498
Creating a Jump Menu 499
Chapter 6: Working with CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .501
Managing Styles with the CSS Styles Panel 501
Working with styles of the selected element 501
Working with all styles 503
Creating a New CSS Rule 503
Editing Style Properties and Rules 506
Creating an External Style Sheet in Dreamweaver 507

Introducing the Flash Workspace 532
Exploring the Flash Drawing Tools 533
Exploring the Properties Inspector 535
Exploring the Flash Panels 535
Media components and elements panels 536
Design panels 537
Scripting panels 539
Customizing Your Workspace 539
Showing and hiding a panel 539
Adding a panel to (or removing a panel from) a panel group 540
Undocking and docking a panel group 540
Saving a workspace layout 540
Chapter 2: Working with the Stage and Layers . . . . . . . . . . . . . . . . . .541
Exploring the Stage 541
Exploring the Timeline and Layers 542
Creating a layer 543
Working with layers 544
Using guide layers 545
Adding Movie Elements to the Stage 545
Adding lines, shapes, and text from the Tools panel 545
Inserting external graphics and media 545
Adding user interface and video components 546
Adding symbols 546
Working with Movie Elements 546
Chapter 3: Working with Symbols. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .549
Understanding Symbols and Instances 549
Creating a New Symbol 550
Creating a symbol from an existing element 550
Creating a symbol from scratch 552
Working with Symbols in the Library 553