584 Dreamweaver CS5.5 The Missing Manual
Dreamweaver CS5.5 The book that should have been in the box ®
Dreamweaver CS5.5 David Sawyer McFarland
Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo The book that should have been in the box ®
Dreamweaver CS5.5: The Missing Manual
by David Sawyer McFarland Copyright © 2011 O’Reilly Media, Inc. All rights reserved. Printed in the Unites States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media 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 [email protected].
Printing History: June 2011: First Edition.
Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been in the box” are registered trademarks of O’Reilly Media, Inc. Dreamweaver CS5.5:
The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo 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, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
ISBN: 978-1-449-39797-5 [M]
Table of Contents
table of contents
table of contents table of contents table of contents table of contents Chapter 1 table of contents Chapter 1 Chapter 1 table of contents Chapter 1
Chapter 1
Chapter 15: Dreamweaver Behaviors . . . . . . . . . . . . . . . . .
table of contents table of contents Chapter 1 Chapter 1 Chapter 1 table of contents Chapter 1 Chapter 2 table of contents Chapter 2 Chapter 2 table of contents Chapter 2 Chapter 2 Chapter 2 Chapter 2 table of contents table of contents 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 an online magazine for communication professionals. He’s served as the web- master at the University of California at Berkeley and the Berkeley Multimedia Research Center, and he’s helped build, design, and pro- gram numerous sites for clients that include 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’s Graduate School of Journalism, the Center for Elec- tronic Art, the Academy of Art College, and the Art Institute of Portland. He cur- rently 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: The Missing Manual. He welcomes feedback about this book by email at [email protected]. (If you’re seeking technical help, however, please refer to the sources listed in Appendix A.) Credits About the Creative Team Peter McKie (editor) graduated with a master’s degree from Boston University’s School of Journalism 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: Adam Zaremba (production editor) has a master’s degree from the Editorial Institute at Boston University. He lives in Chestnut Hill, Mass., and has learned that there are three things never to discuss with people: religion, politics, and the Great Pumpkin. Ron Strauss (indexer) specializes in the indexing of information technology publi- cations of all kinds. Ron is also an accomplished classical violist and lives in north- ern California with his wife and fellow indexer, Annie, and his miniature pinscher, Kanga. Email: [email protected]. Stacie Arellano (proofreader) is a freelance proofreader/copy editor from Wiscon- sin with a background in marketing and web development. When she isn’t editing, she is working on her fantasy adventure graphic novel at TributeWaters.com. Email: [email protected]. Murray R. Summers (technical reviewer) is an Adobe Certified Dreamweaver De- veloper and Community Professional. He has co-authored and contributed chapters to several books on Dreamweaver, been the technical editor for the last six editions of the Dreamweaver Missing Manual, and presented at multiple national conferenc- es. 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. John C. Bland II (technical reviewer) is the founder of Katapult Media Inc., which focuses on desktop, mobile, and web development. Through Katapult, John works diligently on FastKast ), which powers numerous low- to high- profile media players. He is a coauthor of ColdFusion Web Application Framework for ColdFusion 9 and Flex 4 in Action. As an Adobe Community Professional, John continues give back to the community that helped mold him into the developer he is today. John blogs regularly at Acknowledgments Thanks to all of 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. But thanks, most of all, to my mom for all the many gifts she gave me. This book is dedicated in loving memory of her. —Dave McFarland the missing credits Credits 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 and cross-references to specific pages (not just chapters). Recent and upcoming titles include: Access 2007: The Missing Manual by Matthew MacDonald Access 2010: The Missing Manual by Matthew MacDonald 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 Droid X: The Missing Manual by Preston Gralla Dreamweaver CS4: The Missing Manual by David Sawyer McFarland Dreamweaver CS5: The Missing Manual by David Sawyer McFarland Dreamweaver CS5.5: The Missing Manual by David Sawyer McFarland Droid 2: The Missing Manual by Preston Gralla Droid X: The Missing Manual by Preston Gralla Excel 2007: The Missing Manual by Matthew MacDonald Excel 2010: The Missing Manual by Matthew MacDonald Facebook: The Missing Manual, Third Edition, by E.A. Vander Veer FileMaker Pro 10: The Missing Manual by Susan Prosser and Geoff Coffey FileMaker Pro 11: The Missing Manual by Susan Prosser and Stuart Gripman Flash CS4: The Missing Manual by Chris Grover with E.A. Vander Veer Flash CS5: The Missing Manual by Chris Grover Flash CS5.5: The Missing Manual by Chris Grover Google Apps: The Missing Manual by Nancy Conner Google SketchUp: The Missing Manual by Chris Grover iMovie ’09 & iDVD: The Missing Manual by David Pogue iMovie ’11 & iDVD: The Missing Manual by David Pogue and Aaron Miller iPad: The Missing Manual by J.D. Biersdorfer iPad 2: The Missing Manual by J.D. Biersdorfer the missing credits Credits iPhone: The Missing Manual, Fourth Edition, by David Pogue iPhone App Development: The Missing Manual by Craig Hockenberry iPhoto ’09: The Missing Manual by David Pogue and J.D. Biersdorfer iPhoto ’11: The Missing Manual by David Pogue and Lesa Snider iPod: The Missing Manual, Ninth Edition, by J.D. Biersdorfer and David Pogue JavaScript: The Missing Manual by David Sawyer McFarland Living Green: The Missing Manual by Nancy Conner Mac OS X: The Missing Manual, Leopard Edition by David Pogue Mac OS X Snow Leopard: The Missing Manual by David Pogue Microsoft Project 2007: The Missing Manual by Bonnie Biafore 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 Office 2007: The Missing Manual by Chris Grover, Matthew MacDonald, and E.A. Vander Veer Office 2010: The Missing Manual by Nancy Connor, Chris Grover, and Matthew MacDonald Office 2008 for Macintosh: The Missing Manual by Jim Elferdink Office 2010 for Macintosh: The Missing Manual by Chris Grover Palm Pre: The Missing Manual by Ed Baig Personal Investing: The Missing Manual by Bonnie Biafore Photoshop CS4: The Missing Manual by Lesa Snider Photoshop CS5: The Missing Manual by Lesa Snider Photoshop Elements 8 for Mac: The Missing Manual by Barbara Brundage Photoshop Elements 8 for Windows: The Missing Manual by Barbara Brundage Photoshop Elements 9: The Missing Manual by Barbara Brundage 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 2010: The Missing Manual by Bonnie Biafore QuickBooks 2011: The Missing Manual by Bonnie Biafore the missing credits Credits Quicken 2009: The Missing Manual by Bonnie Biafore Switching to the Mac: The Missing Manual, Leopard Edition by David Pogue Switching to the Mac: The Missing Manual, Snow Leopard Edition by David Pogue Wikipedia: The Missing Manual by John Broughton Windows XP Home Edition: The Missing Manual, Second Edition, by David Pogue Windows XP Pro: The Missing Manual, Second Edition, by David Pogue, Craig Zacker, and Linda Zacker 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. Roth the missing credits Introduction ebsites continue to evolve, growing in scope and complexity every year, with new features popping up all the time to make the Web look and work better. Even people building personal websites use various pro- W gramming languages and server technologies to dish up content. Throughout its history, Dreamweaver has managed to keep pace with this changing landscape, and Dreamweaver CS5.5 is no exception. It’s capable of doing more than any previous version of the program. Whether you want to create database-enabled PHP pages, use Cascading Style Sheets (CSS) for cutting-edge design effects, dip into the dynamic world of JavaScript, explore HTML 5 and CSS3, build websites for mobile devices, use content management systems like WordPress or Drupal, or simply stick to straightforward HTML pages, Dreamweaver has just about all the tools you need. Any enterprising designer can create web pages, Cascading Style Sheets, and even Ja- vaScript programs with a simple text editor. In fact, Dreamweaver CS5.5’s powerful text editor lets you handcraft basic text files or complex database-driven pages. But why go to all that trouble when you can use Dreamweaver’s visual approach to page- building, where you use friendly buttons, dialog boxes, and panels to create beautiful and complex websites. That way, you can let Dreamweaver tackle the bothersome chore of writing the underlying HTML code, making creating beautiful and complex websites so much easier. Whether you’re new to building web pages or a hard-core, hand-coding HTML jockey, Dreamweaver is a powerful tool that lets you build web- sites quickly and efficiently, without compromising the quality of your code. Introduction What Dreamweaver Is All About Dreamweaver is a complete website development and management program. It works with web technologies like HTML, XHTML, CSS, JavaScript, and PHP. Dreamweaver’s Cascading Style Sheet 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: Get used to the acronym CSS, which you’ll encounter frequently in this book. It stands for Cascad- ing Style Sheets, a set of rules you write that dictate the look of your pages. Dreamweaver includes advanced CSS creation, testing, and editing tools. Dreamweaver’s also a serious tool for creating dynamic (database-driven) websites. You can now turn your company’s database of products into an easily updated online catalog—or turn that cherished recipe collection into an online culinary resource for an adoring public. You can even create web pages that let you update and delete da- tabase records, while keeping designated areas of your site secure from unauthorized visitors. Best of all, Dreamweaver does the programming for you. If you’ve never used Dreamweaver before, but you’ve built one or more sites, you won’t have to start over again to use Dreamweaver. It happily opens web pages and websites created in other programs without destroying any of your carefully hand- crafted 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: dreamweaver cs5.5: the missing manual Introduction Dreamweaver gives you a close approximation of what your page will look like in a web browser (and Dreamweaver’s Live View feature actually does display the page in a web browser—and right inside Dreamweaver!). introduction Introduction dreamweaver cs5.5: the missing manual moving your site onto a web server. Part 4 of this book looks at how Dream- weaver helps you build and maintain websites. Hand Coding vs. WYSIWYG Editors Pro site developers championed hand-coding because many visual page-building programs add unnecessary 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 visu- al 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 Dreamweav- er’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 next website in record time. Honestly, no web design program is really WYSIWYG (“what you see is what you get”). Because every brows- er 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 Dream- weaver’s Live View and integration with Adobe Browserlab (a browser-testing service) can help you make sure your pages really look the way you 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. Many im- provements made in Dreamweaver CS5.5 were designed specifically for people who spend time looking at raw HTML, CSS, JavaScript and PHP code. Introduction 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 cre- ation. 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 commer- cial extensions for Dreamweaver. See Chapter 23 for details. What’s New in Dreamweaver CS5.5 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, you’ll find that Dream- weaver CS5.5 offers a host of new features: introduction Introduction JavaScript code—that greatly simplifies writing JavaScript programs that work across all major web browsers. jQuery is the Web’s most popular JavaScript li- brary, used on about a quarter of all websites. To make JavaScript programming with jQuery easier, Dreamweaver CS5.5 adds code-hinting for jQuery to save your tired fingers from excessive typing. 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 noth- ing more than line after line of ordinary typed text. You embed simple commands, called tags, within this text. Web browsers know how to interpret these tags to prop- erly display pages. When you create a page with tags in them, the document becomes known as an HTML page (for Hypertext Markup Language). HTML is still 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" "http://www. w3.org/TR/html4/loose.dtd"> <html> <head> <title>Hey, I am the title of this Web page.</title> While it may not be exciting, this short bit of HTML code is all you need to know to make an actual web page. Document Types The first line of code above: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose.dtd"> dreamweaver cs5.5: the missing manual Introduction is called a “doctype” and it simply identifies what flavor of HTML you used to write the page. There are two common doctypes—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 flavor you want when you cre- ate a new web page (see page 43) and Dreamweaver handles the rest. Dreamweaver even lets you use the latest, greatest, and simplest doctype, from HTML5. It replaces the extraneous code of earlier doctypes with much simpler and straightforward code: <!DOCTYPE HTML> Yep, that’s it. HTML5 is intended to be much easier in many ways, and Dreamweaver CS5.5 provides support for this not-yet-approved, new version of HTML. 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. Today’s browsers support parts of the cutting-edge HTML5 doctype. Fortunately, you won’t have to worry about doctype compatibility as long as you cre- ate your pages in Dreamweaver. Of Tags and Properties In the preceding example—and, indeed, in the HTML code 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 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: introduction Introduction 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. Most of your work with Dreamweaver involves inserting and formatting text, pic- tures, 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: <strong> tag shows up as boldface type. The HTML snippet <strong>Warning!</ strong> would tell a web browser to display the word “Warning!” in bold type on the screen. Fortunately, Dreamweaver exempts you from having to type any of this code and provides an easy-to-use window called the Property inspector for adding properties to your tags and other page elements. To create links the Dreamweaver way (read: the easy way), turn to Chapter 5. dreamweaver cs5.5: the missing manual Introduction introduction Note: For a full-fledged introduction to HTML, check out Creating a Website: The Missing Manual. 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 Dream- weaver offers), you might be interested in JavaScript: The Missing Manual. End of advertisements: now back to your regularly scheduled book. XHTML, Too 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 a <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, smart phones, and other technologies that must interact with data on the Web. Ad- ditionally, HTML doesn’t work with one of the hottest Internet languages: XML, or Extensible Markup Language (see “Storing Data in an XML File” for a quick intro to XML). 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 CS5.5 can cre- ate and work with XHTML files as well as plain HTML. If you understand only HTML, don’t worry—XHTML isn’t a revolutionary new language that takes years to learn. It’s basically HTML with somewhat stricter guidelines. For example, here’s the HTML from “HTML, XHTML, CSS, and JavaScript 101” on page 6: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose.dtd"> <html> <head> <title>Hey, I am the title of this Web page.</title> </head> <body> <p>Hey, I am some body text on this Web page.</p> </body> </html> Written in XHTML, that code would look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ns="http://www.w3.org/1999/xhtml"> <head> <title>Hey, I am the title of this Web page.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" /> </head> <body> <p>Hey, I am some body text on this Web page.</p> </body> </html> Introduction Notice that everything below the <head> is nearly the same as the HTML page. The doctype that begins the page, however, is different from that of the earlier example. It looks basically the same, but, in this case, it merely says that the page uses a par- ticular brand of HTML called XHTML, and more specifically a type of XHTML called Transitional 1.0. (Don’t worry—Dreamweaver automatically writes all this code when you create a new XHTML page.) As you can see, the XHTML code used to make the page is much like the HTML code. To make an XHTML file comply with XML, however, you have to keep a few strict rules in mind: If all this seems a bit confusing, don’t worry. Dreamweaver automatically follows all these strict XHTML rules, so creating an XHTML page in Design view won’t feel one bit different from creating an old-style HTML page. (For more information on cre- ating an XHTML page in Dreamweaver, see “Creating a Web Page” on page 43.) In fact, with just a couple of exceptions, it doesn’t really matter which version of HTML or XHTML you use—pick one and let Dreamweaver take care of the rest. And HTML5, As Well When the W3C—the group responsible for many Internet technologies—introduced XHTML, the web development community heralded it as the next big thing, and an intermediate step in the transition to XML as the prime language of the Web. Histo- ry has shown that prediction to be a bit grandiose. As it turns out, the complexity of moving to XML has kept browser manufacturers from following the XML path the World Wide Web Consortium laid down. In fact, the W3C closed down the XHTML dreamweaver cs5.5: the missing manual IntroductionChapter 28: Server-Side XML and XSLT . . . . . . . . . . . . . .