869 dreamweaver CS6 the missing manual (NXPowerLite copy)

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 unique “Spry” technology provides

Dreamweaver

CS6

David Sawyer McFarlandThe book that should have been in the box®

Dreamweaver CS6: The Missing Manual

by David Sawyer McFarland

Copyright © 2012 Sawyer McFarland 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

July 2012: First Edition

Revision History for the 1st Edition:

2012-07-02 First release

See http://shop.oreilly.com/product/0636920022732.do 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-31617-4

[M]

The Missing Credits ix

Preface 1

Part One: Building a Web Page CHAPTER 1: Dreamweaver CS6 Guided Tour 21

The Dreamweaver CS6 Interface 21

Setting Up a Site 40

Creating a Web Page 44

Managing Files and Folders with the Files Panel 49

The Dreamweaver Test Drive 53

CHAPTER 2: Adding and Formatting Text 85

Adding Text in Dreamweaver 85

Adding Special Characters 92

Selecting Text 98

HTML Formatting 101

Paragraph Formatting 102

Creating and Formatting Lists 106

Text Styles 114

Spell Checking 116

CHAPTER 3: Introducing Cascading Style Sheets 121

Cascading Style Sheet Basics 122

Creating Styles 125

Using Styles 132

Manipulating Styles 139

Text Formatting with CSS 144

Cascading Style Sheets Tutorial 168

CHAPTER 4: Links 185

Understanding Links 185

Adding a Link 191

Modifying a Link 205

Styling Links 206

Creating a Navigation Menu 210

Link Tutorial 223

CHAPTER 5: Images 241

Adding Images 242

Inserting an Image from Photoshop 247

Modifying an Image 253

Controlling Images with CSS 257

Editing Graphics 264

Image Maps 273

Rollover Images .276

Tutorial: Inserting and Formatting Graphics 278

CHAPTER 6: Tables 289

Table Basics 290

Inserting a Table 291

Selecting Parts of a Table 294

Expanded Table Mode 296

Formatting Tables .297

Modifying Cell and Row Properties 300

Adding and Removing Cells 305

Merging and Splitting Cells 308

Tabular Data 310

Tables Tutorial 314

CHAPTER 7: HTML: Under the Hood 331

Controlling How Dreamweaver Handles HTML 331

Code View 335

Live Code 358

Quick Tag Editor 361

The Tag Inspector 362

Comparing Versions of a Web Page 363

Reference Panel 370

Inserting JavaScript 370

Part two: Building a Better Web Page CHAPTER 8: Advanced CSS 375

Compound Selectors 375

Fast Style Editing with the Properties Pane 382

Moving and Managing Styles 385

More About CSS 390

Using the Code Navigator 397

Styling for Print 399

CSS Transitions 405

Using CSS3 418

Advanced CSS Tutorial 422

CHAPTER 9: Page Layout 433

Types of Web Page Layouts 435

Float Layout Basics .438

Understanding the Box Model 447

Dreamweaver’s CSS Layouts 452

Modifying Dreamweaver’s CSS Layouts 459

Absolute Positioning 465

Adding an AP Element to Your Page 472

Modifying AP Element Properties 475

CSS Layout Tutorial 479

CHAPTER 10: Troubleshooting CSS 491

Analyzing CSS with Dreamweaver 491

Overcoming Common CSS Problems 498

CHAPTER 11: Designing Websites for Mobile Devices 505

Previewing Pages at Different Resolutions 507

Media Queries 510

Strategies for Using Media Queries 518

Fluid Grid Layouts 521

jQuery Mobile 537

Part three: Bringing Your Pages to Life CHAPTER 12: Forms 563

Form Basics 563

Creating a Form 566

Adding Form Elements 569

Validating Forms 588

Forms Tutorial 612

CHAPTER 13: Adding Interactivity with JavaScript 637

Introducing Adobe’s Spry Framework 638

Tabbed Panels 639

Accordions 645

Collapsible Panels 651

Dreamweaver Behaviors 679

Applying Dreamweaver Behaviors 680

Events 684

(Some of) the Actions, One by One 684

The Widget Browser 699

CHAPTER 14: Add Flash and Other Multimedia 709

Flash: An Introduction 709

Automate the Flash Download 718

Add Flash Videos 720

Other Video Options 724

Part Four: Managing a Website CHAPTER 15: Introducing Site Management 729

The Structure of a Website 730

