Websites 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 programming 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 JavaScript 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 websites quickly and efficiently, without compromising the quality of your code.
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 Cascading 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 database 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 handcrafted code.
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 code 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 visual approach to building web pages, called Design view. If you drag an image to your budding web page in Design view, 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 (and Dreamweaver’s Live View feature actually does display the page in a web browser—and right inside Dreamweaver!).
Complex interactivity, simply. You’ve probably seen web pages where an image (on a navigation bar, for example) lights up or changes appearance when you move your mouse over it. Dynamic effects like this—mouse rollovers, alert boxes, and navigational pop-up 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 5), add advanced layout elements like tabbed panels (Chapter 14), and add sophisticated form validation to prevent site visitors from submitting forms without the proper information (Chapter 13).
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 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 its raw HTML to your heart’s content. Switching back and forth between the visual mode—called Design view—and Code view is seamless and, best of all, nondestructive. Unlike many visual web page programs, where making a change in the visual mode stomps all over the underlying HTML, Dreamweaver respects hand-typed code and doesn’t try to rewrite it (unless you ask it to).
You can even use “Split view” to see your HTML code side-by-side with a representation of your final page, and 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 12 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.
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 onto a web server. Part Four of this book looks at how Dreamweaver helps you build and maintain websites.
Database-driven Websites. Data makes the world go round. Whether you’re a human-resource records manager or a high school teacher, you probably keep track of a lot of information. Today, companies and individuals store reams of information in database systems like MySQL, Microsoft Access, and Oracle 10g. Dreamweaver can help you bring that information to life, from retrieving it—such as listing the latest items in your company’s product catalog—to updating and editing it online, without having to learn a lot of programming. Part Six of this book offers a gentle introduction to building dynamic websites.
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 23 for details.
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 Dreamweaver CS5.5 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 And HTML5, As Well). It’s the first major change to HTML in years and promises to make building powerful web applications easier. Dreamweaver CS5.5 provides basic support for HTML5. That means it understands the new HTML5 tags, and provides code-hinting support 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.
CSS3 is, like HTML5, a new (and evolving) standard for web designers. It promises many new formatting controls to make HTML 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 CS5.5 adds code-hinting for CSS3, and adds many CSS3 properties to the CSS Styles panel.
Mobile Web Design. iPhones, iPads, Android, WebOS, 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 different browsers, but also customize their sites to work on mobile browsers. Dreamweaver CS5.5 adds several tools to help. The multiscreen preview feature lets you preview a page at different resolutions to simulate the small screen of a handheld device, as well as the larger screen of a desktop computer. In addition, Dreamweaver CS5.5’s new CSS3 “media query” support means that you can easily craft different versions of a site’s CSS styles to match the display capabilities of different devices. For example, you can apply one set of styles when a visitor uses a browser that has at least 960 pixels of space to display a page, and a different set of styles when there’s only 320 pixels of space (such as on a mobile phone).
Mobile Application Development. Dreamweaver CS5.5 includes built-in support for jQuery Mobile and Phonegap—two programming technologies that let you build mobile phone applications using just HTML, CSS, and JavaScript.
W3C Validator. Dreamweaver CS4 and earlier had a built-in HTML validator to make sure that your page’s HTML was sound. Unfortunately, it didn’t work that well, and Adobe removed it in Dreamweaver CS5. Fortunately, they decided to bring back an HTML validator in Dreamweaver CS5.5, and this time they used the esteemed validator supplied by the World Wide Web Consortium (the W3C), the group responsible for creating HTML. Now you can check a page’s HTML with Adobe’s online validator without leaving Dreamweaver. Now you can be sure that your HTML is up to code.
jQuery Code Hinting. jQuery is a JavaScript “library”—basically just a bunch of JavaScript code—that greatly simplifies writing JavaScript programs that work across all major web browsers. jQuery is the Web’s most popular JavaScript library, 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.
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 typed text. You embed simple commands, called tags, within this text. Web browsers know how to interpret these tags to properly 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> </head> <body> <p>Hey, I am some body text on this Web page.</p> </body> </html>
While it may not be exciting, this short bit of HTML code is all you need to know to make an actual web page.
The first line of 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. 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 create a new web page (see Creating a Web Page) 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 create your pages in Dreamweaver.
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 forward slash (/) after the first bracket symbol (<), so the closing tag for the paragraph command above is </p>.
Fortunately, Dreamweaver can generate all these tags automatically. You don’t have to memorize or even type them in (although many programmers still enjoy doing so for greater control). Behind the scenes, Dreamweaver’s all-consuming mission is to convert your visual design into underlying code like this:
The <html> tag appears once at the beginning of a web page and again (with an added closing slash) at the end. This tag 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 Pencils”). It may also include other, invisible information (such as search keywords) that browsers and search engines use. You surround the head section with opening and closing <head> tags.
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 JavaScript code in the head, for example, or you can embed links to external CSS and JavaScript files there. In fact, the interactivity you’ll see in Dreamweaver’s Spry widgets (Chapter 14) work with the help of JavaScript code stored in separate files on a server; the link to these files resides in the page’s head section.
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 using Dreamweaver’s Design View, the blank white portion of the document window represents the body area. It resembles the blank window 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> (opening paragraph) tag, and where it ends with a </p> (closing paragraph) tag.
The <strong> tag emphasizes text. The text between an opening and closing <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.
The <a> tag, or anchor tag, creates a link (hyperlink) in a web page. A link, of course, can lead anywhere on the Web. How do you tell the browser where the link should point? Simply give address instructions to the browser 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 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.
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 Dreamweaver offers), you might be interested in JavaScript: The Missing Manual. End of advertisements: now back to your regularly scheduled book.
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. Additionally, 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 create 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 xmlns="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>
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 particular 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:
Begin the page with a document-type declaration and a namespace. That’s the first few lines in the code above. They simply state the type of document you’re writing and point to files on the Web that contain definitions for this type of file. A doctype isn’t actually required for regular HTML, but it is for XHTML. However, a document-type declaration (or DTD) is important for both HTML and XHTML since it affects how web browsers display a page—stick with any of the DTDs Dreamweaver writes and you’ll be OK.
Tags and tag attributes must be lowercase. Unlike in HTML, typing the tag <BODY> in an XHTML file is incorrect. It must be lowercase, like this: <body>.
Quotation marks are required for tag attributes. For example, a link written like this: <a href=http://www.missingmanuals.com> is valid in HTML, but doesn’t work in XHTML. You have to enclose the value of the href property in quotation marks: <a href=“http://www.missingmanuals.com”>.
All tags (even empty ones) must be closed. To create a paragraph in XHTML, for example, you must begin with <p> and end with </p>.
Of course, as with everything in life, there are exceptions. Some tags don’t come in pairs. They’re called self-closing tags, and the line break tag is one example. To indicate a self-closing tag, you must include a backslash at the end of the tag, like this: <br />.
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 creating 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.
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. History 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 working group in favor of the new version of HTML, called HTML5—actually a move away from XML and back to plain old HTML, albeit an enhanced version of the language. Since all browser manufacturers support HTML5 (and since some browsers already support parts of the standard), HTML5 is the next big thing. Even mainstream news outlets like Time, Newsweek, and CNN routinely drop “HTML5” into their technology reporting.
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, the <header> tag, for example, 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 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 pop-up 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 difficult to use the new tags without some pretty elaborate workarounds.
But new tags are just one small part of the HTML5 story. HTML5 originally started life as a product of the Web Hypertext Application Technology Group (WHATWG), 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, notes, and so on 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.
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. It provides site-wide design consistency for headings and subheads, for example, creates a unique-looking sidebar, adds special graphics treatment for quotations, and so on.
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>, <h2>, and <title> denote headlines and assign them 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 make a list of recipe ingredients more intelligible, for example).
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, for example (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 in style and design—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.
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 useful, by supplying immediate feedback to visitors. For example, a JavaScript-powered shopping cart can instantly display a total cost, 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” programming languages like PHP, which rely on communication between a web browser and 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 the while working from the same page. While there have been lots of map sites before Google, they always required reloading multiple web pages (a usually slow process) to get to the information you wanted.
The JavaScript programs you create can range from the really simple (such as popping 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 directly on your computer.
JavaScript programming can be difficult, but Dreamweaver has plenty of tools that let you add sophisticated interactivity to your sites—from animations to drop-down navigation menus—with just a few clicks of your mouse.
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 computing 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 (⌘-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 (⌘-S), it’s telling you to hold down the Ctrl or ⌘ key and, while holding it down, type the letter S, and 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.
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 get was a Getting Started booklet. Now all you get is 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 presentation. 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 manual that should have been in the box. You’ll find step-by-step instructions for every Dreamweaver feature, including those you may not even have understood, let alone mastered, such as Libraries, Design view, Behaviors, and Dreamweaver’s Spry tools. In addition, 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 CS5.5: 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.
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.” Similarly, this kind of arrow shorthand helps to simplify the business of choosing commands in menus, as shown in Figure 1.
Dreamweaver CS5.5 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 XP, Windows Vista, and Mac OS X).
One of the biggest differences between Mac and Windows software is the keystrokes, because the Ctrl key in Windows is the equivalent of the Macintosh ⌘ key. And the key labeled Alt on a 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 (with + symbols, as is customary 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 (⌘-S).”
Dreamweaver CS5.5: 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 coverage. 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.
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 CS5.5 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.
Part Six presents a gentle introduction to the often confusing and complex world of database-driven websites. You’ll learn to build a dynamic site; how to connect Dreamweaver to a database; and how to use Dreamweaver to build pages that can display database information, as well as how you add, edit, and delete database records. The last chapter of this section covers the powerful XSLT tools for converting XML files (including RSS feeds) into browser-ready web designs.
This book is designed to get your work onto the Web faster and more professionally; it’s only natural, then, that half the value of this book also lies on the Web.
As you read the book’s chapters, you’ll encounter a number of living examples—step-by-step tutorials you can build yourself, using raw materials (like graphics and half-completed web pages) you can download from either www.sawmac.com/dwCS5.5 or this book’s Missing CD page at http://missingmanuals.com/cds/dweaver55tmm.
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 them at the computer, you’ll discover that these tutorials give you unprecedented insight into the way professional designers build Web pages.
You’ll also find, in this book’s lessons, the URLs of the finished pages, so you can compare your Dreamweaver work with the final result. In other words, you won’t just see pictures of Dreamweaver’s output in the pages of the book; you’ll find the actual, working web pages on the Internet.
As the owner of a Missing Manual, you’ve got more than just a book to read. Online, you’ll find example files as well as tips, articles, and maybe even a video or two. You can also communicate with the Missing Manual team and 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.
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/dreamweavercs55mm/ to download tutorials and sample pages mentioned in this book.
If you register this book at www.oreilly.com, you’ll be eligible for special offers—like discounts on future editions of this book. Registering takes only a few clicks. Type http://tinyurl.com/registerbook into your browser to hop directly to the Registration page.
Got questions? Need more information? Fancy yourself a book reviewer? On our Feedback 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.
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. Go to http://tinyurl.com/3bou9fz to report an error and view existing corrections.
Our free email newsletter keeps you up to date on what’s happening in Missing Manual land. You can meet the authors and editors, see bonus video and book excerpts, and more. Go to http://tinyurl.com/MMnewsletter to sign up.
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.
Get Dreamweaver CS5.5: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
