Dreamweaver CC the missing manual

free ebooks ==> www.ebook777.com

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

Dreamweaver CC
The book that should have been in the box®

David Sawyer McFarland and Chris Grover

Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
Dreamweaver CC: The Missing Manual
by David Sawyer McFarland and Christopher Grover
Copyright © 2014 David McFarland and O’Reilly Media, Inc. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc.,
1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use.
Online editions are also available for most titles ().

For more information, contact our corporate/institutional sales department:
(800) 998-9938 or
December 2013: First Edition.
Revision History for the First Edition:
2013-12-09

First release

See for release details.

The Missing Manual is a registered trademark of O’Reilly Media, Inc. The Missing
Manual logo, and “The book that should have been in the box” are trademarks of
O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to
distinguish their products are claimed as trademarks. Where those designations
appear in this book, and O’Reilly Media is aware of a trademark claim, the
designations are capitalized.
While every precaution has been taken in the preparation of this book, the publisher
assumes no responsibility for errors or omissions, or for damages resulting from the
use of the information contained in it.
ISBN-13: 978-1-449-34170-1

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

Contents
The Missing Credits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
What Dreamweaver Is All About. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv

Why Dreamweaver?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv
What’s New in Dreamweaver CC. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Life in the Cloud. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
What’s Gone in Dreamweaver CC. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
HTML Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Document Types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
Of Tags and Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
XHTML in Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
HTML5, The New Markup Standard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
Add Style with Cascading Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv
Add Interactivity with JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv
Mobile Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv
How This Book Is Organized. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvi
About This Book. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvi
Windows and Macintosh Commands. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvii
The Very Basics of Reading This Book. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvii
About→These→Arrows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxviii
Online Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxviii
Using Code Examples. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxx
Safari® Books Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxx

Part One:


CHAPTER 1:

Building a Web Page
Dreamweaver CC Guided Tour. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Download Dreamweaver CC. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The Dreamweaver CC Interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Setting Up a Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Creating a Web Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Managing Files and Folders with the Files Panel. . . . . . . . . . . . . . . . . . . . . . . 28
The Dreamweaver Test Drive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

iii

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com


CHAPTER 2:

Working with Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Adding Text in Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Adding Special Characters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Selecting Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
HTML Formatting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Paragraph Formatting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Creating and Formatting Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Text Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Spell-Checking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96



CHAPTER 3:

Introducing Cascading Style Sheets. . . . . . . . . . . . . . . . . . . . . . . 99

Cascading Style Sheet Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Creating Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Using Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Manipulating Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Formatting Text with CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Cascading Style Sheets Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147



CHAPTER 4:Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

165

Understanding Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Adding a Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Adding an Email Link. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Linking Within a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Modifying a Link. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Styling Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Creating a Navigation Menu Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Link Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204


CHAPTER 5:Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

219

Adding Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Inserting an Image from Photoshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Modifying an Image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Controlling Images with CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Editing Graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Image Maps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Rollover Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Tutorial: Inserting and Formatting Graphics. . . . . . . . . . . . . . . . . . . . . . . . . . 257


CHAPTER 6:Tables.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

269

Table Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Inserting a Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Selecting Parts of a Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Expanded Tables Mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Formatting Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Modifying Cell and Row Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
iv

Contents

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
Adding and Removing Cells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Merging and Splitting Cells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Tables Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

CHAPTER 7:

HTML Under the Hood. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Controlling How Dreamweaver Handles HTML. . . . . . . . . . . . . . . . . . . . . . . . 309
Code View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Live Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Quick Tag Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Comparing Versions of a Web Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Finding References. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348



CHAPTER 8:

Find and Replace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Find and Replace Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Basic Text and HTML Searches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Advanced Text Searches. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Advanced Tag Searches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
A Powerful Example: Adding Alt Text Fast. . . . . . . . . . . . . . . . . . . . . . . . . . . 362

Part Two:


CHAPTER 9:

Building a Better Web Page
Advanced CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Compound Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Fast Style Editing with CSS Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Moving and Managing Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Resolving CSS Conflicts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Using the Code Navigator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Styling for Print. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
CSS Transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Using CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Advanced CSS Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413

CHAPTER 10:

Page Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Types of Web Page Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Float Layout Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
Understanding the Box Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Dreamweaver’s CSS Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Modifying Dreamweaver’s CSS Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449
Absolute Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Adding an AP Element to Your Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
Modifying AP Element Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
CSS Layout Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

Contents

WWW.EBOOK777.COM

v


free ebooks ==> www.ebook777.com

CHAPTER 11:

Troubleshooting CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Analyzing CSS with Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Overcoming Common CSS Problems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490

CHAPTER 12:

Designing Websites for Mobile Devices. . . . . . . . . . . . . . . . . . . 497
Previewing Pages at Different Resolutions. . . . . . . . . . . . . . . . . . . . . . . . . . . 499
Media Queries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506
Strategies for Using Media Queries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518
jQuery Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521
Fluid Grid Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544
Fluid Grid Layout Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548

Part Three:

Bringing Your Pages to Life

CHAPTER 13:

