Tải bản đầy đủ

Dreamweaver CC the missing manual



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

David Sawyer McFarland and Chris Grover

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


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 (http://my.safaribooksonline.com).
For more information, contact our corporate/institutional sales department:
(800) 998-9938 or corporate@oreilly.com.
December 2013: First Edition.

Revision History for the First Edition:
2013-12-09

First release

See http://oreilly.com/catalog/errata.csp?isbn=0636920027461 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


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




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


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

v




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


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

vii


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


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: pmckie@oreilly.com.
Kara Ebrahim (production editor) lives, works, and plays in Cambridge, MA. She
loves graphic design and all things outdoors. Email: kebrahim@oreilly.com.
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

ix


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: carla_spoon@comcast.net.
Julie Hawks (indexer) is a teacher and eternal student. She can be found wandering
about with a camera in hand. Email: juliehawks@gmail.com.

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


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

xi



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


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


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

xv


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


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
,
,

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×