Setting Up a Site (in Depth) 735

Managing Dreamweaver Sites 740

Site Assets 749

CHAPTER 16: Testing Your Site 757

Site Launch Checklist 757

Previewing Web Pages in BrowserLab 760

Find and Fix Broken Links 765

Validating Web Pages 773

Cleaning Up HTML (and XHTML) 776

Site Reporting 779

Download Statistics 783

CHAPTER 17: Moving Your Site to the Internet 785

Adding a Remote Server 785

Transferring Files .798

Check In and Check Out 807

Synchronizing Site Files 813

Communicating with Design Notes 817

Part Five: Dreamweaver CS6 Power CHAPTER 18: Snippets and Libraries 829

Snippets Basics 829

Using Snippets 831

Creating Snippets 832

Built-In Snippets 835

Library Basics 835

Creating and Using Library Items 838

Editing Library Items 840

Snippets and Library Tutorial 842

CHAPTER 19: Templates 851

Template Basics 851

Creating a Template 854

Defining Editable Regions 857

Building Pages Based on a Template 859

Updating a Template 864

Using Repeating Regions 866

Using Editable Tag Attributes .872

Using Optional Regions 876

Exporting a Template-Based Site 882

Template Tutorial 883

CHAPTER 20: Find and Replace 895

Find and Replace Basics 896

Basic Text and HTML Searches 896

Advanced Text Searches 902

Advanced Tag Searches 906

A Powerful Example: Adding Alt Text Fast 908

CHAPTER 21: Customizing Dreamweaver 911

Keyboard Shortcuts 911

Dreamweaver Extensions 916

CHAPTER 22: Working with Server-Side Programming 925

Pieces of the Puzzle 927

Dynamic Websites: The Setup 929

Creating a Dynamic Page 936

Using Server-Side Includes 937

Working with Related PHP Files .939

PHP Code Hints 942

APPENDIX A: Getting Help 945

Getting Help from Dreamweaver 945

Getting Help from Adobe 946

APPENDIX B: Dreamweaver CS6, Menu by Menu 949

File Menu 949

Edit Menu 952

View Menu 955

Format Menu 963

Commands Menu 964

Site Menu 966

Window Menu 968

Help Menu 971

Index 973

The Missing Credits

ABouT The AuThor

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

He welcomes feedback about this book by email at missing@sawmac.com (If you

need technical help, however, please refer to the sources listed in Appendix A.)

ABouT The CreATive TeAM

Peter McKie (editor) has a master’s degree from Boston University’s School of

Jour-nalism and lives in New York City, where he researches the history of old houses and,

every once in a while, sneaks into abandoned buildings Email: pmckie@oreilly.com

Holly Bauer (production editor) lives in Ye Olde Cambridge, MA, where she is an

avid home cook, prolific DIYer, and mid-century modern furniture design enthusiast

Email: holly@oreilly.com

Nancy Wolfe Kotary (compositor) is a copyeditor, typesetter, and former O’Reilly

production manager with more years of experience in publishing than she cares to

count She is from New Hampshire and lives in Massachusetts but does not worship

squirrels or drive like a maniac

Marcia Simmons (proofreader) is a writer and editor living in the San Francisco Bay

Area She’s author of the book DIY Cocktails Blog: www.marciaisms.com

Julie Hawks (indexer) is an indexer for the Missing Manual series She is currently

pursuing a masters degree in Religious Studies while discovering the joys of warm

Murray R Summers (technical reviewer) is an Adobe Certified Dreamweaver

Devel-oper and Community Professional He has co-authored and contributed chapters to several books on Dreamweaver, been the technical editor for the last seven 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 attends Clemson University, 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 ety 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

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

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:

• Access 2010: The Missing Manual by Matthew MacDonald

• Abobe Edge Preview 5: The Missing Manual by Chris Grover

• Buying a Home: The Missing Manual by Nancy Conner

• CSS: The Missing Manual, Second Edition by David Sawyer McFarland

• Creating a Website: The Missing Manual, Third Edition by Matthew MacDonald

• David Pogue’s Digital Photography: The Missing Manual by David Pogue

• Dreamweaver CS5.5: The Missing Manual by David Sawyer McFarland

• Droid 2: The Missing Manual by Preston Gralla

• Droid X2: The Missing Manual by Preston Gralla

• Excel 2010: The Missing Manual by Matthew MacDonald