Adding Interactivity with jQuery.. . . . . . . . . . . . . . . . . . . . . . . . . 573
JavaScript, jQuery, and jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573
Adding an Accordion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
Tabs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589
Datepicker. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592
Dialog. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593

jQuery UI Widgets for Programmers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
Dreamweaver Behaviors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597
Applying Dreamweaver Behaviors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597
Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601
A Sampler of Actions, One by One. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602

CHAPTER 14:Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

615

Form Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615
Creating a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
Adding Form Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622
Forms Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
CHAPTER 15:

Adding Sound, Video, and Animation.. . . . . . . . . . . . . . . . . . . . 669
Adding Sound to Your Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669
Using HTML5 Video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676
Adding Video Through YouTube. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684
Flash: An Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686
Automate the Flash Download. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .695
Add Flash Videos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696
Adding Adobe Edge Animate Animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . 701

vi

Contents

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com
Part Four:

Managing a Website

CHAPTER 16:

Introducing Site Management. . . . . . . . . . . . . . . . . . . . . . . . . . . . 707
The Structure of a Website. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708
Setting Up a Site (in Depth). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712
Managing Dreamweaver Sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718
Site Assets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725

CHAPTER 17:

Testing Your Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735
Site Launch Checklist. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735
Testing Web Pages with BrowserStack. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739
Find and Fix Broken Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745
Validating Web Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 752
Cleaning Up HTML (and XHTML). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 755
Site Reporting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 758

CHAPTER 18:

Moving Your Site to the Internet. . . . . . . . . . . . . . . . . . . . . . . . . . 763
Adding a Remote Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 763
Transferring Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 776

Check In and Check Out. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785
Synchronizing Site Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 791
Communicating with Design Notes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 795

Part Five:

Dreamweaver CC Power

CHAPTER 19:

Snippets and Libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 807
Snippets Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 807
Using Snippets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 809
Creating Snippets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 810
Built-In Snippets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 812
Library Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 813
Creating and Using Library Items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 815
Editing Library Items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 818
Snippets and Library Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 820

CHAPTER 20:Templates.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

827

Template Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 827
Creating a Template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 830
Defining Editable Regions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 832
Building Pages Based on a Template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 834
Updating a Template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 839
Using Repeating Regions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 841

Using Editable Tag Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 846

Contents

WWW.EBOOK777.COM

vii


free ebooks ==> www.ebook777.com
Using Optional Regions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 852
Exporting a Template-Based Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 857
Template Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 859
CHAPTER 21:

Customizing Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 869
Keyboard Shortcuts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 869
Dreamweaver Extensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 874

CHAPTER 22:

Working with Server-Side Programming.. . . . . . . . . . . . . . . . . 881
Pieces of the Puzzle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 883
Dynamic Websites: The Setup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 885
Creating a Dynamic Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 891
Using Server-Side Includes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 892
Working with Related PHP Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 895
PHP Code Hints. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 897

Part Six:Appendixes

APPENDIX A:

Getting Help. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 903
Getting Online Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 903
Getting Help from Other Dreamweaver Fans. . . . . . . . . . . . . . . . . . . . . . . . . 909

APPENDIX B:

Dreamweaver CC, Menu by Menu. . . . . . . . . . . . . . . . . . . . . . . . . 913
File Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 913
Edit Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 915
View Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 918
Insert Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 921
Modify Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 923
Format Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 924
Commands Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 925
Site Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 926
Window Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 928
Help Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 931

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 933

viii

Contents

WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com

The Missing Credits
ABOUT THE AUTHORS
David Sawyer McFarland is president of Sawyer McFarland Media,
Inc., a web development and training company in Portland, Oregon.
He’s been building websites since 1995, when he designed his first
site, an online magazine for communication professionals. He’s served
as the Webmaster at the University of California at Berkeley and the
Berkeley Multimedia Research Center, and he has helped build, design,
and program numerous websites for clients including Macworld.com, among others.
In addition to building websites, David is a writer, trainer, and instructor. He’s taught
web design at the UC Berkeley Graduate School of Journalism, the Center for Electronic Art, the Academy of Art College, and the Art Institute of Portland. He currently
teaches in the Multimedia Program at Portland State University. He’s written articles
about web design for Practical Web Design, Macworld, and CreativePro.com.
David is also the author of CSS: The Missing Manual and JavaScript & jQuery: The
Missing Manual.
Chris Grover is a veteran of the San Francisco Bay Area advertising
and design community. Chris is the owner of Bolinas Road Creative
(www.bolinasroad.com), an agency that helps businesses promote
their products and services. Chris has written several books in
the Missing Manual series and has produced training videos for
video2brain, Educator.com, and Lynda.com.
Chris welcomes feedback about this book by email at dreamweaver@bolinasroad.
com. (If you need technical help, however, please refer to the sources listed in
Appendix A: Getting Help.)

ABOUT THE CREATIVE TEAM

