Dreamweaver CS5: The Missing Manual

Why Dreamweaver?

Other web design programs are 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 the HTML code for your Web pages, you know the tedium involved in adding even a simple item like a photograph to a page. 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 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, gives you a visual approach to building web pages, called Design view. When you work in Design view, if you put an image on your budding web page, Dreamweaver displays the picture on the page. As in a word processor, which displays documents onscreen just as they’ll look when you print them out, Dreamweaver provides a very close approximation of what your page will look like in a web browser (and the Live View feature actually does display the page through a web browser—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 programming in JavaScript, a language browsers understand. While JavaScript can do amazing things, it requires time and practice to learn.

  Dreamweaver CS5 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 13), and add sophisticated form validation to prevent site visitors from submitting forms without the proper information (Chapter 12).

• Solid code. Every now and then, even in Dreamweaver, you may want to put aside the visual view and look at a page’s underlying HTML. You may want to tweak the code that Dreamweaver produces, for example, or you may be a long-time HTML hand-coder and 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 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 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 CS5 “related files” toolbar lists all JavaScript, CSS, or server-side files used by the current document. 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 11 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 website. Or you may be building an entire website from scratch.

  Either way, Dreamweaver’s site management tools make your job 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 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 Microsoft Access or Oracle 10g. Dreamweaver CS5 can help you bring that information to life, from accessing it—such as 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.

  Up To Speed: Hand Coding vs. WYSIWYG Editors

  Creating Web pages in a text editor was long considered the best way to build websites. The precise control over HTML available when you hand-write code was (and often still is) seen as the only way to assure quality web pages.

  Hand-coding’s reputation as the only way to go for pros is fueled by the behavior of many visual page-building programs that add unnecessary code to pages—code that affects how a page appears and how quickly it downloads over the Internet.

  But hand-coding is time-consuming and error-prone. One typo can render a web page useless.

  Fortunately, Dreamweaver brings solid code-writing to a visual environment. Since its earliest incarnation, Dreamweaver has prided itself on its ability to produce clean HTML and its tolerance for code created by other programs—including text editors. In fact, Dreamweaver includes a powerful built-in text-editing mode that lets you freely manipulate the HTML of a page—or any other code, including JavaScript, Visual Basic, XML, PHP, or ColdFusion Markup Language.

  But the real story is that the code produced when you work in Design mode is as solid and well-written as hand-hewn code. Knowing this, you should feel free to take advantage of the increased productivity that Dreamweaver’s visual-editing mode brings to your day-to-day work with its one-click objects, instant JavaScript, and simplified layout tools. Doing so won’t compromise your code, and will certainly let you finish your next website in record time.

  Honestly, no web design program is really WYSIWYG (“what you see is what you get”). Because every browser interprets the HTML language slightly differently, web design is more like WYSIRWYGOAGD: “what you see is roughly what you’ll get, on a good day.” That’s why Dreamweaver’s Live View and integration with Adobe Browserlab (a browser-testing service) can help you make sure your pages really look the way you want them to.

  Finally, if you have experience hand-coding HTML and CSS, you’ll be pleasantly surprised by Dreamweaver’s powerful text-editing capabilities. In fact, even though Dreamweaver has a reputation as a visual Web page editor, it’s also one of the best text-editing programs on the market. Many improvements made in Dreamweaver CS5 were designed specifically for people who spend time looking at raw HTML, CSS, JavaScript and PHP code.

• 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, extensible. 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 the program 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 22 for details.

• CS5, Part of the Creative Suite. Dreamweaver isn’t alone—it’s part of a much larger family of design tools that include Adobe Photoshop and Illustrator. Ultimately all these programs will work together seamlessly and share a common appearance. Dreamweaver CS5 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 design. In addition, Adobe integrated Dreamweaver CS5 with Photoshop so you can use its “Smart Object” technology to keep your site’s graphics in sync with any changes you make to an original Photoshop file.