The World Wide Web continues to evolve, growing in scope and complexity, with new features popping up every year to make the Web look and work better. Even people building personal Web sites now use various programming languages and server technologies to dish up content. Throughout its history, Dreamweaver has managed to keep pace with this changing landscape with each new version.
Dreamweaver CS4 is no exception: It’s capable of doing more than any previous version. Whether you’re creating database-enabled PHP pages, adding your favorite site’s XML-based news feeds directly to your home page, using Cascading Style Sheets (CSS) for cutting-edge design effects, dipping into the dynamic world of JavaScript and AJAX, or simply sticking 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 CS4 provides powerful text-editing abilities for creating basic text files or complex database-driven Web pages. But why go to all that trouble when Dreamweaver’s visual page-building approach makes your job of creating beautiful and complex Web sites 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.
Dreamweaver is a complete Web site production and management program. It works with Web technologies like HTML, XHTML, CSS, and JavaScript.
The enhancements in the latest version, in fact, make it easier than ever to design and lay out Web sites. Cascading Style Sheet support lets you access the latest Web techniques for creating fast-loading, easily modified Web page designs; while the “Spry” technology provides one-click access to complex, interactive layout options like drop-down menus. Dreamweaver also includes plenty of tools for managing Web sites once you’ve built 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 formatting language used to design HTML Web pages. Dreamweaver CS4 continues to integrate advanced CSS creation, testing, and editing tools into Dreamweaver.
It’s also a serious tool for creating dynamic (database-driven) Web sites. 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 for updating and deleting database records, meanwhile keeping designated areas of your site secure from unauthorized visitors. Best of all, Dreamweaver CS4 does the programming for you.
If you’ve never used Dreamweaver before, but have already built one or more Web sites, you won’t have to start from scratch. Dreamweaver happily opens Web pages and Web sites that were created in other programs without destroying any of your carefully handcrafted code.
There are other Web design programs—dozens of them, in fact. But Dreamweaver has become one of the leading programs thanks to key benefits like these:
Visual page building. If you’ve spent any time using a text editor to punch out the HTML code for your Web pages, you know the tedium involved in adding even a simple item like a photograph to a Web page. When your boss asks you to add her photo to the company home page, you launch your trusty text editor and type something like this: <img src="images/staff/bigcheese.jpg” width="100” height="150” alt="The Boss">.
Not only is this approach prone to typos, but it also separates you from what you want the page to look like.
Dreamweaver, on the other hand, takes a visual approach to building Web pages. If you put an image on your page, Dreamweaver shows you the picture on the screen. As in a word processor, which displays documents onscreen as they look when printed, Dreamweaver provides a very close approximation of what your Web page will look like in a Web browser.
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 programming in JavaScript, a programming language that most Web browsers understand. While JavaScript can do amazing things, it requires time and practice to learn.
Dreamweaver CS4 includes an easy to use and innovative JavaScript-based technology called Spry. With Spry, you can easily create interactive, drop-down menus (Chapter 5), add advanced layout elements like tabbed panels (Chapter 12), and add sophisticated form validation to prevent visitors to your site from submitting forms without providing the proper information (Chapter 11).
Solid code. Every now and then, even in Dreamweaver, you may sometimes want to put aside the visual view and look at the underlying HTML code of a page. You may want to tweak the HTML that Dreamweaver produces, for example, or you may be a long-time HTML hand-coder wondering what Dreamweaver offers you.
Adobe realized that many professional Web developers still do a lot of work “in the trenches,” typing HTML, CSS and JavaScript code by hand. In Dreamweaver, you can edit the 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 design mode stomps all over the underlying HTML code, 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 visual representation of your page. This lets you work in either Code or Design view, without missing a beat as you switch between the two. In addition, Dreamweaver can open many other types of files commonly used in Web sites, such as external JavaScript files (.js files), so you don’t have to switch to another program to work on them. Dreamweaver CS4 also introduces a new “related files” toolbar which lists all JavaScript, CSS, or server-side files used by the current document. For hand-coders this means that editing a page’s CSS or JavaScript is just a click away (instead of a time-draining File → Open … hunt around for that danged file). Chapter 10 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 be creating and editing pages that work together to form part of a Web site. Or you may be building an entire Web site from scratch.
Either way, Dreamweaver’s site management tools make your job of dealing with site development easier. From managing links, images, pages, and other media to working with a team of people and moving your site onto a Web server, Dreamweaver automates many of the routine tasks every Webmaster faces. Part 4 of this book looks at how Dreamweaver can help you build and maintain Web sites.
Database-driven Web sites. 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 Microsoft Access or Oracle 10g. Dreamweaver CS4 can help you bring that information to life on the Web without having to learn a lot of programming along the way. From accessing information—such as the latest items in your company’s product catalog—to updating and editing databases online, Dreamweaver CS4 can help you build database-driven Web sites. Part 6 of this book offers a gentle introduction to building dynamic Web sites.
Have it your way. As if Dreamweaver didn’t have enough going for it, the engineers at Adobe have created a software product that is completely customizable, or, as they call it, extensible. Anyone can add to or change the menus, commands, objects, and windows in the program.
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 any unwanted menu items—or even add new commands of your own creation. This incredible flexibility lets you customize the program to fit your work methods, and even add features that Adobe’s programmers never imagined. Best of all, the Adobe Exchange Web site includes hundreds of free and commercial extensions to download and add to Dreamweaver. See Chapter 21 for details.
Dreamwever CS4 also sports a completely new interface that lets you configure the program’s many panels, toolbars, and inspectors in nearly an unlimited number of ways—all of which ensures that the program fits nearly every screen size available and conforms to just about every Web design workflow.
Part of the Creative Suite. Since Adobe purchased Macromedia (the original creator of Dreamweaver), Web designers now have access to a much larger family of design tools including Adobe Photoshop and Illustrator. Ultimately all these Adobe programs will work together seamlessly and share a common appearance. Dreamweaver CS4 now sports the same interface as the rest of the Creative Suite, so if you’re a long time Photoshop or Illustrator user, you’ll feel at home with the revamped design. In addition, Dreamweaver CS4 expands on the Photoshop integration added in the last version of Dreamweaver. Now, you can use Adobe’s “Smart Object” technology to keep your site’s graphics in sync with any changes you make to an original Photoshop file (see Inserting an Image from Photoshop).
If you’ve never used Dreamweaver before, see Chapter 1 for a welcome and the grand tour. If you’re upgrading from Dreamweaver CS3 or some other version, you’ll find that Dreamweaver CS4 offers a host of new features.
New Look. When Adobe bought Dreamweaver from Macromedia, they pretty much left the program’s user interface alone. In CS4, Dreamweaver now shares the same look and feel as other programs in the Creative Suite like Photoshop and Illustrator. Not only do the buttons, panels, windows, and toolbars look different compared to previous versions of Dreamweaver, they can now be configured in many different ways to match the way you want to work. You’ll learn more about this in Chapter 1.
The Property inspector (see The Property Inspector) has also been revamped. In addition to a cosmetic makeover, it also works differently, making a clear distinction between its two uses as an HTML building tool and a CSS creation tool.
Coding Improvements. Adobe realized that a lot of Dreamweaver users actually spend a fair amount of time in Code view—tweaking HTML, coding CSS, and writing JavaScript programs. Even if the visual Design view is where you feel most comfortable, going into Code view can sometimes make your work more accurate and go faster. With that in mind, Dreamweaver CS4 offers many new features meant to make working in Code view better. First of all, many Web pages actually rely on other external files such as Cascading Style Sheets and external JavaScript files. A new, Related Files toolbar gives one click access to every CSS, JavaScript or server-side programming file the current Web document depends on.
In addition, you can now view Code and Design view in a side-by-side Split view (previous versions could only display the two views on top of each other—not exactly an optimum use of the space on most widescreen displays.) In this way, you can have the best of both worlds without having to repeatedly switch back and forth—this improvement alone is a great way for visual designers to get comfortable with and learn HTML, CSS, and JavaScript code, and for hand-coders to get used to Dreamweaver’s visual display.
More Spry goodies. Dreamweaver CS3 introduced a powerful set of JavaScript Web page enhancements based on Adobe’s “Spry Framework” (a collection of JavaScript programs developed by Adobe). These new features made it easy to add pop-up navigational menus, validate HTML forms, include complex, animated visual effects, and add interactive data tables. The Spry Menu Bar, for example, lets you quickly and easily add a pop-up navigational menu to your site—without you having to learn all the messy JavaScript and CSS to make it happen.
While Dreamweaver CS4 doesn’t add as many cool new JavaScript goodies as the last version, you’ll find new form validation tools for making sure a visitor registering on a Web site provides a tricky-enough password, and that at least one button is selected in a group of radio buttons (see Chapter 11). And the new Spry Tooltip, presented in Chapter 12, lets you add pop-up information bubbles that appear when a visitor mouses over an element on the page; for example, you can provide supplemental information such as details about a photo that a visitor moves his mouse over.
In addition, the Spry Dataset tool has been improved, letting you use info from a basic HTML table to create an engaging, interactive page that lets you present lots of information in a compact page design—all updated with new information as a visitor clicks around the page. Chapter 12 has the details.
JavaScript Programming benefits. While Dreamweaver’s Spry tools make it easy to add sophisticated programming to a page, many Web designers want more interactivity than Dreamweaver offers. JavaScript plays a big role in many modern Web sites, and lots of Web designers are choosing to dip their toes into the JavaScript pool (if you are too, JavaScript: The Missing Manual is a great place to start). Dreamweaver CS4 offers many new features aimed at making JavaScript programming easier. JavaScript code-hinting saves your weary fingers by automatically completing JavaScript programming terms and anticipating what you’ll type next.
The new Live Mode actually lets you preview what your page will look like and how its JavaScript will perform without having to leave the program—Apple’s WebKit browser is now built-into Dreamweaver to give you a high-fidelity representation of your Web page. In addition, a “pause JavaScript” function lets you stop a JavaScript program in mid-stream—for example, you can mouse over a Spry navigation menu, see a pop-menu of options appear, and then freeze the page with the menu open. Besides just looking cool, this neat feature lets you analyze the CSS of a dynamic element (like the pop-opened menu) and see which styles are affecting it, so you can tweak the display to be just perfect.
Greater Photoshop integration. Dreamweaver CS3 added integrated support for Photoshop, so that a Web designer could copy from Photoshop and paste into Dreamweaver. It all happened thanks to an image optimization window in Dreamweaver which streamlined the process of turning a Photoshop document into a graphic format ready for the Web. CS4 adds support for Adobe “Smart Objects” so you can maintain a connection between a high-quality Photoshop file and the smaller, lower quality Web version of the image. If you edit the original graphic file in Photoshop, Dreamweaver automatically updates the Web version, skipping all those intermediate steps usually required to optimize a Photoshop image for the Web.
And more. Dreamweaver CS4 also includes lots of little enhancements, such as improved FTP performance for more quickly transferring files to a Web server, a more industry-standard method of embedding Flash movies into a Web page (Inserting a Flash Movie), the ability to share your Dreamweaver screen with other users over the Web, support for Adobe’s InContext Editing service to make it easier for non-Web designers to update pages that you build for them, and more.
Note
Adobe occasionally issues updates to Dreamweaver. To make sure you’re using the latest version, visit the Adobe Web site at www.adobe.com/products/dreamweaver/.
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. With its use of simple commands called tags, HTML (Hypertext Markup Language) is still at the heart of most of the Web.
The HTML code that creates a Web page can be as simple as this:
<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, the HTML shown here is all you need to make an actual Web page.
In the example above—and, indeed, in the HTML code of any Web page you examine—you’ll notice that most commands appear in pairs that surround a block of text or other commands.
These bracketed commands constitute the “markup” part of the Hypertext Markup Language and are called tags. Sandwiched between brackets, tags are simply instructions that tell a Web browser how to display the Web page.
The starting tag of each pair tells the browser where the instruction begins, and the ending tag tells it where the instruction ends. An ending tag always includes a forward slash (/) after the first bracket symbol (<), which tells the browser that it is a closing tag.
Fortunately, Dreamweaver can generate all these tags automatically. There’s no need for you to memorize or even type these commands (although many programmers still enjoy doing so for greater control). Behind the scenes, Dreamweaver’s all-consuming mission is to convert your visual designs into underlying codes like these:
The <html> tag appears once at the beginning of a Web page and again (with an added slash) at the end. This tag tells a Web browser that the information contained in this document is written in HTML, as opposed to some other language. All the contents of a page, including other tags, appear between the 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 and the body.
The head of a Web page, surrounded by <head> tags, contains the title of the page. It may also provide other, invisible information (such as search keywords) that browsers and Web search engines can exploit.
In addition, the head can contain information that the Web browser uses for displaying the Web page and adding interactivity. CSS styles and JavaScript code, for example, can be stored in the head (as can links to external files containing either of these elements). In fact, Dreamweaver’s Spry widgets (Chapter 12) achieve their interactive effects with the help of JavaScript code that’s stored in separate files and linked to from a page’s head.
The body of a Web page, as set apart by its surrounding <body> tags, contains all the information that appears inside a browser window—headlines, text, pictures, and so on.
In Dreamweaver, the blank white portion of the document window represents the body area (see Figure I-1). It resembles the blank window of a word processing program.
Figure 1. The document window displays your page as you build it. You can add text, graphics, and other elements to it, and—thanks to Dreamweaver’s visual approach—see a close approximation of how the page will appear in a Web browser.
Most of your work with Dreamweaver involves inserting and formatting text, pictures, and other objects in the body of the 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 is used to emphasize text. If you surround some text with it and its partner tag, </strong>, you get 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 Web site. 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. In this example, http://www.missingmanuals.com is the value of the href property.
Fortunately, Dreamweaver exempts you from having to type any of these codes 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 Web Site: 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 offered by Dreamweaver) then you might be interested in JavaScript: The Missing Manual.
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, or mixed-case letters in tags (<body> and <BODY> are both correct, for example) and permits unclosed tags (so that you can use a single <p> tag without the closing </p> 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). In fact, XHTML is just an “XML-ified” version of HTML.
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. Dreamweaver CS4 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, but with somewhat stricter guidelines. For example, the HTML page code shown on Of Tags and Properties would look like this in XHTML:
<!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 information that begins the page, however, is how the page identifies which standards it conforms to. In this case, it merely says that the page is using 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 of this code when you create a new XHTML page.)
As you can see, the real code used to make the page is much like HTML. To make an XHTML file comply with XML, however, there are a few strict rules to keep 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 what type of document the page is and point to files on the Web that contain definitions for this type of file. This document-type declaration (or DTD) is also important as it affects how Web browsers display a Web 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 quotes: <a href=”http://www.missingmanuals.com“>.
All tags (even empty tags) must be closed. To create a paragraph in XHTML, for example, you must begin with <p> and end with </p>. However, some tags don’t come in pairs. These tags, called empty tags, have no closing tag. The line break tag is one example. To close an empty 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. All these strict XHTML rules are built into Dreamweaver, so creating an XHTML page using Dreamweaver’s visual design tools 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.) In fact, with just a couple of exceptions discussed on The Dreamweaver Test Drive, it doesn’t really matter which version of HTML or XHTML you use—pick one and let Dreamweaver take care of the rest.
Note
When XHTML was introduced it was heralded as the next big thing, and an intermediate step in the transition to XML as the prime language of the Web. History proves that that prediction was a bit grandiose. As it turns out, the complexity of moving to XML has kept browser manufacturers from following the XML path laid down by the W3C—the group responsible for coming up with many Internet technologies. Now, the W3C is working on a new version of HTML, called HTML 5, which is a move away from XML and back to plain HTML—albeit an enhanced version of HTML. Since all the browser manufacturers are behind HTML 5 (and some browsers are already adopting parts of it), it’s a good bet that down the line HTML 5 will be the new big thing. So if your know-it-all co-worker says that you MUST use XHTML because it’s the future, just say “What about HTML 5?” That should keep him quiet. To learn more about HTML 5 visit www.w3.org/html/wg/html5/.
HTML used to be the only language you needed to know. You could build pages with colorful text and graphics and make words jump out using different sizes, fonts, and colors. But today, you can’t add much visual sophistication to a site without CSS. CSS is a formatting language used to make text look good, add sophisticated layout to pages, and basically add style to your site.
From now on, think of HTML as merely the language you use to give organization to a page. It helps identify and structure the stuff you want the world to know about. Tags like <h1>, <h2>, and <title> denote headlines and assign them relative importance: a heading 1 is more important than a heading 2 (and can also affect how a search engine like Google adds a page to its search listings [see Headlines]). 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).
Cascading Style Sheets, on the other hand, add design flair to the highly structured HTML content, making it more beautiful and easier to read. Essentially, a CSS style is just a rule that tells a Web browser how to display a particular element on a page—for example, to make a <h1> tag appear 36 pixels tall, in the Verdana font and the color orange.
But CSS is more powerful than that. You can use it to add borders, change margins, and even control the exact placement of an element on a page.
If you want to be a Web designer, you need to get to know Cascading Style Sheets. You’ll learn more about this exciting technology throughout this book. In fact, it’s so important for current Web design, that this edition of Dreamweaver: The Missing Manual includes expanded coverage and examples of CSS in most chapters.
A normal Web page—just regular HTML and CSS—isn’t very responsive: Web visitors basically interact with a Web page by clicking a link to load a new Web page. While we’ve grown accustomed to the “click-and-wait” slowness of the Web, we’re also used to the way our computers’ desktop programs react immediately to our every mouse-click. JavaScript is a programming language that lets you super charge your HTML with animation, interactivity, and dynamic visual effects. JavaScript also can make a Web page more useful, by supplying immediate feedback to Web site visitors. For example, a JavaScript-powered shopping cart page 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 necessary information.
JavaScript’s main selling point is its immediacy. It lets Web pages respond instantly to the actions of someone interacting with a page: 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 the Web browser and the Web server—in other words, constantly loading and reloading Web pages. JavaScript lets you create Web pages that feel and act more like desktop programs than Web pages.
If you’ve visited Google Maps (http://maps.google.com) you’ve seen JavaScript in action. Google Maps lets you view a map, zoom in to get a detailed view of streets, and zoom out to get a birds-eye view of how to get across town, the state, or the nation. While there have been lots of map Web sites before Google, those sites always required reloading multiple Web pages (a usually slow process) to get to the information you wanted. Google Maps, on the other hand, works without page refreshes: It responds immediately to your choices.
The programs you create with JavaScript 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 create presentations, edit documents, and create spreadsheets using your Web browser—all with the feel of a program running directly on your computer.
While JavaScript programming can be difficult, Dreamweaver has plenty of tools to let you add sophisticated interactivity to your Web sites—from animations to drop-down navigation menus—in just a few mouse clicks.
You’ll find very little jargon or nerd terminology in this book. You will, however, encounter a few terms and concepts that you’ll encounter 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 at all—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 at all. 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, is a keyboard shortcut for boldface type in Dreamweaver (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 it’s 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. But since MX 2004, all you get is a Getting Started booklet. 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 features 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. In this book’s pages, you’ll find step-by-step instructions for using every Dreamweaver feature, including those you may not even have quite understood, let alone mastered, such as Libraries, Layout 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 about using 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 still let you know about it.
Dreamweaver CS4: 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 shaded 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. Open that. Inside the System folder window is a folder called Library; double-click it to open it. Inside that folder is yet another one 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 I-2.
Dreamweaver CS4 works almost precisely the same way in its Macintosh and Windows versions. 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 keystroke listed first (with + symbols, as is customary in Windows documentation); the Macintosh keystroke follows 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 CS4: The Missing Manual is divided into six parts, each containing several chapters:
Part One: Building a Web Page, explores Dreamweaver’s interface and takes you through the basic steps of building a Web page. It explains how to add text and format it, 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: Building a Better Web Page, 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 code 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 Web browser window. This technique is going the way of the dodo bird. Since Dreamweaver CS4 is full of so many useful and exciting features and this book’s already bursting at its seams (if we added any more pages, we’d have to issue a medical warning to those with bad backs), the frames chapter has been moved online. You can find it, free of charge, at www.sawmac.com/missing/dw8/appc.pdf.
Part Three: Bringing Your Pages to Life, helps you add interactivity to your site. From using forms to collect information from your site’s visitors to adding interactive page widgets like tabbed interfaces with the Spry framework, this section guides you through adding animation, multimedia, and other interactive effects with ease.
Part Four: Building a Web Site, covers the big picture: managing the pages and files in your Web 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 also covers features that let you work with a team of Web developers.
Part Five, Dreamweaver Power, shows you how to take full advantage of such time-saving features as Libraries, Templates, and History panel automation. It also covers Dreamweaver’s Extension Manager, a program that can add hundreds of new free and commercial features to the program.
Part Six: Dynamic Dreamweaver, presents a gentle introduction to the often confusing and complex world of database-driven Web sites. You’ll learn what you need to know to build a dynamic Web site; how to connect Dreamweaver to a database; and how to use Dreamweaver to build pages that can display database information as well as 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.
At the end of the book, two appendixes provide a list of Internet resources for additional Web design help and a menu-by-menu explanation of Dreamweaver CS4.
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 that you can build yourself, using raw materials (like graphics and half-completed Web pages) that you can download from either www.sawmac.com/dwcs4/ or from this book’s “Missing CD” page at www.missingmanuals.com. You might not gain very much from simply reading these step-by-step lessons while relaxing in your porch 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 that 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.
At www.missingmanuals.com, you’ll find articles, tips, and updates to Dreamweaver CS4: The Missing Manual. In fact, we invite and encourage you to submit such corrections and updates yourself. In an effort to keep the book as up to date and accurate as possible, each time we print more copies of this book, we’ll make any confirmed corrections you’ve suggested. We’ll also note such changes on the Web site, so that you can mark important corrections into your own copy of the book, if you like. (Click the book’s name, and then click the Errata link, to see the changes.)
In the meantime, we’d love to hear your own suggestions for new books in the Missing Manual line. There’s a place for that on the Web site, too, as well as a place to sign up for free email notification of new titles in the series. And while you’re online, you can also register this book at www.oreilly.com (you can jump directly to the registration page by going here: https://epoch.oreilly.com/register/default.orm). Registering means we can send you updates about this book, and you’ll be eligible for special offers like discounts on future editions.
When you see a Safari® Books Online icon on the cover of your favorite technology book, that means the book is available online through the O’Reilly Network Safari Bookshelf.
Safari offers a solution that’s better than e-books. It’s a virtual library that lets you easily search thousands of top tech books, cut and paste code samples, download chapters, and find quick answers when you need the most accurate, current information. Try it for free at http://safari.oreilly.com.
Get Dreamweaver CS4: 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.