Peter McKie (editor) has a master’s degree from Boston University’s School of
Journalism and lives in New York City. In his spare time, he digitizes archival photos
of his summer community. Email:
Kara Ebrahim (production editor) lives, works, and plays in Cambridge, MA. She
loves graphic design and all things outdoors. Email:
Murray R. Summers (technical reviewer) is an Adobe Certified Dreamweaver Developer and Community Professional. He has co-authored and contributed chapters to several books on Dreamweaver, been the technical editor for the last eight
editions of the Dreamweaver Missing Manual, and presented at multiple national

THE MISSING CREDITS

WWW.EBOOK777.COM

ix


free ebooks ==> www.ebook777.com
conferences. His company, Great Web Sights, has been active in web development
since 1998. Murray lives in southern Delaware with his wife, Suzanne. One daughter
works at Clemson University and lives in Greenville, SC, and the other is a skilled web
developer (carolinawebcreations.biz). His two sons live and work in Virginia Beach.
Danilo Celic, Jr. (technical reviewer) has been using Dreamweaver since version 1.2.
In the years since, he has contributed to the Dreamweaver community in a variety
of capacities. He has been a co-author, technical editor, and technical reviewer for
a shelf full of Dreamweaver- and Web-related books. He loves sharing what he has
learned over the years of the inner workings of Dreamweaver and various web
technologies. Danilo lives in the suburbs of Chicago with his wife, Melissa, who patiently forgives the late hours he puts in in front of a glowing screen. Email: danilo@
shimmerphase.com.
Carla Spoon (proofreader) is a freelance writer and copyeditor. An avid runner, she
works and feeds her tech gadget addiction from her home office in the shadow of
Mount Rainier. Email:

Julie Hawks (indexer) is a teacher and eternal student. She can be found wandering
about with a camera in hand. Email:

ACKNOWLEDGMENTS
Thanks to all those who have helped with this book (and all of my books over the
years): my students, colleagues, and the wonderful people at O’Reilly. Thanks to
Murray Summers and Danilo Celic for their careful scrutiny and erudite corrections
to my writing; thanks also to Peter McKie for making my writing more energetic
and clearer.
—Dave McFarland
I’m always amazed at the number of pros it takes to create a book like Dreamweaver
CC: The Missing Manual. My thanks go to out to everyone who worked on this book,
including the technical reviewers. I also want to thank my wife, Joyce, for her love
and support.
—Chris Grover

THE MISSING MANUAL SERIES
Missing Manuals are witty, superbly written guides to computer products that don’t
come with printed manuals (which is just about all of them). Each book features a
handcrafted index.
Recent and upcoming titles include:

Windows 8.1: The Missing Manual by David Pogue
Switching to the Mac: The Missing Manual, Mavericks Edition by David Pogue
OS X Mavericks: The Missing Manual by David Pogue

x

THE MISSING CREDITS

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
HTML5: The Missing Manual, Second Edition by Matthew MacDonald
Photoshop Elements 12: The Missing Manual by Barbara Brundage
Photoshop CC: The Missing Manual by Lesa Snider
Office 2013: The Missing Manual by Nancy Connor, Matthew MacDonald
Quickbooks 2013: The Missing Manual by Bonnie Biafore
WordPress: The Missing Manual by Matthew MacDonald
For a full list of all Missing Manuals in print, go to www.missingmanuals.com/library.
html.

THE MISSING CREDITS

WWW.EBOOK777.COM

xi


free ebooks ==> www.ebook777.com

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

Preface

W

ebsites evolve every year, growing in scope, capability, and complexity, making sites look and work ever better over time. Even people with
personal sites use a collection of programming languages and server
technologies to dish up their content.
Throughout its history, Dreamweaver has kept pace with the changing webdevelopment landscape, and Adobe’s latest offering, Dreamweaver Creative Cloud,
is no exception—it does more than any previous version of the program. Whether
you want to use Cascading Style Sheets (CSS) for cutting-edge site design, create
JavaScript-powered dynamic web pages, incorporate HTML5, build websites for
mobile devices, use content management systems like WordPress or Drupal, or simply
stick to straightforward HTML, Dreamweaver has just about all the tools you need.
Any enterprising designer can create web pages, Cascading Style Sheets, and even
JavaScript programs using just a simple text editor. In fact, Dreamweaver CC’s powerful text editor lets you handcraft files to create any kind of web file you want, from
simple HTML content to complex database-powered web pages. However, typing
in HTML, CSS, and JavaScript code is not only a recipe for carpal tunnel syndrome,
it’s a slow and typo-prone way to build web pages. Dreamweaver provides buttons,
dialog boxes, and panels that let you add HTML, CSS, and JavaScript quickly, with
fewer keystrokes. For example, in a matter of seconds, a simple button lets you insert
the complex HTML required to insert a video into your web page. And Dreamweaver
is flexible enough to let you hand-code pages and use time-saving HTML shortcuts
in tandem—the choice is yours.

xiii

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
WHAT
DREAMWEAVER
IS ALL ABOUT

 NOTE  To emphasize that its Creative Suite applications (Dreamweaver, Photoshop, InDesign, and so on) now

