Dreamweaver CC the missing manual

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 co

Dreamweaver CC

David Sawyer McFarland and Chris Grover

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

The book that should have been in the box®

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: Building a Web Page CHAPTER 1: 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

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

COntents v

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: Building a Better Web Page CHAPTER 9: 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

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

COntents vii

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

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

tHe MIssInG CReDIts ix

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

Elec-tronic 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

De-veloper and Community Professional He has co-authored and contributed

chap-ters to several books on Dreamweaver, been the technical editor for the last eight

editions of the Dreamweaver Missing Manual, and presented at multiple national

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 pa-tiently 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 McFarlandI’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

tHe MIssInG CReDIts xi

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

Websites evolve every year, growing in scope, capability, and

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

web-development 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

pow-erful 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

Preface

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

PReFACe xv

WHY DREAMWEAVER?

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

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

im-age (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

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

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

nonde-structive 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

rep-resentation 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

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

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

hand-written 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

unneces-sary 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 hand-hewn 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

pro-gram’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

PReFACe xvii

DREAMWEAVER CC

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

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

funda-mental 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

im-proves the workflow for fluid grids

LIFE IN 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 http://www.adobe.com/products/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 com-puter, 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:

PReFACe xix

HTML BASICS

• 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)

• 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

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

(https://saucelabs.com/) 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

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

The first line of the code above:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

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 forward code:

straight-<!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, cause without it, different browsers display CSS differently, and your pages will look different depending on your visitor’s browser

be-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:

PReFACe xxi

OF TAGS AND PROPERTIES

But in XHTML, you write it this way:

<br />

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

for-ward slash (/) after the first bracket symbol (<), so the closing tag for the paragraph

command above is </p>

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

Pen-cils”) It may also include other, invisible information, such as a page

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

XHTML IN

DREAMWEAVER The contains all the content that appears inside a browser window—headlines, text, body of a web page, identified by its beginning and ending <body> tags,

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

pic-• You can tell a web browser where a paragraph of text begins with a <p> ing paragraph) tag, and where it ends with a </p> (closing paragraph) tag

(open-• 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=“http://www.missingmanuals.com”>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, http://www.missingmanuals.com is the value of the href property.Fortunately, Dreamweaver exempts you from having to type any of this code, let-ting 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 <p> tag without a closing </p> tag to create a paragraph,

PReFACe xxiii

NEW MARKUP STANDARD

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)

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

in-tended 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

de-voted 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

promis-ing, but browser support for them varies In addition, Dreamweaver doesn’t provide

WITH

CASCADING

STYLE SHEETS any easy-to-use tools to tap into these complicated technologies, so you’re a few years off from being able to easily include most HTML5 functionality on your site.

Add Style with Cascading Style Sheets

In the beginning, HTML was the only language you needed to create web pages You could build them with colorful text and graphics, and make words jump out using a limited selection of fonts, font sizes, and font colors Today, however, you can add much more visual stimulation using Cascading Style Sheets CSS is a for-matting language that lets you design pages with sophisticated layouts and precise typographic control For example, it gives you site-wide design consistency for headings and subheads, lets you create unique-looking sidebars, and lets you add special graphics treatment for quotations

From now on, think of HTML as merely the scaffolding you use to organize a page It helps identify and structure page elements Tags like <h1> and <h2> denote headlines and reflect their relative importance A Heading 1 is more important than a Heading

2, for example (and can affect how a search engine like Google adds a page to its search listings) The <p> tag indicates a basic paragraph of information Other tags provide further structural clues: For example, a <ul> tag identifies a bulleted list (to, say, make a list of recipe ingredients more intelligible)

Cascading Style Sheets, on the other hand, add design flair to that highly structured content, making it more beautiful and easier to read Take a look at the CSS Zen Garden site (www.csszengarden.com) Each of the striking, very different websites profiled there use the same underlying HTML The only difference among them—and the sole reason they look different—is that each uses a different style sheet Essentially, a CSS style is just a rule that tells a browser how to display a particular page element—to make an <h1> tag appear orange, 36 pixels tall, and in the Verdana font, for example

But CSS is more powerful than that You use it to add borders, change margins, and even control the exact placement of an element on a page

