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 firstname.lastname@example.org. July 2012:
Revision History for the 1st Edition: 2012-07-02
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.
About the Creative Team Peter McKie (editor) has a master’s degree from Boston University’s School of Journalism and lives in New York City, where he researches the history of old houses and, every once in a while, sneaks into abandoned buildings. Email: email@example.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: firstname.lastname@example.org. 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 winters in the Carolinas. Email: email@example.com.
The Missing Credits
Murray R. Summers (technical reviewer) is an Adobe Certified Dreamweaver Developer and Community Professional. He has co-authored and contributed chapters to several books on Dreamweaver, been the technical editor for the last 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 variety of capacities. He has been a co-author, technical editor, and technical reviewer for a shelf full of Dreamweaver- and Web-related books. He loves sharing what he has learned over the years of the inner workings of Dreamweaver and various web technologies. Danilo lives in the suburbs of Chicago with his wife, Melissa, who patiently forgives the late hours he puts in in front of a glowing screen. Email: danilo@ shimmerphase.com.
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 x
The Missing Credits
The Missing Credits
• 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. Roth For a full list of all Missing Manuals in print, go to www.missingmanuals.com/library .html.
The Missing Credits
What Dreamweaver Is All About
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 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.
Dreamweaver CS6: The Missing Manual
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!
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.
up to speed
But the real story is that the code Dreamweaver produces when you work in Design mode is as solid and well-written as
• Have it your way. As if Dreamweaver didn’t have enough going for it, the program’s engineers have created a completely customizable product, or, as they call it, an extensible program. Anyone can add to or change Dreamweaver’s menus, commands, objects, and windows. Suppose, for example, that you hardly ever use any of the commands in the Edit menu. By editing one text file in the Dreamweaver Configuration folder, you can 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.
Dreamweaver CS6: The Missing Manual
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 promises many new formatting controls to make web pages look beautiful, including 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
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.)
Dreamweaver CS6: The Missing Manual
The HTML code that creates a web page can be as simple as this:
Hey, I am the title of this Web page.
Hey, I am some body text on this Web page.
While it may not be exciting, this short bit of HTML is all you need to create an actual web page.
Document Types The first line of the code above:
is called a “doctype,” and it 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 straightforward code:
Yep, that’s it. HTML5 is intended to be much easier to use in many ways, and Dreamweaver 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:
But in XHTML, it’s written this way:
HTML5 lets you write it either way. Fortunately, you won’t have to worry about these subtle differences when you use Dreamweaver to insert your HTML—it automatically adjusts to the doctype and inserts the appropriate HTML.
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
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 paragraph command above is
. Fortunately, Dreamweaver can generate all these tags automatically. You don’t have to memorize or even type them in (although many programmers still enjoy doing so for greater control). Behind the scenes, Dreamweaver’s all-consuming mission is to convert your visual design into underlying code, like this: • The 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 tags. If you were to think of a web page as a tree, the tag would be its trunk. Springing from the trunk are two branches that represent the two main parts of any web page: the head of the page and the body. • The head of a web page contains the title of the page (“Izzie’s Mail-Order Pencils”). It may also include other, invisible information, such as a page description, that browsers and search engines use. You surround the head section with opening and closing tags.
Dreamweaver CS6: The Missing Manual
Of Tags and Properties
The body of a web page, identified by its beginning and ending 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 resembles 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 tag. Here are a few: • You can tell a web browser where a paragraph of text begins with a
(opening paragraph) tag, and where it ends with a
(closing paragraph) tag. • The tag emphasizes text. The text between an opening and closing tag shows up as boldfaced type. The HTML snippet Warning! strong> tells a web browser to display the word “Warning!” in bold type on the screen. • The 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 tags. For instance, you might type Click here!. 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, letting 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.
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 ( and are both correct, for example) and permits unclosed tags (so that you can use an opening
tag without a closing
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 intended to foster a new way to build web pages, HTML5 is about making sure the web continues to work as it always has. Most of the basics of HTML are still in place. HTML5 adds a few new elements, meant to support the way web designers currently build websites. In HTML5, for example, the 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