reside exclusively in the cloud, Adobe added “CC” to the creative suite product names. So, for this new version of
Dreamweaver, what used to be Dreamweaver CS6 has become Dreamweaver CC. Throughout this book, and out
there in the site design/developer world, the name is usually shortened to CC.

What Dreamweaver Is All About
Dreamweaver is a complete website development and site-management program.
It works with web technologies like HTML, XHTML, CSS, JavaScript, and PHP.
Its CSS support lets you create fast-loading, easily modified pages, while its support
for the popular jQuery JavaScript framework lets you create complex, interactive
page elements, like tabbed panels and collapsible content panels, with a single key
click.
Dreamweaver also includes plenty of tools to manage your sites once you build them.
You can check for broken links, use templates to implement site-wide page changes,
and reorganize your site in a flash with the program’s site-management tools.
 NOTE  If you’re unfamiliar with the acronym CSS, it stands for Cascading Style Sheets—a set of rules you

write that dictate the look of your pages. Dreamweaver includes advanced tools to create, test, and edit CSS in
your pages.

If you’ve built one or more sites without Dreamweaver, you don’t have to start over
again. The program happily opens web pages and websites created in other programs
without destroying any of your carefully crafted code.

Why Dreamweaver?
You can find dozens of web design programs on the market, but Dreamweaver is
one of the leaders, thanks to key benefits like these:
• Visual page-building. If you’ve ever spent time using a text editor to punch

out HTML for your web pages, you know the tedium involved in adding even a
simple photograph. When your boss asks you to add her photo to the company
home page, you launch your trusty text editor and type in something like src=“images/staff/bigcheese.jpg” width=“100” height=“150” alt=“The Boss”>.
Not only is this approach prone to typos, it separates you from what you want
the page to look like.
Dreamweaver, on the other hand, gives you a several ways to stay in touch with
your page’s visual design. If your interest is in design and not HTML, you can work
in the program’s Design view. Drag an image to your budding web page there,
and Dreamweaver displays the picture on the page. Just as a word processor

xiv

DREAMWEAVER CC: THE MISSING MANUAL

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
displays documents as they’ll look when you print them out, so Dreamweaver
gives you a close approximation of what your page will look like in a web browser.

WHY
DREAMWEAVER?

Because Dreamweaver’s Design view is only an approximation of what a page
will look like in a browser, the program offers Live view, too—a real-time look at
your page in a browser built right into Dreamweaver. Using it, you can see what
a page looks like and how it behaves without leaving Dreamweaver!
Another approach web designers commonly use is monitoring a page’s code

and its appearance side-by-side. Dreamweaver’s Split view handles that, giving
you direct access to the HTML of a page on one half of the screen and to its
visual look on the other half. For the visual half, you can use either Design view,
or, for greatest accuracy, Live view. Using this technique, you can hammer out
your HTML in the Code view half of the monitor and quickly see the effect in a
web browser in the Live view half of your screen.
• Complex interactivity, simply. You’ve probably seen web pages where an image (on a navigation bar, for example) lights up or changes appearance when
you mouse over it. Dynamic effects like these—mouse rollovers, alert boxes,
and pop-up dialog boxes—usually require JavaScript programming, a language
browsers understand. While JavaScript can do amazing things, it requires time
and practice to learn.
Dreamweaver CC now supports the wildly popular jQuery JavaScript framework, and its sister project, jQuery UI, which provides easy-to-use “widgets”
that make adding interactive page elements like tabbed panels, pop-up date
selectors, and dialog boxes a breeze.
 NOTE  Dreamweaver CC drops the “Spry” JavaScript framework that older versions of the program supported

in favor of the jQuery framework. See page 573 and the note on page 575 for details.

• Solid code. Every now and then, even in Dreamweaver, you may want to put
aside the visual view and look at a page’s underlying HTML. You may want to
tweak the code that Dreamweaver produces, for example, or see how Dreamweaver writes code.
Adobe realizes that many professional web developers do a lot of work “in the
trenches,” typing in HTML, CSS, and JavaScript code by hand. In Dreamweaver,
you can edit a page’s raw HTML to your heart’s content. Switching back and
forth between Design view and Code view is seamless and, best of all, nondestructive. Unlike many visual web page programs, where making a change in
the visual mode stomps all over the underlying HTML, Dreamweaver respects
hand-typed code and doesn’t try to rewrite it (unless you ask it to). You can
even use Dreamweaver’s Split view to see your HTML side-by-side with a representation of your final page.
In addition, Dreamweaver can open many other types of files commonly used on
websites, such as external JavaScript files (.js files), so you don’t have to switch

PREFACE

WWW.EBOOK777.COM

xv


free ebooks ==> www.ebook777.com
WHY
DREAMWEAVER?

