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.
Type of Product

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.

User Level
Advanced Beginners, Intermediate and Advanced computer and Web designers. The program is not difficult but it is powerful and has numerous features, so I would suggest you have some experience with computers and Web design before you use this program. It is well suited for graphic designers moving towards Web design who need software that feels familiar and works well with graphic design tools. The software comes with a hefty User's Guide and includes guided tour movies, tutorials, and lessons to help novices. The Macromedia Web site has further information, tips, and tutorials. The program is also robust enough for professional Web developers who need control and access to their source HTML. Also, it is suitable for corporate Web masters who work with both Internet and Intranet sites and need a cross-platform application that offers standard templates, is compatible with dynamic publishing and e-commerce solutions, and can be customized to suit various skill levels.
Enhanced Code Editing
  • 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.
Easier Page Design
  • 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.
Improved Integration
  • 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.
Streamlining Your Workflow
  • 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.
Common User Interface
  • 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.
Integrated Text Editor

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.split view 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.

JavaScript Debugger
debuggerJavaScript fanatics will love the new JavaScript Debugger that uses your browser to help you find errors in client-side JavaScript code. You can use traditional debugging practices such as setting breakpoints, stepping into and out of functions, and watching variables to debug JavaScript programs within Netscape Navigator and Internet Explorer. The debugger helps you quickly find and fix errors; understand how Netscape and Internet Explorer implement JavaScript differently; and view and edit JavaScript variables and objects via the Watch List.
Layout Mode

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 layout tablesdraw table tools. When you draw a rectangular box in layout view, layout modeDreamweaver 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.

Macromedia Flash Text and Buttons

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 flash textcolor 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 flash buttonbutton 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.

Visual SourceSafe and WebDAV Integration

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 sourcesafeexcellent 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.

Asset Panel

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, asset panelShockwave, 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.

Code Reference
The Code Reference feature augments the Dreamweaver Help system by letting you look up reference material on HTML, JavaScript, CSS and browser DOMs directly in Dreamweaver. This really helps new users quickly learn HTML, CSS and JavaScript, and experienced users can use it to look up code examples or track down browser compatibility issues. You can view Netscape and referenceInternet Explorer compatibility for every HTML tag and JavaScript DOM reference. The content in the Code Reference is based on the Definitive DHTML Reference book published by O'Reilly Publications. To use the Code Reference panel, you choose a reference book, and then select the appropriate HTML tag or JavaScript function from a drop-down list. You can drill down further to find information on tag attributes or JavaScript methods and properties. Also, the context-sensitive panel makes it easy to look up information. You select an HTML tag or JavaScript function in code view, and then select Shift-F1, and the Code Reference panel will automatically switch to the proper reference material.
Roundtrip Graphics Editing
Dreamweaver 4 and Fireworks 4 are even more tightly integrated than previous versions. Dreamweaver 4 also integrates more closely with other popular Macromedia products, like Flash and Freehand. Clicking on any graphic in Dreamweaver will automatically launch Fireworks to open the file for editing. Any changes that you make to the file will be reflected instantly both in Dreamweaver and in Fireworks when you save your changes. Macromedia calls this "round-trip" editing because your changes show up without you having to refresh the page or reload your files. Also Fireworks will no longer change code that you carefully tuned in Dreamweaver, and in turn Dreamweaver now recognizes and preserves fine-tuned Fireworks HTML. Plus, behaviors created in Fireworks are now fully imported into Dreamweaver.
Site Reporting
With the Site Reporting feature in Dreamweaver 4, you can identify and fix common site errors easily. Reports check external links and look for combinable nested font tags, missing Alt text, redundant nested tags, removable empty tags and untitled documents. You can save compiled reportreports as HTML files and print them. Site Reporting also lets you easily fix problems--when you double-click a report error, Dreamweaver automatically opens the problem file and selects the error in the code. The Site Reporting architecture is extensible, so developers can create new report files that focus on project-specific requirements such as browser compatibility or file size limits. Also, you can develop your own custom reports or download free reports from the Macromedia Exchange.
Configurable Site Window
Dreamweaver 4 offers a simple content management process using Design Notes to customize the site windowSite Window. The configurable Site Window offers your team a flexible, simple way to track site development. To configure the Site Window, you add a custom column in the Site Definition dialog box and associate the column with a Design Note. You can use custom columns to track site information and edit the information directly in the Site Window. There is also integrated email support. When team members check out files, their names are hyperlinked in the Site Window. You can just click on a name to send an e-mail to a team member.
Personal Comments
Macromedia's Dreamweaver 4 is a solid and easy-to-use professional Web development program. The new Code View, Layout Mode, and Code Reference, alone, should definitely make this latest release a must-have upgrade for serious Web designers. At a cursory glance, you might think that the program has not changed much. But Macromedia has done an excellent job of taking an already good program and adding, tightening, and enhancing features so that Dreamweaver is more solid and robust than ever.
System Requirements

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.

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.

Graphics: Adobe Illustrator & Adobe Photoshop 6.0
Web Page Editor: Macromedia Dreamweaver 4.0
Scanner: Hewlett Packard ScanJet 6250C Professional Series