• Facebook: The Missing Manual, Third Edition by E.A Vander Veer

• FileMaker Pro 11: The Missing Manual by Susan Prosser and Stuart Gripman

• Flash CS6: The Missing Manual by Chris Grover

• Galaxy S II: The Missing Manual by Preston Gralla

• Galaxy Tab: The Missing Manual by Preston Gralla

• Google+: The Missing Manual by Kevin Purdy

• Google Apps: The Missing Manual by Nancy Conner

• Google SketchUp: The Missing Manual by Chris Grover

• HTML5: The Missing Manual by Matthew MacDonald

• iMovie ’11 & iDVD: The Missing Manual by David Pogue and Aaron Miller

• iPad: The Missing Manual, Fourth Edition by J.D Biersdorfer

• iPhone: The Missing Manual, Fifth Edition by David Pogue

• iPhone App Development: The Missing Manual by Craig Hockenberry

• iPhoto ’11: The Missing Manual by David Pogue and Lesa Snider

• iPod: The Missing Manual, Tenth Edition by J.D Biersdorfer and David Pogue

• JavaScript & jQuery: The Missing Manual, Second Edition by David Sawyer

McFarland

• Kindle Fire: The Missing Manual by Peter Meyers

• Living Green: The Missing Manual by Nancy Conner

• Mac OS X Lion: The Missing Manual by David Pogue

• Mac OS X Snow Leopard: The Missing Manual by David Pogue

• Microsoft Project 2010: The Missing Manual by Bonnie Biafore

• Motorola Xoom: The Missing Manual by Preston Gralla

• Netbooks: The Missing Manual by J.D Biersdorfer

• NOOK Tablet: The Missing Manual by Preston Gralla

• Office 2010: The Missing Manual by Nancy Conner, Chris Grover, and Matthew

MacDonald

• Office 2011 for Macintosh: The Missing Manual by Chris Grover

• Palm Pre: The Missing Manual by Ed Baig

• Photoshop CS6: The Missing Manual by Lesa Snider

• Photoshop Elements 10: The Missing Manual by Barbara Brundage

• PHP & MySQL: The Missing Manual by Brett McLaughlin

• PowerPoint 2007: The Missing Manual by E.A Vander Veer

• Premiere Elements 8: The Missing Manual by Chris Grover

• QuickBase: The Missing Manual by Nancy Conner

• QuickBooks 2012: The Missing Manual by Bonnie Biafore

• Quicken 2009: The Missing Manual by Bonnie Biafore

• Switching to the Mac: The Missing Manual, Lion Edition by David Pogue

• Wikipedia: The Missing Manual by John Broughton

• Windows Vista: The Missing Manual by David Pogue

• Windows 7: The Missing Manual by David Pogue

• Word 2007: The Missing Manual by Chris Grover

• Your Body: The Missing Manual by Matthew MacDonald

• Your Brain: The Missing Manual by Matthew MacDonald

• Your Money: The Missing Manual by J.D RothFor a full list of all Missing Manuals in print, go to www.missingmanuals.com/library html

Websites evolve every year, growing in scope and complexity, with new

features popping up to make sites look and work ever better Even people

building personal sites use various programming languages and server

technologies to dish up content

Throughout its history, Dreamweaver has managed to keep pace with the changing

web-development landscape, and Dreamweaver CS6 is no exception; it’s capable

of doing more than any previous version of the program Whether you want to

use Cascading Style Sheets (CSS) for cutting-edge design, dip into the world of

JavaScript-powered dynamic pages, explore HTML5 and CSS3, 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 with a simple text editor In fact, Dreamweaver CS6’s powerful

text editor lets you handcraft text files to create basic or complex database-driven

pages However, hand-typing HTML, CSS, and JavaScript is not only a recipe for

carpal tunnel syndrome, it’s also 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 A simple button lets you insert

the complex HTML required to build an HTML table in a matter of seconds, for

ex-ample And Dreamweaver is flexible enough to let you both hand-code and use its

time-saving HTML shortcuts The choice is yours

Preface

WhaT

DreaMWeaver

IS all abouT 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 unique

“Spry” technology provides one-click access to complex, interactive layout options like drop-down menus

Dreamweaver also includes plenty of tools for managing websites once you build them You can check for broken links, use templates to streamline site-wide page changes, and reorganize your site in a flash with the program’s site management tools

 NOTE  If you’re not already familiar 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 handcrafted code

