Dreamweaver MX: The Missing Manual

Chapter 1. Dreamweaver MX Guided Tour

Welcome to Dreamweaver MX

Dreamweaver MX is a program for producing and managing Web sites. Whether you need a simple five-page Web site to let your friends know about your upcoming dance party, or a thousand-page e-commerce system with database connections and dynamically generated content, Dreamweaver MX can help. It lets you build Web pages and sites quickly and maintain them with ease. It also lets you add interactive behavior and advanced Web technologies like Cascading Style Sheets, and Dynamic HTML.

What MX is All About

The MX version of Dreamweaver is really two programs in one.

First, it’s the latest version of Dreamweaver itself, complete with all of the fabulous layout, design, and productivity tools that made a hit of Dreamweaver 4 and its predecessors.

Second, it incorporates the program formerly known as Dreamweaver UltraDev. This program, once sold separately, offers advanced programming technology for data-driven Web sites.

These two newly merged programs add up to a serious tool for creating dynamic, database-driven Web sites. You can now turn your company’s database of products into a dynamic 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. Most reassuring of all, Dreamweaver MX 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. While Dreamweaver has always prided itself on leaving HTML code you write exactly as you wrote it, Dreamweaver MX offers greater support for hand-coded Web pages. In fact, many of the new features in MX are aimed specifically at people who like to work in the raw code.

Why Dreamweaver?

There are other Web-page 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.gif” width="100” height="150” alt="The Boss” border="0">.

  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 on screen as they should 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 a graphic (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.

  But Dreamweaver relieves you of having to learn JavaScript for these purposes; the program makes it easy to add complex interactivity with just the click of the mouse. Chapter 11 explains how you can use these Behaviors (ready-made JavaScript programs in Dreamweaver) to bring your pages to life.

• Roundtrip code. Every now and then, even in Dreamweaver, you may sometimes want to put aside the WYSIWYG (what-you-see-is-what-you-get) view and look at the underlying HTML code of a page. You may feel more comfortable creating some of your HTML by hand, for example, or you may want to tweak the HTML that Dreamweaver produces.

  Macromedia realized that many professional Web developers still do a lot of work “in the trenches,” typing HTML 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 the Design view—and the Code view is seamless and, best of all, nondestructive. Unlike many visual Web page programs, where making a change in the WYSIWYG 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).

  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.

  See Chapter 9 to learn more about 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, Dream weaver 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.

  UP TO SPEEDHand-coding Versus WYSIWYG Editors

  Creating Web pages in a text editor was long considered the best method of building Web sites. The precise control over HTML available when code is written by hand 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, Macromedia has prided itself on Dreamweaver’s ability to produce clean HTML and its tolerance of 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, or Cold Fusion Markup Language.

  But the real story is that the code produced from working in the visual mode is as solid and well written as hand coding. 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 Web site in record time.

  Besides, 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.

• 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 9i. Dreamweaver MX 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 MX can help you build database-driven Web sites. Part IV 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 Macromedia 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 creation. This incredible flexibility lets you customize the program to fit your work methods, even add features that Macromedia’s programmers never imagined. Best of all, the Macromedia Exchange Web site includes hundreds of free and commercial extensions to download and add to Dreamweaver. See Chapter 20 for details.