Macromedia Dreamweaver

By most accounts, Dreamweaver is the leader in professional Web authoring tools. While both GoLive and Microsoft FrontPage (discussed next in this chapter) have their strengths, those strengths tend to focus on integration—GoLive integrates well with other Adobe products, whereas FrontPage integrates well with Microsoft products. Dreamweaver, in many cases, is favored simply for its interface and its approach to Web page creation. Personally, I've come across a number of Web neophytes who have found that Dreamweaver helps them make sense of basic Web editing and updating—even the actual process of sending files to the server via FTP is made a little more bearable by Dreamweaver.

In fact, Dreamweaver's emphasis on interface design means you can work with fewer palette windows on the screen, if desired. You can actually drag tabs from one palette to another, creating a personalized interface that enables you to work with fewer windows that still have your favorite tools. This is a great way to get quick access to the tools you use regularly, particularly once you've worked with Dreamweaver a bit and gotten a sense of its capabilities.

At the same time, Dreamweaver is owned by Macromedia, a powerhouse multimedia applications company. This means it integrates well with Macromedia's tools, which include some very popular Web development tools such as Macromedia Flash. In fact, Macromedia sells Dreamweaver in different bundles that include Flash, Fireworks (for animated and optimized images), and other Macromedia applications. These bundles (Macromedia calls them Studios) can be much cheaper than buying all the included applications individually.

Where to Get It

Macromedia offers a free 30-day demo of Dreamweaver that you can download from http://www.macromedia.com/software/dreamweaver/. The suggested price for Dreamweaver is $299, although upgrade and "cross-grade" prices are also available.

Dreamweaver's Strengths

Dreamweaver features a good mix of visual editing and textual editing, which works well for both the novice Web author and one who has XHTML experience. The blank page offers the user a word processor-like interface, with a small taskbar that holds commonly used elements that can be dragged into the window and defined. Using that tool palette, you can add anything from a horizontal line to a plug-in object.

The word processor theme is carried through to the Properties window, which shows up at the bottom of the page by default. As you move to different elements on your page, the Properties window changes to reflect the sort of element you're working with. You can then make immediate changes that are reflected in the code that Dreamweaver generates, such as changes to the fonts, sizes, or styles of text, or to the dimensions or alternate text of images. You create hyperlinks using the Properties window by highlighting text or an image and entering an URL in the Link entry box (see Figure 6).

Figure 6 As you create your page, use the Properties area to quickly change values and styles.

One favorite element of Dreamweaver's interface is a split-window option for code-level editing of the page. You can view pages in full graphical mode, source code-only mode, or a split window with source code on the top and a graphical representation on the bottom. This is great for knowledgeable Web authors. You can immediately see the changes made in one environment and tweak them in the other. If you add an element in the graphical pane, for instance, and you don't like one of the attribute settings that Dreamweaver uses, you can click in the source pane and edit it. The changes are shown immediately in the graphical representation (see Figure 7). Note that both sides are active at once—highlighting text in the preview pane also highlights it in the source pane. You can jump back and forth, editing freely on either side.

Figure 7 The split-pane approach is great for authors who know their way around HTML.

Dreamweaver features a Reference panel that includes content from books that offer quick reference for both HTML and CSS. Likewise, a palette is available that makes it easy to add CSS styles to your page, whether you're creating a site-wide style sheet, a redefinition of an existing element, or a class for use with various elements. Unfortunately, the Dreamweaver engine isn't fully capable of displaying those CSS styles, but you can use a button in the main window to preview your work in Internet Explorer, Netscape, or another external browser.

Aside from the windowpane approach to source code, Dreamweaver's most unique offering is the Asset panel, which is particularly useful for larger sites. The Asset panel collects the images, colors, URLs, and multimedia elements that you've already used in your site. Using the Asset panel, you can quickly drag and drop these recurring elements into your pages, making it easier to generate pages that use the standard navigational aids and other styles that you've developed for your site.

Dreamweaver's Layout mode is similar to GoLive's, but it offers some interesting visual feedback. Select the Layout icon in the View portion of the Object panel, and the Layout tools come alive. You can draw a table on the page and begin adding content, or you can draw individual cells on the page, which Dreamweaver automatically turns into cells of a whole-page table. As you draw these floating cells, you can see the rest of the table taking shape in the background. In this way, you can create very complex tables (see Figure 8) that can be used to create very interesting designs.