Why Dreamweaver?

You can find other web design programs on the market—dozens of them, in fact But Dreamweaver is one of the leaders, thanks to key benefits like these:

• Visual page-building If you’ve spent any 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 also 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 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.Another development approach web designers commonly use is keeping a page’s code and its browser-rendered look 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 in the other half

Why DreaMWeaver?

Finally, because Dreamweaver’s Design view is only an approximation of what

a page looks like in a browser, the program offers “Live view”—a real-time look

at your page in a web browser built right into Dreamweaver That way, you can

see what a page looks like and how it behaves without leaving Dreamweaver!

• 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 this—mouse rollovers, alert boxes,

and drop-down menus—usually require JavaScript programming, a language

browsers understand While JavaScript can do amazing things, it requires time

and practice to learn

Dreamweaver includes an easy-to-use JavaScript-based technology called the

Spry Framework With Spry, you can easily create interactive, drop-down menus

(Chapter 4), add advanced layout elements like tabbed panels (Chapter 13),

and include sophisticated validation to prevent site visitors from submitting

incomplete forms (Chapter 12)

• 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 you may wonder

how Dreamweaver codes

Adobe realizes that many professional web developers do a lot of work “in the

trenches,” typing 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,

non-destructive 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

repre-sentation of your final page, or you can switch between Code and Design view

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

to another program to work on them Dreamweaver’s Related Files toolbar lists

all JavaScript, CSS, or server-side files the current document uses For

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

7 has the full 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 be building an entire website from scratch

Why

DreaMWeaver? 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 Four of this book looks at how Dreamweaver helps you build and maintain websites

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 affects how a page appears and how

quickly it downloads 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 is that the code Dreamweaver produces

when you work in Design mode is 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 interprets the HTML language slightly differently, web design is more like WYSIRWYGOAGD: “what you see is roughly what you’ll get, on a good day.” That’s why Dreamweaver’s Live View and integrated Adobe BrowserLab (a browser-testing service) 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

UP TO SPEED

• 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 menu By editing one text file in the Dreamweaver Configuration folder, you can 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 20 for details

WhaT’S NeW IN DreaMWeaver cS6

What’s New in Dreamweaver CS6

If you’ve never used Dreamweaver before, see Chapter 1 for the grand tour If you’re

upgrading from Dreamweaver CS3 or some other version of the program, you’ll find

that Dreamweaver CS6 offers a host of new features:

• HTML5 is touted by everyone from AT&T to Google to Newsweek as the next

big thing (described in more detail on page 10) It’s the first major change to

HTML in years and promises to make building powerful website easier than

ever Dreamweaver CS6 provides basic support for HTML5 That means that it

understands the new HTML5 tags and provides code hints as you type those tags

in Code view (code-hinting lets you type a few letters of a tag and then select

the tag you’re after from a pop-up menu—in other words, less typing, fewer

typos, faster web page building) Unfortunately, code-hinting is only helpful if

you type HTML by hand If you prefer using Design view and clicking buttons on

a user-friendly palette of HTML options, you’ll have to wait for the next version

of Dreamweaver for Dreamweaver-produced HTML5 code

• CSS3 is, like HTML5, a new (and evolving) standard for web designers It

prom-ises many new formatting controls to make web pages look beautiful,

includ-ing drop shadows for text, rounded corners on boxes, background gradients,

borders made of graphics, and even animated transitions from one set of CSS

properties to another Dreamweaver CS6 includes code-hinting for CSS3 and

adds many CSS3 properties to the CSS Styles panel

Dreamweaver CS6 also adds helpful tools for some of CSS3’s most exciting

offerings: the new web fonts manager (page 146) frees you from the boredom

of the same limited set of fonts (Arial, Helvetica, and Times New Roman, for

example) that web designers have been using for years Now, Dreamweaver

provides an easy way to use any of hundreds of freely available fonts to enliven

the typography on your pages And the new CSS transitions panel (page 405)

lets you easily add animations to mouse rollovers, so you can turn a navigation

bar into an animated visual delight

• Mobile Web Design iPhones, iPads, Android gadgets, tablets, and other mobile

devices are popping up like weeds Web developers need to know not only what

their site looks like in the many browsers on the market, but they also need

to customize their sites for mobile browsers Dreamweaver CS6 builds on the