to another program to work on them. Dreamweaver’s Related Files toolbar lists
all CSS, JavaScript, and server-side files the current document uses. For handcoders, this feature means that editing a page’s CSS or JavaScript is just a click
away (instead of a time-draining File→Open hunt for that danged file). Chapter
7 has the scoop on how Dreamweaver handles writing and editing code.
• Site-management tools. Rarely will you build just a single web page. More
often, you’ll create and edit pages that work together to form part of a website.
Or you may build an entire website from scratch.
Either way, Dreamweaver’s site-management tools make your job easier. They
automate many of the routine tasks every webmaster faces, from managing
links, images, pages, and other media, to working with a team of people and
moving your site to a web server. Part 4 of this book looks at how Dreamweaver
helps you build and maintain websites.

UP TO SPEED

Hand Coding vs. Visual Editors
At one time, creating web pages in a text editor was considered
the best way to build websites. The precise control that handwritten code gave you over HTML was (and often still is) seen

as the only way to assure quality web pages.
Professional site developers championed hand-coding because
many early visual page-building programs added unnecessary code—code that affected how a page appeared and how
long it took to download over the Internet. But hand-coding
is time-consuming and error-prone. One typo can render a
web page useless.
Fortunately, Dreamweaver creates solid code even in a visual
environment. Since its earliest incarnation, Dreamweaver has
prided itself on its ability to produce clean HTML and its
tolerance for code created by other programs—including text
editors. In fact, Dreamweaver includes a powerful built-in
text-editing mode that lets you freely manipulate the HTML of
a page—or any other code, including JavaScript, Visual Basic,
XML, PHP, and ColdFusion Markup Language.

But the real story behind the code Dreamweaver produces in
Design mode is that it’s as solid and well-written as handhewn code. Knowing this, feel free to take advantage of the
increased productivity that Dreamweaver’s visual-editing
mode brings to your day-to-day work with its one-click objects,
instant JavaScript, and simplified layout tools. Doing so won’t
compromise your code and will certainly let you finish your
website in record time.
Honestly, no web design program is really WYSIWYG (“what
you see is what you get”). Because every browser renders the
HTML language slightly differently, web design is more like
WYSIRWYGOAGD: “what you see is roughly what you get, on a
good day.” That’s why Dreamweaver’s Live view can help you
make sure your pages look the way you really want them to.
Finally, if you have experience hand-coding HTML and CSS,
you’ll be pleasantly surprised by Dreamweaver’s powerful

text-editing capabilities. In fact, even though Dreamweaver
has a reputation as a visual web page editor, it’s also one of
the best text-editing programs on the market.

• Have it your way. As if Dreamweaver didn’t have enough going for it, the program’s engineers have created a completely customizable product, or, as they
call it, an extensible program. Anyone can add to or change Dreamweaver’s
menus, commands, objects, and windows.
Suppose, for example, that you hardly ever use any of the commands in the Edit
menu. By editing one text file in the Dreamweaver Configuration folder, you can
xvi

DREAMWEAVER CC: THE MISSING MANUAL

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
get rid of unwanted menu items—or even add commands of your own creation.
This incredible flexibility lets you customize Dreamweaver to fit the way you
work, and even add features that Adobe’s programmers never imagined. Best
of all, the Adobe Exchange website includes hundreds of free and commercial
extensions for Dreamweaver. See Chapter 21 for details.

WHAT’S
NEW IN
DREAMWEAVER
CC

What’s New in Dreamweaver CC
If you haven’t used Dreamweaver before, see Chapter 1 for the grand tour. If you’re

upgrading from Dreamweaver CS6 or some other version of the program, you’ll find
that Dreamweaver CC offers a host of new features:
• HTML5 is touted by everyone from AT&T to Google as the next big thing
(described in more detail on page 430). It’s the first major change to HTML in
years, and it promises to make building powerful websites easier than ever.
Dreamweaver CS6 introduced very basic support for HTML5 that simplified
hand-coding the new HTML5 tags. Fortunately, Dreamweaver CC brings HTML5
to Design view, providing simple menu options that let you insert new HTML5
elements like <header>, <article>, <nav>, <section>, and so on. It also now lets
you insert the many useful HTML5 form elements, such as web addresses, date,
email addresses, and search fields, among others. Finally, CC makes adding the
HTML5 <video> and <audio> tags easy, so you can insert video and audio that
works on smartphones as well as web browsers.
• CSS is the heart of web design. While HTML provides the structure for content,
CSS gives it color, layout, and graphical interest. Because CSS is so fundamental to web design, Adobe took a long look at how designers use CSS and
completely revamped CSS creation and editing in CC. As a result, you’ll use the
CSS Designer panel to visually manage complex sets of styles. You’ll use the
CSS Transitions panel to develop engaging and useful visual effects. These new
tools are covered on page 397.
• Web Fonts. Dreamweaver CC’s typography options build off of the web fonts
feature added in Dreamweaver CS6. In addition to being able to use your own
set of fonts, CC lets you take advantage of free, hosted fonts from Adobe using
Adobe Edge Web Fonts. This free service gives you access to dozens and dozens
of fonts. You’ll learn more about this new feature on page 128.
• Mobile web design. Dreamweaver CS6 introduced many new tools to help
designers build websites that work on mobile devices like smartphones and
tablets. CC improves on this “fluid grid layout” feature, which lets you create
designs that re-flow content to match different devices. For example, using the
same HTML, you can create designs that display a single column of content for
a phone, two columns for a tablet, and three or more columns for a spacious

