Dreamweaver 4.0

"A Mature Tool for Graphic Designers and Hand-Coders"

Click on a thumbnail to enlarge it. Use your browser's "BACK" button to return to this review when done.

Macromedia Dreamweaver 4.0 is a professional HTML editor for visually designing and managing Web sites and pages. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver makes it easy to get started and provides you with helpful tools to enhance your web design experience. Macromedia's Dreamweaver was introduced in 1997 and has grown and matured with each new version, making it one of the leading WYSIWYG editors. Now with version 4 of the software, Dreamweaver has become a program that has new and enhanced features that will make hand-coders sit up and take notice. I don't think it's actually the "HomeSite or BBEdit Killer," similar to Adobe's InDesign being toted as the "QuarkXPress Killer," but Dreamweaver 4 certainly does blur the edges between those programs and WYSIWYG software. Along with the new features aimed at making Dreamweaver a serious tool for Web developers who like raw HTML, there are new tools that should help graphic designers work with the Web. Also, following along the lines of Adobe, Macromedia has tightened the integration between Dreamweaver and its other programs--Fireworks, Flash, and Freehand--and they now share common interface elements.

Dreamweaver 4 has been designed to meet the needs of a variety of types of users. It includes such coding tools and features: a new and integrated HTML, CSS, and JavaScript reference from O'Reilly, a new JavaScript Debugger, and new code editors (the Code view and Code inspector) that allow you to edit JavaScript, XML, and other text documents directly in Dreamweaver. Roundtrip HTML technology imports HTML documents without reformatting the code--and you can set Dreamweaver to clean up and reformat HTML when you want it to. With the visual editing features in Dreamweaver you can quickly add design and functionality to your pages without writing a line of code. You can view all your site elements or assets and drag them from a new and easy-to-use Asset panel directly into a document. You can streamline your development workflow by creating and editing images in Macromedia Fireworks, then importing them directly into Dreamweaver, or add Flash objects you create directly in Dreamweaver. The program is also fully customizable. You can use Dreamweaver to create your own objects and commands, modify keyboard shortcuts, and write JavaScript code to extend Dreamweaver capabilities with new behaviors, Property inspectors, and site reports. Dreamweaver 4 is available for both the PC and Macintosh. HomeSite 4.5 and an evaluation copy of BBEdit come bundled with Dreamweaver 4. Macromedia has an excellent site to visit, with all sorts of information, freebies, and tutorials: http://www.macromedia.com

You can purchase Dreamweaver 4 as a stand alone product or as a packaged deal with Fireworks 4. The Dreamweaver 4 Fireworks 4 Studio is priced at $449. Dreamweaver 4 stand-alone is priced at $299 and Fireworks 4 stand-alone is priced at $299. Both Dreamweaver and Fireworks customers can upgrade to the Dreamweaver 4 Fireworks 4 Studio for $199. The UltraDev 4 Fireworks 4 Studio is priced at $699. Dreamweaver UltraDev 4 stand-alone is priced at $599.

• Dreamweaver Toolbar: allows you to manage how you view a page--Design view, Code view, or a view of both code and design. The toolbar provides easy access to commonly used features such as Preview in Browser and Design Notes.
• Code View: provides a new way to view HTML source code directly in the Dreamweaver Document window. You can also edit non-HTML documents such as JavaScript files and XML files directly in the Dreamweaver Code view.
• Integrated Code Editors: Dreamweaver now has integrated, state-of-the-art code editors--the Code view and the Code inspector. You can set word wrapping, code indenting, live syntax coloring, and more from the Options menu in either of these editors.
• The Reference Panel: a quick reference tool for HTML, JavaScript, and CSS. It provides information about the specific tags you are working with in the Code view.
• The Code Navigation Pop-up Menu: allows you to select code for JavaScript functions in a page; by using this menu, you can quickly navigate JavaScript code while working in Code view.
• The JavaScript Debugger: lets you debug JavaScript document while in Dreamweaver. For example, you can set breakpoints to control the code you want to examine.