mobile tools added in CS5.5 (multiscreen preview to see designs at different

screen sizes and media query support to craft your CSS to respond to different

screen widths) CS6 introduces a new “fluid grid layout” tool that lets you build

designs that re-flow content to match different devices: For example, using the

same HTML, you can create designs that fit in a single column for a phone, two

columns for a tablet, and three or more columns for a spacious desktop monitor

WhaT’S olD IN

DreaMWeaver

cS6 • Mobile Application Development Dreamweaver CS6 includes built-in

sup-port for jQuery Mobile and PhoneGap—two programming technologies that let you build mobile phone applications using just HTML, CSS, and JavaScript The new PhoneGap Build service simplifies the headache-inducing hurdles usu-ally involved in creating native applications for iOS, Android, and Blackberry devices With it, you can write an application using HTML, CSS, and JavaScript and turn it into standalone phone app you can sell in iTunes’ App Store or one

of the many other smartphone marketplaces

• Under the hood improvements Of course, any new version of software

in-cludes numerous bug fixes and performance improvements Most notably, the Dreamweaver engineers have streamlined file transfers from your computer to your web server In previous versions of the program, you had to transfer files one at a time; now you can move multiple files simultaneously

What’s Old in Dreamweaver CS6

Unfortunately, not everything in Dreamweaver CS6 is shiny and new Dreamweaver’s

“Server Behaviors,” which let you save form information, retrieve information from databases, and password-protect web pages, have gotten old from neglect This once-innovative feature was a boon to designers who needed complex features but didn’t know how to program However, Adobe has basically ignored this feature for several versions of the program The programming behind these behaviors is now old and unprofessional While Adobe hasn’t yet removed the tools, this book no longer includes a section dedicated to teaching them It’s not in your interest to learn how

to use them, nor in our interest to lead you toward a tool that’s no good (Having said that, there are some excellent Dreamweaver extensions from WebAssist [www webassist.com] that let you tap into the power of database programming, bypassing the old Dreamweaver tools.)

HTML, XHTML, CSS, and JavaScript 101

Underneath 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 the tags to properly display your pages

When you create a page with tags in it, the document becomes known as an HTML page (for Hypertext Markup Language) HTML is still at the heart of most of the Web

DocuMeNT TyPeS

The HTML code that creates a web page can be as simple as this:

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

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

actual web page

Document Types

The first line of the code above:

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

w3.org/TR/html4/loose.dtd">

is called a “doctype,” and it simply identifies what flavor of HTML you used to write

the page Developers have used two doctypes for years—HTML 4.01 and XHTML

1.0—and each has two styles: strict and transitional Dreamweaver can create any of

these types of HTML documents—you simply tell it which one you want when you

create a new web page (see page 44) and Dreamweaver handles the rest

Dreamweaver even lets you use the latest, greatest, and simplest doctype, HTML5

It replaces the extraneous code of earlier doctypes with much simpler and

straight-forward code:

<!DOCTYPE HTML>

Yep, that’s it HTML5 is intended to be much easier to use in many ways, and

Dream-weaver CS6 provides limited support for this new version of HTML 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 any longer

But no matter which doctype you’re interested in, it’s important that you always use

one, because without it, different browsers display CSS differently, and your pages

will look different depending on your visitor’s browser

oF TagS aND

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

Of Tags and Properties

In the preceding example—and, indeed, in the HTML of any web page you examine—you’ll notice that most commands appear in pairs surrounding 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 are called tags Sandwiched between brackets, tags are simply instructions that tell a web browser how to display a page

The starting tag of each pair tells the browser where the instruction begins, and the closing tag tells it where the instruction ends A closing tag always includes a forward slash (/) after the first bracket symbol (<), so the closing tag for the para-graph 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 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

Pen-oF TagS aND ProPerTIeS

In addition, the head section can include information that browsers use to format

the page’s HTML and to add interactivity You can store CSS styles and

Java-Script 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

Spry widgets (Chapter 13) work with the help of JavaScript code stored in

sepa-rate files on a server; the link to these files resides in the page’s head section

The body of a web page, identified by its beginning and ending <body> tags,

contains all the information that appears inside a browser window—headlines,

text, pictures, and so on When you work in Dreamweaver’s Design view, the

blank white portion of the document window represents the body area It

re-sembles the blank page of a word-processing program

Most of your work with Dreamweaver involves inserting and formatting text, pictures,

and other objects in the body portion of a document Many tags commonly used in

