Dreamweaver 4 Merges Code, Visual Web Editing

Today's Best Tech Deals

Picked by Macworld's Editors

Top Deals On Great Products

Picked by Techconnect's Editors

Since the day PageMill first appeared on the scene, Web-design tools have been divided into two camps: text editors that let you write the actual HTML code that makes the Web work, and graphical page editors, which hide that code behind a pretty interface that approximates what your page will look like in a browser.

With Dreamweaver 4, the latest version of the market-leading Web-page design application (due in December for $299; $149, upgrade price), Macromedia aims to bring the two camps back together with a full-featured visual page editing tool that's equally as impressive as an editor for hard-core HTML coders.

Integrated Code

In previous versions of Dreamweaver, you could view and edit the HTML code underneath your pages by popping up the floating Code Inspector window. But Dreamweaver 4 gives you two options that bring the code to the fore, both of which appear as buttons on the top left of Dreamweaver's new tool bar.

In addition to the existing Design View -- a graphical representation of a Web page -- you can choose Code View, which displays only the page's underlying code (complete with syntax coloring) within your regular Dreamweaver window. You can also mix both Code and Design modes in a split-paned view that shows the HTML code in the top half of the window and the graphical representation in the bottom half.

To further aid the HTML coder, Macromedia has included three references from publisher O'Reilly and Associates with Dreamweaver 4, designed to provide context-sensitive information about the proper use of HTML, CSS, and JavaScript. You can summon the floating Reference window via the Help menu or through a Reference button on Dreamweaver 4's handy new tool bar.

Other buttons in the toolbar provide access via pop-up menus to file upload and download commands, browser previews, a new in-browser JavaScript debugger (which only works with Netscape Navigator), and display preferences for both Code and Design views.

Flash...Without Flash

Macromedia's Flash allows designers to create vector-based animations (from the simple to the complex) and embed them in Web pages. Most users on the Web can view Flash animations, but until recently there was only one way to create those animations: by buying Flash and learning its somewhat complicated interface. Recently Adobe entered the fray with LiveMotion, a tool that can build simple animations using Flash's SWF file format. Now Macromedia makes the creation of Flash objects even easier with two tools built right into Dreamweaver's Objects palette.

The first object, Insert Flash Button, lets you create an animated, clickable button in SWF format by entering text, choosing the button's destination link, and picking a button template from a catalog of more than 50 styles provided by Macromedia. (Users of Flash can also create new templates for use within Dreamweaver.)

There's also Insert Flash Text, which generates text (with optional rollover color-change effect) in the SWF format. Traditionally, if you want to use a typeface on your Web page, the only way to be absolutely sure that it will display correctly has been either to use one of the handful of commonly available typefaces (Arial, Helvetica, and Times are the usual suspects) or to place your type within an image file. But the Flash file format allows you to embed text items that are smaller than those image files and yet can contain type that's faithful to your original fonts -- so long as the Web browser on the other end can display the SWF file format.

Tables in a Hurry

Perhaps Dreamweaver 4's most intriguing new feature is Layout View, which can be activated by clicking on a button at the bottom of the Objects palette. When you're in Layout view, you can create HTML tables simply by drawing them in your page via the Draw Layout Table tool; you can add cells to that table in free-form fashion by drawing with the Draw Layout Cell tool. As you add cells, Dreamweaver rejiggers the number and size of rows and columns in the table in order to accommodate what you draw.

While in Layout View mode, you can also specify the width of each column of the table. If you choose to set the width to Autostretch, Dreamweaver will allow that column to resize on the fly based on the width of the Web browser window; the program can even insert spacer GIFs in order to keep the table layout faithful to what you draw.

Many meticulous table designers will find the Layout View a needless complication; but for anyone who's ever gotten a headache from trying to figure out just how to organize a table's myriad rows and cells in order to get a design just right, this new version of Dreamweaver offers a useful alternate approach.

Other New Features

Among the other new features in Dreamweaver 4 is tighter integration with Fireworks 4 (also announced today), Macromedia's Web-graphics application. These latest versions can pass graphics files (and their accompanying HTML code, including scripts for rollovers) back and forth seamlessly.

Also, the new Asset panel makes it easier to track the media, colors, links, and other assets of your site; an altered window-management system makes Dreamweaver place its windows more intelligently, out of the way of floating palettes; a command that automatically integrates nested tables into the structure of their parent tables; and a new Site Reporting feature that can scan sites for errors and repair them automatically.

In addition, Macromedia will introduce Dreamweaver UltraDev 4 ($599; $299, upgrade from Dreamweaver; $149, upgrade from UltraDev), the second version of its extended version of Dreamweaver for developers of database-driven Web sites. This new version features better Mac connectivity to remote databases and a "server behavior builder" that allows users to easily build custom code fragments and user-interface interactions for those custom behaviors.

1 2 Page 1
Page 1 of 2
Shop Tech Products at Amazon