To be a successful web designer, you need to get to know Cascading Style Sheets You’ll learn more about this exciting technology throughout this book

Add Interactivity with JavaScript

A normal web page—just regular HTML and CSS—isn’t very interactive About the only interaction visitors have with a page like that is clicking a link to load a new page JavaScript is a programming language that lets you supercharge your HTML with animation, interactivity, and dynamic visual effects It can also make a web page more responsive to visitors by supplying immediate feedback For example, a JavaScript-powered shopping cart can instantly display the total cost of your pur-

PReFACe xxv

MOBILE WEB DESIGN

JavaScript can produce an error message immediately after someone attempts to

submit a web form that’s missing information

JavaScript’s main selling point is immediacy It lets web pages respond instantly to

visitor actions: clicking a link, filling out a form, or merely moving the mouse around

the screen, for instance JavaScript doesn’t suffer from the frustrating delay

associ-ated with “server-side” interactive programming languages like PHP, which require

that a web browser communicate with a remote web server before the browser does

anything It doesn’t rely on constantly loading and reloading pages, so your pages

respond with the immediacy of a desktop program

If you’ve visited Google Maps (http://maps.google.com), you’ve seen JavaScript in

action Google Maps lets you zoom in to get a detailed view of streets and zoom out

to get a birds-eye view of how to get across town, the state, or the nation, all from

the same web page While there have been lots of map sites before Google, they

always loaded a new page every time you changed a view (a usually slow process)

The JavaScript programs you create can range from the really simple (such as

pop-ping up a new browser window with a web page in it) to full-blown “web applications,”

such as Google Docs (http://docs.google.com), which let you edit documents, build

spreadsheets, and create presentations using your web browser—all as though the

program were running on your computer

JavaScript programming can be difficult, but Dreamweaver has plenty of tools that

let you add sophisticated interactivity to your sites—from animations to pop-up

dialog boxes—with just a few clicks of your mouse

Mobile Web Design

There’s no doubt that mobile phones have changed how we live They’re also

chang-ing how we build websites The small screens of iPhones and Android phones don’t

treat wide, three-column web pages kindly Many sites shrink down to postage-stamp

size when you look at them on a phone, requiring you to pinch, zoom, swipe, and

scroll to find what you’re looking for Fortunately, you can have websites redraw

themselves to fit the smaller sizes of mobile phones Dreamweaver CC includes

several solutions: the new fluid grid layout tool (page 544) lets you design three

layouts (for phones, tablets, and desktop screens) using the same HTML In other

words, you only have a single web page, but using CSS, you can dynamically alter the

page’s layout depending on the width of the viewing screen You can also craft your

own “media queries” (a CSS3 feature discussed on page 506) to create CSS styles

that apply only to screens at particular widths or within a particular range of widths

Dreamweaver CC lets you create mobile-only websites, too, using jQuery Mobile

(page 521), a JavaScript tool that makes traditional websites look and function more

like mobile applications (and less like web pages)

HOW THIS

BOOK IS

Dreamweaver CC: The Missing Manual is divided into five parts, each with several chapters:

• Part 1 explores Dreamweaver’s main screens and takes you through the basic

steps of page-building It explains how to add and format text, link from one page to another, and spice up your design with graphics It also introduces you

to Cascading Style Sheets

• Part 2 takes you deeper into Dreamweaver and provides in-depth CSS

cover-age, including that for Dreamweaver’s new CSS Designer and CSS Transitions tools In addition, you’ll get step-by-step instructions for creating advanced page layouts, as well as advice on how to view and work with the underlying HTML of a page

• Part 3 helps you add interactivity to your site From the new jQuery UI widgets

that let you add tabbed interfaces to forms that collect information from tors, this section guides you through adding animation, multimedia, and other interactive effects with ease The last chapter in this section explains how to add HTML5 video and audio, Flash animation, and Edge Animate compositions

visi-to your web pages

• Part 4 covers the big picture: managing the pages and files on your site, testing

links and pages, and moving your site to a web server connected to the Internet And since you’re not always working solo, this section covers features that let you work with a team of web developers, too

• Part 5 shows you how to take advantage of timesaving Dreamweaver features

like libraries, templates, and history-panel automation It also covers weaver’s Extension Manager, a program that can add hundreds of free and commercial features to the site-builder

Dream-About This Book

Despite the many improvements in software over the years, one feature has grown consistently worse: documentation Until version 4, Dreamweaver came with a printed manual In MX 2004, all you got was a Getting Started booklet Now, mostly likely, you’re getting the entire application from the cloud If you do get a physical disc, it arrives in an otherwise empty cardboard box To get any real information, you need

to delve into the program’s online help

But even if you have no problem reading a help screen in one window as you work in another, something’s still missing At times, the terse electronic help assumes you al-ready understand the discussion at hand and hurriedly skips over important topics that require in-depth explanation In addition, you don’t always get an objective evaluation

of the program’s features Engineers often add technically sophisticated capabilities

to a program because they can, not because you need them You shouldn’t have to

PReFACe xxvii

READING THIS BOOK

The purpose of this book, then, is to serve as the Dreamweaver manual that should

have been in the box You’ll find step-by-step instructions for every Dreamweaver

feature, including those you may not otherwise have understood, let alone mastered,

such as libraries, Design view, behaviors, and Dreamweaver’s JavaScript tools In

addition, you’ll find honest evaluations of each tool to help you determine which

are useful to you, as well as how and when to use them

 NOTE  This book periodically recommends other books, covering topics that are too specialized or tangential

for a manual on Dreamweaver Careful readers may notice that not every one of these titles is published by

Miss-ing Manual parent O’Reilly Media While we’re happy to mention other Missing Manuals and books in the O’Reilly

family, if there’s a great book out there, we’ll let you know about it

Dreamweaver CC: The Missing Manual is designed to accommodate readers at every

technical level The primary discussions are written for advanced-beginner or

inter-mediate computer users But if you’re new to building web pages, special sidebars

called “Up To Speed” provide the introductory information you need to understand

the topic at hand If you’re a web veteran, on the other hand, keep your eye out for

similar boxes called “Power Users’ Clinic.” They offer more technical tips, tricks, and

shortcuts for the experienced computer fan

Windows and Macintosh Commands

Dreamweaver CC works almost precisely the same way on the Macintosh as it does

in Windows Every button in every dialog box is exactly the same, and the response

to every command is identical This book uses images that alternate between the

various operating systems where Dreamweaver feels at home (Windows 8, Windows

7, Windows Vista, and Mac OS X)

One of the biggest differences between Windows and Mac software is the keystrokes,

because the Ctrl key in Windows is equivalent to the Macintosh’s z key And the key

labeled Alt on a Windows PC (and on non-U.S Macs) is equivalent to the Option

key on American Macs

Whenever this book refers to a key combination, therefore, you’ll see the Windows

keystrokes listed first (using the + symbol for compound commands, as is

custom-ary in Windows documentation); the Macintosh keystrokes follow in parentheses

(with - symbols, in time-honored Mac fashion) In other words, you might read, “The

keyboard shortcut for saving a file is Ctrl+S (z-S).”

The Very Basics of Reading This Book

You’ll find very little jargon or technical terminology in this book You will, however,

encounter a few terms and concepts you’ll come across frequently in your

comput-ing life:

ONLINE

your computer’s mouse or trackpad To click means to point the arrow cursor

at something on the screen and then—without moving the cursor—press and release the clicker button on the mouse (or laptop trackpad) To double-click,

of course, means to click twice in rapid succession, again without moving your cursor And to drag means to move the cursor while holding down the mouse button

• Keyboard shortcuts Every time you take your hand off the keyboard to move

the mouse, you lose time and potentially disrupt your creative flow That’s why many experienced computer fans use keystroke combinations instead of menu commands wherever possible Ctrl+B (z-B for Mac folks), for example, gives you boldface type in Dreamweaver documents (and most other programs).When you see a shortcut like Ctrl+S (z-S), it’s telling you to hold down the Ctrl

or z key and type the letter S, then release both keys (This command, by the way, saves changes to the current document.)

• Choice is good Dreamweaver frequently gives you several ways to trigger a

particular command—by selecting a menu command or by clicking a toolbar button or by pressing a key combination, for example Some people prefer the speed of keyboard shortcuts; others like the satisfaction of a visual command available in menus or toolbars This book lists all the alternatives; use whichever you find most convenient

About→These→Arrows

Throughout this book, and throughout the Missing Manual series, you’ll find sentences like this one: “Open the System→Library→Fonts folder.” That’s shorthand for a much longer instruction that directs you to open three nested folders in sequence, like this: “On your hard drive, you’ll find a folder called System Double-click it to open

it Inside the System folder is a folder called Library; double-click it to open it Inside

that folder is yet another folder called Fonts Double-click to open that folder, too.”Similarly, this kind of arrow shorthand helps to simplify the business of choosing commands in menus, as shown in Figure P-1

PReFACe xxix

ONLINE RESOURCES

of HTML tags you can add to the currently open document; select Div from that list.”

As you read the book, you’ll find a number of tutorials that show you how to build

web pages using raw materials, like graphics and half-completed web pages You can

download these practice files from this book’s Missing CD page (http://oreilly.com/

missingmanuals/cds/dreamweaverccmm13/) If you take the time to work through

the tutorials, you’ll discover that they give you unprecedented insight into the way

professional designers build web pages

The download also includes the completed tutorial pages, so you can compare your

Dreamweaver work with the final result In other words, you won’t just see pictures

of Dreamweaver’s output in the pages of the book; you’ll find the actual, working

pages in this download

Finally, the Missing CD site gives you one-click access to the reference websites

mentioned in this book—that’ll save your fingers some typing

Registering Your Book

If you register this book at oreilly.com (http://oreilly.com/register), you’ll be

eli-gible for special offers—like discounts on future editions If you buy the ebook

USING CODE

EXAMPLES from oreilly.com and register your purchase, you get free lifetime updates for that edition of the ebook; we’ll notify you by email when updates become available

Registering takes only a few clicks

Reporting Errata

To keep this book as up to date and accurate as possible, each time we print more copies, we’ll make any confirmed corrections you suggest We also note such changes

on the book’s website, so you can mark important corrections in your own copy

of the book if you like And if you bought the ebook from us and registered your purchase, you’ll get an email notifying you when you can download a free updated version of this edition of the ebook Go to http://tinyurl.com/dreamweaverccerrata

to report an error and view existing corrections

Using Code Examples

This book is here to help you get your job done In general, you may use the code

in this book in your programs and documentation You don’t need to contact us for permission unless you’re reproducing a significant portion of the code For example, writing a program that uses several chunks of code from this book does not require permission Selling or distributing a CD of examples from O’Reilly books does re-quire permission Answering a question by citing this book and quoting example code does not require permission Incorporating a significant amount of example code from this book into your product’s documentation does require permission

We appreciate, but do not require, attribution An attribution usually includes the source book’s title, author, publisher, and ISBN For example: “Dreamweaver CC: The Missing Manual by David Sawyer McFarland and Chris Grover (O’Reilly) Copyright

2014 David McFarland and O’Reilly Media, Inc., 978-1-4493-4170-1.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com

Safari® Books Online

Safari® Books Online is an on-demand digital library that lets you search over 7,500 technology books and videos

With a subscription, you can read any page and watch any video from our library Access new titles before they’re available in print Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features

O’Reilly Media has uploaded this book to the Safari Books Online service To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com

Building a Web Page

Images CHAPTER 6:

Tables CHAPTER 7:

HTML Under the Hood

CHAPTER 8:

Find and Replace

CHAPTER

1

Dreamweaver CC is a powerful program for designing and building websites If

you’re brand-new to Dreamweaver, turn to page xiv for a quick look at what the program can do; if you’re a longtime Dreamweaver fan, page xvii tells you what’s new in this latest incarnation of the program

This chapter gives you an overview of Dreamweaver—a guide to the windows,

tool-bars, and menus you’ll use every time you build a web page It also shows you how

to set up the program so you can begin building pages And, because doing is often

a better way to learn than just reading, you’ll get a step-by-step tour of web page

design—the Dreamweaver way—in the tutorial at the end of this chapter

Download Dreamweaver CC

To install a Creative Cloud app like Dreamweaver, go to Adobe’s Download Center

(www.adobe.com/downloads.html) Once there, you can try out an application or go

ahead and sign up for the Creative Cloud app itself—that is, pay the licensing fee for

the program To download and install Dreamweaver, click the Join button next to the

Dreamweaver icon and then follow the links In addition to adding the application,

this download installs Adobe’s Creative Cloud desktop app, which keeps track of all

the Creative Cloud apps on your computer and notifies you when there are updates

The Dreamweaver CC Interface

When you launch Dreamweaver, the program’s Welcome screen greets you (Figure

1-1) This simple starting point lets you reopen the last nine most recently opened

files, create a new web page, view instructional videos, and get online help

Dreamweaver CC

Guided Tour

THE

DREAMWEAVER

CC INTERFACE Dreamweaver CC’s interface shares its look and feel with the other programs in Adobe’s Creative Cloud suite, including Photoshop, Illustrator, and Flash The

vari-ous panels that make up Dreamweaver’s main screen appear as a unified whole (see Figure 1-2) That is, the edges of all the windows touch each other, and resizing one window affects the others around it This type of interface is common on Windows computers, but Mac fans accustomed to independent floating panels might find it strange Give it a chance As you’ll soon see, this layout has its benefits (If you just can’t stand this locked-in-place style, you can detach the various panels and place them wherever you like; see page 13 for instructions.)

FiGURE 1-1

Dreamweaver’s Welcome screen lets you open exist-ing Dreamweaver files, create new ones, and learn more about the program

It disappears as soon as you open a web page If you don’t have any use for this window, turn on the “Don’t show again” checkbox in the lower-left corner

Many of Dreamweaver’s individual windows help you handle specific tasks, like building CSS styles You’ll read about each panel in relevant chapters of this book, but you’ll frequently interact with three main groups of windows: the document window, the Properties panel (below the document window), and a set of panels

on the right side of the workspace

 NOTE  The look of Dreamweaver’s windows depends on whether you use a Windows or Mac PC, and what

changes you make in the program’s Preferences settings Even so, the features and functions generally work the same way on both computers In this book, where the program’s operation differs dramatically in one operating system or the other, special boxes and illustrations (labeled “For Windows Only” or “For Macs Only”) will let you know

The Document Window

What you see on a web page is the end result of the interaction between your

CHAPteR 1: DREAMWEAVER CC GUIDED TOUR 5

DREAMWEAVER

CC INTERFACE

Because of this interrelationship, Dreamweaver’s document window lets you view

pages-in-progress four ways: as straight code (in Code view), in an editable, visual

view (called Design view, pictured in Figure 1-3), with both views side-by-side (known

as Split view, pictured in Figure 1-2), and as the page will appear in a web browser

(Live view, which turns the document window into a real web browser)

FiGURE 1-2

Dreamweaver lets you view your documents several ways Split view, shown here, displays HTML code on the left and

a visual preview of the current page on the right

If you prefer to see how your page looks as you add and delete elements, click the Design button

in the Document toolbar;

that hides the HTML view and brings the preview page full-screen To switch among open documents, click one of the tabs immediately above the Document toolbar

If your monitor is wide enough, Split view is a great way to work: Click into the Design

view half of the document window to add HTML visually, and, when it’s easier just to

type HTML, click into the Code view part of the document window and type away

Split view even lets you see the code in one half, and turn on Live view in the other

half so you can work on the HTML code while you see the page as it will appear

in a real web browser (you can’t, however, edit a page in Live view) In addition, if

you’re new to HTML, Split view is a great way to learn the language: Add elements

like paragraphs, headlines, and tables in Design view and see the relevant HTML in

Code view (You work in the document window’s Design view much as you do in

a word processor: To add text to a page, for example, you simply click inside the

window and start typing.)

at different widths and heights so you can simulate what the page will look like in different size browsers, like those

on mobile phones, tablets, and desktop computers The window size setting lets you see the page as it would appear on different-size monitors

When you build a page, you work in the document window, and, as you add pages

to your site or edit existing ones, you open new document windows Several screen components provide useful information about your document They may appear in different locations on Windows and Mac computers (see Figure 1-2 and Figure 1-3, respectively), but they work the same way

For example:

• Document tabs When you have more than one web document open at a time,

small tabs appear at the top of the document window—one for each open file The name of the file appears in the tab; to switch to it, just click its tab

 TIP  If you mouse over a document tab and pause, the location of the file appears in a small pop-up window

called a tooltip

CHAPteR 1: DREAMWEAVER CC GUIDED TOUR 7

DREAMWEAVER

CC INTERFACE

• Related Files bar The Related Files bar lists all CSS (Cascading Style Sheets),

JavaScript, and server-side programming pages (like PHP pages) the current

web page uses You’ll learn more about these external files later in this book,

but as a quick summary, it’s common in current web design to have other files

supply design and interactivity to a page of HTML Web designers frequently

work on these files in addition to the basic HTML file, so the Related Files bar

lets you quickly jump to and work on these “helper” files You choose which

files to display using the Filter Related Files button on the right side of the

related files toolbar

• Document toolbar The Document toolbar (View→Toolbars→Document ) lets

you change the title of a page, switch between Design and Code views, jump

to Live view (to see how the page looks and works in a web browser), preview

a page in different browsers, make sure your page is free of HTML errors, and

change the look of the document window You’ll read about the toolbar’s

vari-ous buttons and menus in the relevant chapters of this book, but you’ll want to

be aware of the Code, Split, and Design buttons (circled in Figure 1-3) They let

you see the page you’re working on in the four views described earlier

 NOTE  You may also find Dreamweaver’s Standard toolbar useful The Standard toolbar is common on many

Windows programs and includes buttons for frequent file and editing tasks, like creating a new page, opening a

page, saving one or all open documents, canceling and repeating commands, and cutting, copying, and pasting

page elements (Dreamweaver hides this toolbar until you summon it by choosing View→Toolbars→Standard.)

• Tag Selector The Tag Selector is extremely useful It provides a sneak peek at

the HTML that composes your web page, behind the scenes It indicates how

Dreamweaver nests HTML tags in your document to create what you see on

the page In addition, it lets you isolate, with a single mouse click, an HTML tag

and all the information inside it That means you can cleanly remove a page

element or set its properties (see page 11), and precisely control the application

of styles to it (Chapter 3)

You’ll make good use of the Tag Selector in the tutorials to come For experienced

Dreamweaver fans, it’s one of the program’s most useful tools

 NOTE  In Design view, clicking the <body> tag in the Tag Selector is usually the same as pressing Ctrl+A

(z-A) or choosing Edit→Select All It selects everything in the document window However, if you click inside

a table (Chapter 6) or a <div> tag (see page 428), choosing Edit→Select All selects only the contents of the table

cell or the <div> tag In such a case, you need to press Ctrl+A (z-A) several times to select everything on the

page After you do, you can press the delete key to instantly get rid of everything in your document

Careful, though: Pressing Ctrl+A (z-A) or choosing Edit→Select All in Code view selects all the code, including the

information in the head section of the page Deleting all the code gives you an empty file—and an invalid web page

THE

DREAMWEAVER

Dreamweaver provides many windows (also referred to as panels) for working with the various technologies required to build and maintain a website You open and close all these windows using the Window menu For the most part, they appear in tidy groups on the right edge of your screen The windows and their uses will come

up in relevant sections of this book, and you’ll learn how to organize the panels on page 14 But two are worth mentioning up front: the Insert panel and the Files panel

If the document window is your canvas, the Insert panel holds your brushes and paints, as you can see in Figure 1-4 You can create a page simply by typing HTML

in Code view, but it’s often easier to work in Design view, where the Insert panel can simplify the process of adding page elements like images, video, horizontal rules, forms, and special text characters Want to put a picture on your web page? Just click the Images icon in the Insert panel

FiGURE 1-4

The Insert panel offers several drop-down menus that let you select the type of page element you want to add, in categories like Common (pic-tured here), Structure, Media, and so on You can see that the list of elements—which has both icons and labels—take up a lot of real estate Fortunately, you can display the Insert panel more com-pactly by hiding the labels When you choose Hide Labels from the list of Insert catego-ries (middle), Dreamweaver displays the icons side by side

in rows, taking up a lot less space (top-right) Finally, you can turn the Insert panel into

an Insert bar that appears above the document window instead of grouped with the right-hand panels; this space-saving option is a favorite among many web developers (bottom) To get the Insert toolbar, drag the Insert panel

by its tab into position above the document tabs Release the mouse button when you see a blue bar