• Layout View: lets you quickly design your Web pages by drawing boxes (tables or cells) to which you can add content.
• Improved Templates: makes it easier for you to identify the editable regions in a template file. Templates now display a tab that contains the editable region's name and a bounding rectangle.
• CSS Style Sheets: can now be defined as soon as you create a new style. You can also easily attach an existing CSS style sheet with a button in the CSS Styles panel.

• Flash Buttons and Flash Text: now built right into Dreamweaver. You can pick from a set of predefined Flash buttons and insert them into your document or have your Flash designer create custom button templates for you.
• Roundtrip Slicing: lets you work seamlessly between Dreamweaver and Fireworks 4. You can edit and update images and HTML tables you import from Fireworks. You can also edit in Dreamweaver or Fireworks and have the changes preserved in both places.
• The Web-Safe Color Picker: allows you to easily match colors with graphics. With just one click, you can select a color from anywhere on the desktop and the color picker snaps to the nearest Web-safe color.

• The Assets Panel: allows you to manage your site's assets. You can see all the images, colors, external URLs, and scripts, as well as Flash, Shockwave, QuickTime, template, and library items in a central location.
• Improved Design Notes: lets you attach notes to a file so you can track changes or communicate about development issues with other members of your team You can insert and view comments directly in the Dreamweaver Site window.
• Integrated E-Mail: allows you to communicate with team members. When a file is checked out by someone else, you can now click on the team member's name to send an e-mail message.
• Site Reporting: lets you use several predefined reports to test common HTML document problems, such as untitled documents or missing alt tags. You can also write custom reports to suit your needs, display report results, and open problem files within the Report results window.
• SourceSafe Integration: if you own SourceSafe, you can now check files into and out of SourceSafe while working in Dreamweaver.
• WebDAV Integration: now use Dreamweaver to transfer files using the WebDAV protocol.
• The Package Manager: (formerly the Extension Manager) easily install extensions with a single click.

• Keyboard Shortcuts: have a new interface that is common to all Macromedia Web publishing products. This new interface allows you to edit existing keyboard shortcuts, create new shortcuts for menu items, and delete keyboard shortcuts you don't want. You can also switch between sets of keyboard shortcut configurations.
• Window Management: is now improved. All windows snap into place. When you open a new window, Dreamweaver prevents it from overlapping visible panels.
• Panels: now have a new Macromedia look and behave consistently across the Web publishing products. All panels have icons and text so that you can easily identify them. Panels all use system colors and fonts on both Windows and Macintosh systems, and have consistent snapping and dragging behaviors.

I feel like Dorothy in the Wizard of Oz and singing, not "the wicked witch is dead," but "the wicked HTML Source Inspector from Dreamweaver 3 is dead." It's not really gone, though. You can still open it from the Launcher, but it has been replaced in Dreamweaver 4 with the split view or code view. The previous coding interface was difficult to use and not my favorite feature in the program. Now you can view any Web document in several different ways in Dreamweaver 4. In addition to the normal WYSIWYG view (now called "design view"), you can look at HTML code in "code view," or opt for a combination of the two with a split view which merges the code view and design view windows into one active window with two frames. You can work with your code above or to the side of your page layout without having to manipulate multiple floating windows. You can make a change in the design view and it will be reflected instantly in the code window. There's also an auto-indenting feature with the ability to select and indent multiple lines of code at once, line numbering, wordwrapping, and highlighting of invalid HTML. Plus HTML and JavaScript are automatically color-coded for quick identification. The code view also supports editing of non-HTML files, so you can open and edit such files as Cascading Style Sheets (.css files), external JavaScript files (.js files), text files, and even XML files.

The new layout view will be appreciated by graphic designers who are unfamiliar with HTML and tables and want a program that feels like software they are used to, such as QuarkXPress or Adobe InDesign. Within this view, you can simply draw layouts on a Web page with the draw cell and draw table tools. When you draw a rectangular box in layout view, Dreamweaver creates a table, displays a tracing box around the table and displays the pixel width and layer information directly in the layout window. This makes it easy for you to watch the pixel dimensions while you resize the table, move elements around inside the tables and merge cells to create nested tables. This intuitive approach allows you to build complex table-based layouts quickly. You don't have to understand cross-browser table construction, and it's a great way to learn table building. There is an auto-stretch column option to build flexible page designs that expand to fill the browser window. The table-nesting feature can prevent a common problem with tables. Cells can't overlap, so if one cell grows--because of dynamic data, for instance--it affects other cells in the table, throwing off your layout. By grouping cells to create a nested table, you can protect them from being affected by other cells--and keep your layout intact. There is also another neat table editing feature that has been added in Dreamweaver 4: the automatic table un-nesting option. This option is accessible from a button on the Properties inspector when a table is highlighted in layout view.