desktop monitor. CC adds support for nested elements, and significantly improves the workflow for fluid grids.

PREFACE

WWW.EBOOK777.COM

xvii


free ebooks ==> www.ebook777.com
LIFE IN THE
CLOUD

• jQuery UI. Dreamweaver CC replaces Adobe’s outdated Spry framework with the
wildly popular jQuery library and its user-interface toolkit known as jQuery UI.
Unfortunately, jQuery UI doesn’t replace all the Spry widgets available in earlier
versions of Dreamweaver (see page xix for more on Spry and what’s missing).

Life in the Cloud
Adobe Creative applications, like Dreamweaver, no longer come from a disc in a
box—they come from the cloud. That change may have a greater effect on your
wallet than it does on your computer. Like many other companies, Adobe decided
it is better to get a little money from you each month than it is to get big whopping
sums every couple of years. In essence, you lease Creative Cloud software. You can
pay $19.99 a month for the license to use Dreamweaver or $49.99 a month for the
license to use Dreamweaver and a whole suite of creative apps such as Photoshop,
Illustrator, InDesign, Flash, and Premiere Pro. Those are just the major tools; the
complete list is really pretty impressive. See />creativecloud.html.
The first time you install an app, like Dreamweaver, from the Creative Cloud, you use
the Download Center—a web page that you log into after you’ve paid the licensing

fee. Click on the Download button next to the Dreamweaver icon and follow the
links and instructions to download and install the application on your computer. Yes,
that’s right, Dreamweaver CC is an application that’s installed on the hard drive of
your computer, just like the previous versions. The difference is that periodically,
Dreamweaver will check back with the mothership to make sure you still have a
license to use the program. Depending on your agreement with Adobe, that period
is either 30 days or 99 days. If you don’t have a valid license, you can’t use the app.
The web pages that you’ve created in Dreamweaver won’t disappear, you just can’t
use Dreamweaver to work on the project unless you’re paid up and licensed.
When you first install Dreamweaver or any other Creative Cloud app on your computer, you also install the Creative Cloud desktop app, which keeps track of the
Adobe CC apps on your computer and notifies you when there are updates. Once
the CC app is installed, you can install and update Dreamweaver or any of the other
apps that you are licensed to use. All it takes is a click of a button.
 NOTE  The Creative Cloud app is compatible with Windows 7 or later or Mac OS X 10.7 or later. If you have an

earlier operating system, you use the older Adobe Application Manager to download and install CC applications.

What’s Gone in Dreamweaver CC
With Dreamweaver CC, Adobe took a long, hard look at a fairly old program. They
decided that it was time for some serious housecleaning:

xviii

DREAMWEAVER CC: THE MISSING MANUAL

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
• Server behaviors. Dreamweaver’s innovative server behaviors were a boon to

those afraid of server-side programming. They let non-programmers add basic
database integration into their websites, making it easy to add forms to collect
(and store) visitor information. For the last several versions of the program,
however, Adobe largely ignored Dreamweaver server behaviors, and the code
behind their magic wasn’t up to current programming standards. In CC, Adobe
finally pulled the plug on these database tools. If you want to integrate your site
with a database, you either need to learn how to program the website-database
interaction yourself or use an extension that adds the tools necessary to create
database-driven web pages. For that, you can turn to a third party solution,
such as WebAsisst (www.webassist.com).

HTML BASICS

• Spry. Adobe’s Spry JavaScript Framework for AJAX was once a cutting-edge
set of tools that made building forms, drop-down menus, and other interactive
page features simple. However, the programming behind these elements is out
of date, and a hugely popular replacement, jQuery, has arisen out of the world
of open source software. jQuery is a free JavaScript framework that more than
40 percent of the world’s websites use. Adobe wisely realized that they could
never keep their Spry framework up to the level of jQuery and, in Dreamweaver
CC, dropped support for Spry and replaced it with jQuery and the jQuery user
interface library. However, while Adobe replaced many Spry widgets with jQuery
counterparts, there are a few exceptions: For example, there’s no longer a tool
that lets you build drop-down navigation menus, nor are there any tools that
let you validate forms. See the box on page 575 for more.
• BrowserLab. Earlier versions of Dreamweaver integrated directly with BrowserLab, Adobe’s online service that displayed your web pages in a variety of
browsers. BrowserLab let you see, for example, if your page looked the same
in Internet Explorer 7 as it did in Google Chrome. However, Adobe closed
BrowserLab in March 2013 and removed it from Dreamweaver CC. Adobe now
refers developers to BrowserStack (www.browserstack.com/) and Sauce Labs

