Dreamweaver CS6: The Missing Manual

Why Dreamweaver?

You can find other web design programs on the market—dozens of them, in fact. But Dreamweaver is one of the leaders, thanks to key benefits like these:

• Visual page-building. If you’ve spent any time using a text editor to punch out HTML for your web pages, you know the tedium involved in adding even a simple photograph. When your boss asks you to add her photo to the company home page, you launch your trusty text editor and type in something like <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 several ways to stay in touch with your page’s visual design. If your interest is in design and not HTML, you can work in the program’s Design view. Drag an image to your budding web page there, and Dreamweaver displays the picture on the page. Just as a word processor displays documents as they’ll look when you print them out, so Dreamweaver gives you a close approximation of what your page will look like in a web browser.

  Another development approach web designers commonly use is keeping a page’s code and its browser-rendered look side-by-side. Dreamweaver’s Split view handles that, giving you direct access to the HTML of a page on one half of the screen and to its visual look in the other half.

  Finally, because Dreamweaver’s Design view is only an approximation of what a page looks like in a browser, the program offers “Live view”—a real-time look at your page in a web browser built right into Dreamweaver. That way, you can see what a page looks like and how it behaves without leaving Dreamweaver!

• 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 mouse over it. Dynamic effects like this—mouse rollovers, alert boxes, and drop-down 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 4), add advanced layout elements like tabbed panels (Chapter 13), and include sophisticated validation to prevent site visitors from submitting incomplete forms (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 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 a page’s raw HTML to your heart’s content. Switching back and forth between 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 Dreamweaver’s Split view to see your HTML side-by-side with a representation of your final page, or 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 7 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 to a web server. Part 4 of this book looks at how Dreamweaver helps you build and maintain websites.

  UP TO SPEED: Hand Coding vs. Visual Editors

  At one time, creating web pages in a text editor was considered the best way to build websites. The precise control that hand-written code gave you over HTML was (and often still is) seen as the only way to assure quality web pages.

  Professional site developers championed hand-coding because many early visual page-building programs added unnecessary code—code that affects how a page appears and how quickly it downloads over the Internet. But hand-coding is time-consuming and error-prone. One typo can render a web page useless.

  Fortunately, Dreamweaver creates solid code even in a 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, and ColdFusion Markup Language.

  But the real story is that the code Dreamweaver produces when you work in Design mode is as solid and well-written as hand-hewn code. Knowing this, feel free to take advantage of the increased productivity that 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 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 integrated Adobe BrowserLab (a browser-testing service) can help you make sure your pages look the way you really 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.

• 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 21 for details.