Dreamweaver 4 offers you the ability to instantly drop animated Flash buttons, Fireworks banners, animated GIFs, image maps, or other graphic elements onto your page with just a few clicks. Using Flash text allows you to use other fonts besides the limited Web fonts. To insert Flash Text, you select the "Insert Flash Text Button" from the Objects panel and then pick the font face, size, and color of the text in the dialog box. Flash text lets you use any TrueType font installed on your system. The text is saved as a small Flash movie and embedded into the Web page. You can edit the text within Dreamweaver whenever you want. Flash text can be used to link to other URLs, or you can just use it for headlines and titles. To insert a Flash button, you select the "Insert Flash Button" icon in the Objects panel. A dialog box will appear that allows you to select the type of button you want from a list of pre-fab choices. Many of the buttons are animated or include sound. You can enter the text that will appear on the button in the "Button Text" field, plus select font and background color attributes to match your design schemes. Also, you can enter the link where your button will lead, name the button, and save it to a selected directory. Both Flash text and Flash buttons created by Dreamweaver can be fully edited and customized either in Dreamweaver or Flash, also. Because Flash objects and text are vector-based, you can scale them up and down without losing sharpness or quality. Dreamweaver comes with button templates, but you can download more designs from the Macromedia Exchange Web site and also create your own using Flash.

Dreamweaver 3 had a check in/check out system that let users check out a file from the Web server for editing. Other Dreamweaver users could see the name of the person who checked out the file displayed in the site window and would be prevented from checking out the same file. This was an excellent way to keep users from working on the same file at the same time and overwriting each other's work. This only works for those editing files using Dreamweaver, and large organizations use a variety of tools for editing site files. Dreamweaver 4 still supports this basic check in and checkout, but Macromedia has responded to corporate requests for more robust features by providing support for industry standard tools--Visual SourceSafe and WebDAV. Microsoft Visual SourceSafe is a version control system that lets you view version history and roll back to previous versions of a file--or even an entire Web site. The Web Distributed Authoring and Versioning (WebDAV) plug-in lets Dreamweaver connect to a WebDAV server. You can preview and stage pages before uploading them to the Web server and lock and unlock files to avoid simultaneous work on a document. The WebDAV plug-in makes the Web a collaborative medium--writers and designers can share and update files remotely, regardless of which application or Internet service they're using, and without the danger of overwriting each other's work.

The new Assets panel in Dreamweaver is similar to the Library, but it has more features. It lets you track all your Web site media--images, colors, external URLs, scripts, Macromedia Flash, Shockwave, QuickTime, templates and library items--in one place, making it easy to manage assets from various sources. When you click a category icon in the Asset panel, you get a list of all the site media in that category. For example, clicking the images icon lists all of a site's images. When you select an asset from the list, the Asset panel displays a preview of it. For large sites, the list can be become exceedingly long, so you can manage and sort assets by marking frequently used assets as favorites. Thus you can group related assets together, give them nicknames, and find them easily in the Favorites View of the Asset panel.

Windows
Intel Pentium process or equivalent, 166 MHz or faster, running Windows 95, Windows 98, Windows 2000, Windows ME, or Windows NT (with Server Pack 5);
Version 4.0 or later of Netscape Navigator or Microsoft Internet Explorer;
32 MB of random-access memory (RAM) plus 110 MB of available disk space;
256-color monitor capable of 800 x 600 pixel resolution;
CD-ROM drive.

Macintosh
Power Macintosh running Mac OS 8.6 or 9.x;
32 MB of random-access memory (RAM) plus 135 MB of available disk space;
256-color monitor capable of 800 x 600 pixel resolution;
CD-ROM drive.