web pages appear within the <body> tag Here are a few:

• You can tell a web browser where a paragraph of text begins with a <p>

(open-ing paragraph) tag, and where it ends with a </p> (clos(open-ing paragraph) tag

• The <strong> tag emphasizes text The text between an opening and closing

<strong> tag shows up as boldfaced type 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 the term 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 Property Inspector 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 that’s geared to readers who want to master CSS, pick up a copy of CSS: 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 XHTML

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

<BODY> are both correct, for example) and permits unclosed tags (so that you can use an opening <p> tag without a closing </p> tag to create a paragraph) 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 data on the Web Additionally, HTML doesn’t work with one of the hottest Internet languages, XML, or 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 CS6 can create and work with XHTML files as well as plain old HTML pages

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

HTML5 isn’t some radically new technology In fact, unlike XHTML, which was 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, meant to support the way web designers currently build websites In HTML5, for example, the <header> tag can contain 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-In addition, HTML5 adds new tags that let you insert video and audio into a page, and new form tags that add sophisticated form elements, like sliders and drop-down date pickers, as well as built-in browser support for form validation to make sure visitors correctly fill out your forms 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

In addition, Dreamweaver CS6 doesn’t provide quick tools for inserting HTML5 tags While Dreamweaver offers click-to-insert buttons that make it easy to insert HTML4 tags like the <img>, <table>, or <p> tags, it doesn’t provide similar buttons for HTML5 tags like <header>, <footer>, <article>, or <section> You can, of course, type HTML5 tags directly into the code of any page in Dreamweaver—the program even provides “code hints” for the tags

aDD STyle WITh caScaDINg STyle SheeTS

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 Gmail So, much of HTML5 is devoted to powerful

(and complicated) technologies like Canvas (for drawing pictures and diagrams on

a web page), data storage (for storing information like game scores, preferences,

and notes on a visitor’s computer), drag and drop functionality, “web workers” for

making JavaScript programs run faster and more efficiently, and “web sockets” for

streaming data from a web server All these technologies are promising, but browser

support for them varies In addition, Dreamweaver doesn’t provide 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 sites

Add Style with Cascading Style Sheets

HTML used to be the only language you needed to create web pages You could

build them with colorful text and graphics, and make words jump out using different

fonts, font sizes, and font colors But today, you can’t add much visual stimulation

to a site without CSS CSS is a formatting language that lets you design pages with

sophisticated layouts and enhanced text For example, it provides site-wide design

consistency for headings and subheads, creates unique-looking sidebars, and adds

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

element on a page—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 Add Interactivity with JavaScript

A normal web page—just regular HTML and CSS—isn’t very responsive About the only interaction visitors have with the page 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 purchase, with tax and shipping, the moment a visitor selects a product to buy; or 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 your visitors’ actions: clicking a link, filling out a form, or merely moving the mouse around the screen JavaScript doesn’t suffer from the frustrating delay associated with “server-side” interactive programming languages like PHP, which require that

a web browser communicate with a remote web server—in other words, JavaScript doesn’t rely on constantly loading and reloading pages It lets you create pages that look like and 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 on a map 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 required loading a new web page every time you changed a view (a usually slow process)