( for web pages. Adobe recommends using their Edge
Inspect tool (adobe.com/edge/inspect/) for mobile web projects.
• Assorted changes. Dreamweaver CC boasts a number of smaller changes,
too. Among them are the removal of the panel that let you manage absolutely
positioned elements (see page 457 for more on absolute positioning), the link to
Adobe’s Bridge program so you could browse for files outside of Dreamweaver,
and the File→Convert tool that translated the HTML of one type (say, XHTML)
to the HTML of another type (HTML5, for example).

HTML Basics
Under the hood of any web page—whether it’s your uncle’s “Check out this summer’s
fishin’” page or the front door of a billion-dollar online retailer—is nothing more than
line after line of ordinary text. You embed simple commands, called tags, within this
text. Web browsers know how to interpret these tags to properly display your pages.
PREFACE

WWW.EBOOK777.COM

xix


free ebooks ==> www.ebook777.com
DOCUMENT
TYPES

When you create a page with tags in it, the document becomes known as an HTML
page (for Hypertext Markup Language). HTML is at the heart of most of the Web.
The HTML code that creates a web page can be as simple as this:
" /><html>

<head>
<title>Hey, I am the title of this web page.</title>
</head>
<body>

Hey, I am some body text on this web page.

</body>
</html>

While it may not be exciting, this short bit of HTML is all you need to create an
actual web page.

Document Types
The first line of the code above:
" />
is called a “doctype,” and it identifies the flavor of HTML you used to create the page.
Developers have used two doctypes for years—HTML 4.01 and XHTML 1.0—and each
has two versions: strict and transitional. Dreamweaver can create any type of HTML—
you simply tell it which you want when you create a new web page (see page 25).
Dreamweaver even lets you use the latest, greatest, and simplest doctype, HTML5.
It replaces the extraneous code of earlier doctypes with much simpler and straightforward code:
<!DOCTYPE HTML>

Yep, that’s the entire doctype declaration. HTML5 is much easier to use than plain old
HTML in many ways, and Dreamweaver CC supports this new version of the web’s
lingua franca. This book uses the HTML5 doctype—it’s short, simple, and supported
by every major browser (even back to Internet Explorer 6). And because HTML5 is
the future of the Web, there’s no reason to use older doctypes.
But no matter which doctype you use, it’s important that you always use one, because without it, different browsers display CSS differently, and your pages will look
different depending on your visitor’s browser.

Different doctypes do require that you write your HTML in a particular way. For
example, the line break tag looks like this in HTML 4.01:



xx

DREAMWEAVER CC: THE MISSING MANUAL

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
OF TAGS AND
PROPERTIES

But in XHTML, you write it this way:



HTML5 lets you write it either way. Fortunately, you won’t have to worry about these
subtle differences when you use Dreamweaver to insert your HTML—it automatically
adjusts to the doctype you chose, inserting the appropriate HTML.

Of Tags and Properties
In the preceding example—and, indeed, in the HTML of any web page—you’ll notice
that most commands appear in pairs that enclose a block of text or other commands.
These bracketed commands, like the

command that denotes the beginning of
a paragraph, constitute the “markup” part of HTML (hypertext markup language),
and they’re called tags. Sandwiched between greater-than and less-than signs, tags
are simply instructions that tell a web browser how to display a page.

The starting tag of each pair tells a browser where the instruction begins, and the
closing tag tells it where the instruction ends. A closing tag always includes a forward slash (/) after the first bracket symbol (<), so the closing tag for the paragraph
command above is

.
Fortunately, Dreamweaver can generate all these tags automatically. You don’t have
to memorize or even type them in (although many programmers still enjoy doing
so for greater control). Behind the scenes, Dreamweaver’s all-consuming mission is
to convert your visual design into underlying code, like this:
• The <html> tag appears once at the beginning of a web page and again (with
an added closing slash) at the end. This tells a browser that the information
between these two tags is written in HTML, as opposed to some other language.
All the contents of the page, including any other tags, appear between these
opening and closing <html> tags.
If you were to think of a web page as a tree, the <html> tag would be its trunk.
Springing from the trunk are two branches that represent the two main parts
of any web page: the head of the page and the body.
• The head of a web page contains the title of the page (“Izzie’s Mail-Order Pencils”). It may also include other, invisible information, such as a page description, that browsers and search engines use. You surround the head section with
opening and closing <head> tags.
The head section can also include information that browsers use to format a
page’s HTML and add interactivity. You can store CSS styles and JavaScript code
in the head, for example, or you can embed links to external CSS and JavaScript
files there. In fact, the interactivity you’ll see in Dreamweaver’s jQuery UI widgets
(Chapter 13) work with the help of JavaScript code stored in separate files on a
server; the link to these files resides in the page’s head section.

PREFACE

WWW.EBOOK777.COM

xxi

free ebooks ==> www.ebook777.com
XHTML IN
DREAMWEAVER

The body of a web page, identified by its beginning and ending <body> tags,
contains all the content that appears inside a browser window—headlines, text,
pictures, and so on. When you work in Dreamweaver’s Design view, the blank
white portion of the document window represents the body area. It resembles
the blank page of a word-processing program.
Most of your work with Dreamweaver will involve inserting and formatting text, pictures, and other objects into the body portion of a document. Many tags commonly
used in web pages appear within the <body> tag. Here are a few:
• You can tell a web browser where a paragraph of text begins with a

(opening paragraph) tag, and where it ends with a

(closing paragraph) tag.
• The <strong> tag emphasizes text. The text between an opening and closing
<strong> tag shows up as boldfaced. The HTML snippet <strong>Warning!strong> tells a web browser to display the word “Warning!” in bold type on
the screen.
• The <a> tag, or anchor tag, creates a link (hyperlink) on a web page. A link, of
course, can lead anywhere on the Web. How do you tell a browser where the link
should point? Simply give address instructions inside the <a> tags. For instance,
you might type <a href=“”>Click here!</a>.
The browser knows that when your visitor clicks the words “Click here!”, it
should go to the Missing Manuals website. The href part of the tag is called, in
Dreamweaver, a property (you may also hear it called an attribute), and the URL
(the Uniform Resource Locator, or web address) is the value of that property. In
this example, is the value of the href property.
Fortunately, Dreamweaver exempts you from having to type any of this code, letting you add properties to tags (and other page elements) through an easy-to-use
window called the Properties panel. To create links the Dreamweaver way (read:
the easy way), turn to Chapter 4.
 NOTE  For a full-fledged introduction to HTML, check out Creating a Website: The Missing Manual, 3rd Edition .

For a primer geared to readers who want to master CSS, pick up a copy of CSS3: The Missing Manual. And if you
want to add interactivity to your web pages (beyond the cool, ready-to-use features that Dreamweaver offers),
you might be interested in JavaScript & jQuery: The Missing Manual. End of advertisements; now back to your
regularly scheduled book.

XHTML in Dreamweaver
Like any technology, HTML has evolved over time. Although standard HTML has
served its purpose well, it’s always been a somewhat sloppy language. Among
other things, it allows uppercase, lowercase, and mixed-case letters in tags (<body>,
<BODY>, and <bODy> are all correct, for example) and permits unclosed tags (so
you can use an opening

tag without a closing

tag to create a paragraph,

xxii

DREAMWEAVER CC: THE MISSING MANUAL

WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
for instance). While this flexibility may make page-writing easier, it also makes life
more difficult for web browsers, smartphones, and other technologies that must
interact with these pages. Additionally, HTML doesn’t work with one still-useful
Internet language, XML (Extensible Markup Language).

HTML5, THE
NEW MARKUP
STANDARD

To keep pace with the times, an improved version of HTML, called XHTML, was
introduced back in 2000, and you’ll find it used frequently on many sites (in fact,
XHTML is just an “XML-ified” version of HTML). Dreamweaver CC can create and
work with XHTML files as well as plain old HTML pages.
 NOTE  XHTML was seen as the future back in 2000, but HTML5 has since supplanted it. While web browsers

still understand XHTML (and probably will for a long time), you won’t be using it in this book.

HTML5, The New Markup Standard
HTML5 isn’t some radically new technology. In fact, unlike XHTML, which was intended to foster a new way to build web pages, HTML5 is about making sure the
Web continues to work as it always has. Most of the basics of HTML are still in place.
HTML5 adds a few new elements that support the way designers build websites today.
In HTML5, for example, the <header> tag contains the content you’d usually find at
the top of a page, such as a logo and site-wide navigation links; the new <nav> tag
encloses the set of links used to navigate a site; and the <footer> tag houses the stuff
you usually put at the bottom of a page, like legal notices, email contacts, and so on.
In addition, HTML5 adds new tags that let you insert video and audio into a page,
add sophisticated form elements like drop-down date-pickers, and validate forms to
make sure visitors fill them out correctly. Unfortunately, browser support for these
new features isn’t consistent and it’s therefore difficult to use the new tags without
some pretty elaborate workarounds to ensure cross-browser support.
Dreamweaver CC includes new tools that work with HTML5. Click-to-insert buttons
make it easy to insert HTML5 tags like <header>, <footer>, <article>, and <section>.
And CC supports the HTML5 <video> and <audio> tags that make your pages come
to life with video and sound.
But new tags are just one small part of the HTML5 story. HTML5 started life as a
product of the Web Hypertext Application Technology Group (WHATG), which
wanted to create a version of HTML that provided the tools needed to build powerful,
browser-based applications, like Google’s Gmail program. So, much of HTML5 is devoted to powerful (and complicated) technologies like Canvas (for drawing pictures
and diagrams on a web page), data storage (for storing information like game scores,

preferences, and notes on a visitor’s computer), drag and drop functionality, “web
workers” for making JavaScript programs run faster and more efficiently, and “web
sockets” for streaming data from a web server. All these technologies are promising, but browser support for them varies. In addition, Dreamweaver doesn’t provide

PREFACE

WWW.EBOOK777.COM

xxiii