Figure 8 In Layout mode, you're free to draw cells all over the page, perhaps leading up to a very interesting page design.

Other features include a JavaScript debugger for creating and editing scripts. The debugger can find specific problems with your JavaScript code and help point you in the right direction.

Finally, are you interested in adding some Macromedia Flash rollover images? Thanks to Dreamweaver's shared parentage with Flash, it can create some basic Flash text and animated buttons without requiring an outside application.

Dreamweaver's Weaknesses

Compared to the other high-end Web editors discussed in this chapter, Dreamweaver is probably the weakest when it comes to working with server-side elements. While GoLive includes a number of built-in database-access capabilities, and FrontPage supports Microsoft's servers very well, Macromedia requires you to upgrade to Dreamweaver UltraDev if you want support for anything beyond basic server-side includes. The UltraDev package is powerful, with support for ASP, JSP, and Cold Fusion—names that should mean something to Web application developers. The UltraDev pacakge is more expensive than the others. If you're looking for a graphical editor that also works with various server front-ends, shop carefully.

Dreamweaver may be a bit frustrating if you're shooting for 100% strict XHTML 1.0 code because it tends to use a transitional DTD approach. However, Dreamweaver's plug-in architecture makes it possible for third-party software to fill that gap. You'll find such tools for XHTML compliance at http://www.macromedia.com/exchange/dreamweaver/, where Macromedia highlights the plug-ins.

Otherwise, Dreamweaver has few weaknesses, if you like the interface. FrontPage offers a more comfortable interface for users who are accustomed to Microsoft Office products, and GoLive is sometimes more comfortable for Mac users, Photoshop users, and those who are familiar with Adobe's products. But Dreamweaver tends to appeal to all sorts of customer profiles. It's simply a very impressive tool.

Dreamweaver's Highlights

Dreamweaver's Site window is a great place to start if you've already begun work on a Web site. Choose Site, Define Sites from the menu to begin converting an existing site to a Dreamweaver site. In the Site Definition window, you can name the site, choose its local root folder, and specify the URL that the site will use when it's available online. When defining the site, notice that you can do much more—under Remote Info, you can enter information about your FTP server or any other mechanism for updating the site that you choose. When the Design Notes feature is enabled, it lets you share notes with others who are working on the site.

Click OK in the Site Definition window to create your site. Now you can use the Site, Open Site command to open this Web site whenever necessary. If you've set up FTP access, you can even use the Site window (see Figure 9) to quickly log in and transfer files to and from the server.

Figure 9 The Site window is great for quickly managing your Web site.

To edit an individual page, double-click in the Local Folder pane of the Site window. (Or, for individual pages, use the File, New or File, Open command.) Now, if you're like me, you'll immediately switch to the split-window view. (It's the center of three buttons in the button bar at the top-left of the editing window. Or you can choose View, Code and Design.) If the page is something you've worked on previously, you can scroll the source code view to see if any of it is highlighted. If so, that suggests the code is incorrect in some way. Make the corrections, click the Refresh button in the toolbar (or choose View, Refresh Design View), and you can see if you've fixed the error.

Adding elements to your pages is a simple drag-and-drop from the Objects bar, if that's how you want to do things. You can also use the Insert menu to add many types of objects, such as images (Insert, Image), tables (Insert, Table), or form elements (Insert, Form and Insert, Form Elements). You can even create layers (CSS- or Netscape-compatible) and add server-side includes.

As you're working, you can use the Properties window (it's at the bottom of the screen by default) to alter just about any of the markup you're working with in your document. If you highlight text, the Properties window changes to show text options. (Watch out—some of them may be using transitional elements such as the <font> element.) If you highlight a table cell, you'll see table-related choices.

Also, while you're working, it's handy to have the CSS Styles window open so you can edit and update CSS styles, many of which will be updated immediately in the Dreamweaver editing window. And with the Assets window open, you can easily drag and drop images, colors, and other elements that you've already used elsewhere in the site. This makes it convenient to keep your site looking uniform.

When you're done editing a site, choose Site, Check Links Sitewide for a quick report on any broken links that your site may have. You can then use that report to dig back into the site and fix the problems.