The JavaScript programs you create can range from the really simple (such as 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

pop-JavaScript programming can be difficult, but Dreamweaver has plenty of tools that let you add sophisticated interactivity to your sites—from animations to drop-down navigation menus—with just a few clicks of your mouse

Mobile Web Design

There’s no doubt that mobile phones are changing how we live our lives They’re also changing 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 phones, requiring you to pinch and zoom and swipe and scroll to find what you’re looking for Fortunately, there are

The very baSIcS oF reaDINg ThIS book

ways to make websites redraw themselves to fit the smaller sizes of mobile phone

screens Dreamweaver CS6 includes several solutions: the new fluid grid layout tool

(page 521) lets you design three different 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 alter the design depending on the width of the viewing screen

You can also craft your own “media queries” (a CSS3 feature discussed on page

510) to create CSS styles that apply only to screens at particular widths or within a

particular range of widths

Dreamweaver CS6 also provides tools for creating mobile-only websites using

jQuery Mobile (page 537), a JavaScript tool that makes traditional websites look

and function more like mobile applications (and less like web pages)

The Very Basics of Reading This Book

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

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

comput-ing life:

• Clicking This book gives you three kinds of instructions that require you to use

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 the

cursor And to drag means to move the cursor while holding down the 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 (c-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 (c-S), it’s telling you to hold down the Ctrl

or c 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 ThIS

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, you’re lucky just to get a cardboard box with a DVD in it To get any real information, you need

to delve into the program’s online help screens

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 screens assume you already understand the discussion at hand and hurriedly skip over important topics that require an 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 waste your time learning tools that don’t help you get your work done

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 Spry tools In addi-tion, you’ll find honest evaluations of each tool to help you determine which ones 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 Missing 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 that doesn’t happen to be published by O’Reilly, we’ll let you know about it

Dreamweaver CS6: The Missing Manual is designed to accommodate readers at every technical level The primary discussions are written for advanced-beginner

or intermediate computer users But if you’re new to building web pages, special sidebar articles 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

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 Click 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 it, too.”

MacINToSh aND WINDoWS

Similarly, this kind of arrow shorthand helps to simplify the business of choosing

commands in menus, as shown in Figure I-1

Figure i-1

When you read “Choose Insert→Layout Objects→Div Tag”

in a Missing Manual, that means, “From Dreamweaver’s menu bar, click the Insert command

From the drop-down menu that appears, select the Layout Objects command That opens a list of elements you can add to the currently open document; select Div Tag from that list.”

Macintosh and Windows

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

in Windows Every button in every dialog box is exactly the same; the software

response to every command is identical In this book, the illustrations have been

given even-handed treatment, alternating between the various operating systems

where Dreamweaver feels at home (Windows 7, Windows Vista, Windows XP, 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 c key And the

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

Option key on American Mac keyboards

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 (c-S).”

abouT The

Dreamweaver CS6: The Missing Manual is divided into six parts, each with several chapters:

• Part One explores Dreamweaver’s main screens and takes you through the basic steps of page-building It explains how to add and format text, how to link from one page to another, how to spice up your designs with graphics, and introduces you to Cascading Style Sheets

• Part Two takes you deeper into Dreamweaver and provides in-depth CSS erage 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

cov- NOTE  Previous versions of this book contained a chapter on HTML frames—a method of displaying several

web pages in a single browser window This technique is going the way of the dodo bird Since Dreamweaver CS6

is full of so many useful and exciting features and this book’s already bursting at its seams (any more pages, and

it would have to come with a medical warning to those with bad backs), the frames chapter has been removed

• Part Three helps you add interactivity to your site From forms that collect information from visitors to interactive page widgets like tabbed interfaces using the Spry Framework, this section guides you through adding animation, multimedia, and other interactive effects with ease

• Part Four covers the big picture: managing the pages and files on your site, testing links and pages, and moving your site onto 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

• Part Five shows you how to take full advantage of such timesaving features as Libraries, Templates, and History panel automation It also covers Dreamweaver’s Extension Manager, a program that can add hundreds of free and commercial features to the program

or this book’s Missing CD page at http://missingmanuals.com/cds/dweaver6tmm.You might not gain very much from simply reading these step-by-step lessons while relaxing in your hammock But if you take the time to work through the tutorials,

oNlINe reSourceS

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

designers build Web pages

You’ll also find the URLs of the finished pages, so you can compare your

Dream-weaver 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 on the Internet

Online Resources

As the owner of a Missing Manual, you’ve got more than just a book to read

Online, you’ll find example files, and you can also communicate with the

Miss-ing Manual team to tell us what you love (or hate) about the book Head over to

www.missingmanuals.com, or go directly to one of the following sections

The Missing CD

This book doesn’t have a CD pasted inside the back cover, but you’re not missing

out on anything Go to http://missingmanuals.com/cds/dreamweavercs6mm/ to

download the tutorials and sample pages mentioned in this book And so you don’t

wear down your fingers typing long web addresses, the Missing CD page offers a

list of clickable links to the websites mentioned in the book, too

Registration

If you register this book at oreilly.com, you’ll be eligible for special offers—like

dis-counts on future editions of this book If you buy the ebook from oreilly.com and

register your purchase, you get free lifetime updates for this edition of the ebook;

we’ll notify you by email when updates become available Registering takes only a

few clicks Type www.oreilly.com/register into your browser to hop directly to the

Registration page

Feedback

Got questions? Need more information? Fancy yourself a book reviewer? On our

Feed-back page, you can get expert answers to questions that come to you while reading,

share your thoughts on this Missing Manual, and find groups for folks who share your

interest in Dreamweaver To have your say, go to www.missingmanuals.com/feedback

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 into 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/c9cz8kv to report an

uSINg coDe

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 CS6: The Missing Manual by David Sawyer McFarland (O’Reilly) Copyright 2012 Sawyer McFarland Media, Inc., 978-1-449-31617-4.”

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

1

Dreamweaver CS6 is a powerful program for designing and building websites

If you're brand-new to Dreamweaver, turn to page 2 for a quick look at what this program can do; if you're a longtime Dreamweaver fan, page 5 tells you what's new in this, its latest incarnation

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

The Dreamweaver CS6 Interface

When you open Dreamweaver, you'll be greeted by the program's Welcome screen

(Figure 1-1) This simple starting point lets you open any one of the nine most

re-cently opened files, create a new web page, view instructional videos, and access

online help

Dreamweaver CS6

Guided Tour

Dreamweaver CS6's interface shares the look and feel of other programs, like shop, Illustrator, and Flash, in Adobe's “Creative Suite.” Out of the box, Dreamweaver's various windows are 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

Photo-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 34 for instructions.)

The DreaMWeaver cS6 INTerFace

Figure 1-2

Out of the box, Dreamweaver documents appear in Split view—

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 a file’s tab immediately above the Document toolbar

Document tabs Document toolbar

Code view Property Inspector Design view Panel groups

Application bar

Many of the program's individual windows help you handle specific tasks, like

build-ing CSS styles You'll read about each panel in relevant chapters later in the book,

but you'll frequently interact with three main groups of windows: the document

window, a set of “panels,” and the Property Inspector

 NOTE  The look of Dreamweaver's windows depends on what kind of computer you use (Windows or

Mac-intosh) and what changes you make in the program's Preferences settings Even so, the features and functions

generally work the same way 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 browser

and the page's HTML, CSS, and (sometimes) JavaScript Because of this

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

The

DreaMWeaver

cS6 INTerFace Figure 1-2), and as it will appear in a web browser (Live view, which turns the

docu-ment window into a real web browser) 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 and see the page as it will appear in a real web browser (you can't, however, edit any page content 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.)

Figure 1-3

A document window like this represents a web page in progress; here’s where you add text, graphics, and other objects as you build the page The status bar

at the bottom of the window provides some useful information, like how quickly the page will download to a browser and the way the page encodes text You can also instruct Dreamweaver

to display the current document at different widths and heights so you can simulate what the page will look like when viewed in different size browsers, such

as those on a mobile phone, tablet, or desktop computer

Document toolbar

Document tabs Document toolbar Head content

Body Tag selector Status bar Window size Text

encodingDocument zoom

Mobile/Tablet/

Desktop sizes Downloadstats

Related files

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

The DreaMWeaver cS6 INTerFace

Several other screen components provide useful information about your

docu-ment 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

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

JavaScript, and server-side programming pages (like PHP) 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

• Document toolbar The Document toolbar 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 the page in different

browsers, make sure your page is free of HTML errors, and change the look

of the document window (If you don't see the Document toolbar, choose

View→Toolbars→Document.) You'll read about its various 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 above

 NOTE  You may find two other toolbars, the Standard toolbar and Style Rendering toolbar, useful The

Stan-dard 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.) The Style Rendering toolbar comes in handy when you work with CSS You'll learn

how to use it on page 401

• Head content Most of what you put on a web page winds up in the body of the

page, but some elements are specific to a region of the page called the head

This is where you put things like the page's title, the meta tags that provide

information for some search engines and browsers (for example, a description

of the page or keywords used in the page), JavaScript programs, and links to

CSS files (Chapter 3)

The

DreaMWeaver

cS6 INTerFace None of this information actually appears on your page when it's “live” on the

Internet, but you can have a look at it in Dreamweaver by choosing View→Head Content You'll see a row of icons representing the different bits of information

in the head

• 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 31), and precisely control the application

of styles to it (Chapter 4)

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

(c-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 438), 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 (c-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 (c-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 Insert Panel

Dreamweaver provides many windows for working with the various technologies required to build and maintain a website It calls most of its windows panels, and they sit in tidy groups on the right edge of your screen The various panels and their uses will come up in relevant sections of this book, and you'll learn how to organize the panels on page 34 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, horizontal rules, forms, and multimedia content Want to put a picture on your web page? Just click the Images icon in the Insert panel