We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
Software Reviews
15,512 Reviews

Adobe Dreamweaver CS4 beta review

Free while in beta

Manufacturer: Adobe

The public beta of Dreamweaver CS4 released by Adobe this week delivers significant changes to the 10-year old web-design and -development tool.

The public beta of Dreamweaver released by Adobe this week delivers significant changes to the 10-year old web-design and -development tool.

Not only does Dreamweaver CS4 offer a complete overhaul of the user interface, it adds many new features aimed at the "professional" web developer.

In addition, the beta expands on the powerful (and easy-to-use) Spry toolset introduced in last year's Dreamweaver CS3 release.

Integration with the Creative Suite

The most obvious change to the program is Dreamweaver CS4's new user interface. The old Macromedia look-and-feel has finally been replaced with an interface that matches the other applications in Adobe's Creative Suite.

(Dreamweaver was among the Macromedia products absorbed by Adobe when it bought its one-time rival three years ago.)

While this change will take a while for long-time Dreamweaver users to get used to, the new interface significantly improves the usability of the program. Panels and windows mesh together well, are easier to organise, move and hide, and the new interface provides the flexibility to create a working environment that's comfortable whether you're working on a 17in monitor or a 30in Cinema Display.

In addition, Dreamweaver has taken its first step toward supporting a feature that's been in the other Creative Suite programs for years - SmartObjects. Dreamweaver CS4 now offers support for PhotoShop SmartObjects - you can drag a PSD file into a web page within Dreamweaver, optimise the image for the web, and even resize it.

If you later update the original PSD file, a red arrow will appear on the image inside Dreamweaver indicating that the source file has changed. You can then click an "update from original" button in the Property inspector, and a new version of the image is created.

A professional web developer tool

Dreamweaver has always been a powerful tool that has attracted both web novices and web veterans. This latest version offers a slew of features aimed directly at those that feel at home working in raw HTML, CSS and JavaScript as much as they do working with Dreamweaver's visual, dialog-driven tools. In fact, many of the new features promote a workflow that involves working in code view alongside the visual design view.

The new related files bar, which appears between the document toolbar and the document itself, lists all CSS and JavaScript files linked to the page. (If you're using a server-side programming language like PHP, you'll see included server-side files listed as well.) By clicking one of the related files in this bar, you immediately jump to the code in that file. In this way, you can open a single web page and immediately have access to other files the page references: quickly jump to the page's CSS file, make some changes and jump back to the web page file to see the changes.

The related files bar really shines when combined with another new addition: vertical split view. Now you can see side-by-side, a page's raw HTML code and its visual design. Make a change in the visual view and see the code immediately updated or vice-versa. When viewing a page that has related files (for example, an attached external style sheet), you can see the visual design of the page on one side, and a related file in the other. This lets you edit the CSS code and see the changes take place visually on the web page.

A new "code navigator" (which is really more like a "CSS navigator") lets you view a list of CSS styles that affect the current selection: you can view all of the properties set for that style and even jump directly to the CSS code for that style. While earlier versions of Dreamweaver provide similar tools through the CSS Styles Panel, this streamlined method makes for a more efficient workflow.

Dreamweaver CS4 offers many new features for HTML, CSS and JavaScript code warriors, including the related files bar, a new vertical split view, and live view to see the page as it actually looks (and works) in a web browser. In addition, you can view the "live" code (which Dreamweaver displays with a yellow background) to see any HTML produced by JavaScript or server-side programming.If you have ever been dismayed that Dreamweaver doesn't provide a real WYSIWYG view of your web pages, you'll be happy with the new Live View option.

The Dreamweaver CS4 beta embeds the webKit rendering image (the same as used in Safari), so by clicking a live view button you can actually see the page as it's rendered in a web browser: you can even interact with the page and view JavaScript effects like rollovers, drop-down menus and tooltip pop-ups without having to switch from Dreamweaver to a web browser.

The complementary Live Code view shows the HTML- a useful addition for pages that use JavaScript to manipulate the appearance and content of a page, or for dynamic server-side pages that require additional information from a database to display correctly.

Within live view, you can "pause" any JavaScript effects - for example freeze a drop-down navigation menu - then use the code navigator to quickly identify the CSS styles that affect the menu.

NEXT PAGE: more than just code > >

Visit Broadband Advisor for the latest news and reviews about the internet and internet tools.

INDIVIDUAL CS4 APPS REVIEWED IN DETAIL:

Adobe InDesign CS4 review

Adobe Photoshop CS4 review

Adobe Illustrator CS4 review

Adobe After Effects CS4 review

Adobe Premiere Pro CS4 review

Adobe Flash Professional CS4 review

Adobe Dreamweaver CS4 review

Adobe InCopy CS4 review

Adobe Version Cue CS4 review

Adobe Contribute CS4 review

Adobe Soundbooth CS4 review

Adobe Fireworks CS4 review

THE SIX ADOBE CS4 SUITES REVIEWED:

Adobe CS4 Master Collection review

Adobe CS4 Production Premium review

Adobe CS4 Web Premium review

Adobe CS4 Web Standard review

Adobe CS4 Design Standard review

Adobe CS4 Design Premium review

Dreamweaver CS4 beta Expert Verdict »
Intel Pentium 4, Intel Centrino, Intel Xeon, or Intel Core Duo (or compatible) processor
Microsoft Windows XP with Service Pack 2 or Windows Vista Home Premium, Business, Ultimate, or Enterprise (certified for 32-bit editions)
RAM: 512MB
1GB hard disk space
1,280 x 800 monitor resolution with 16-bit or greater video card
internet connection for activation

The Dreamweaver CS4 beta is available now from Adobe Labs. It requires either a PowerPC G5- or Intel-based Mac and OS X 10.4.11 or 10.5. The beta expires after two days unless you have an Adobe CS3 serial number. With that serial number, the beta will remain unlocked until the next version of the beta becomes available.

There are currently no price comparisons for this product.
  • Adobe Dreamweaver CS4 review

    Adobe Dreamweaver CS4

    Dreamweaver CS4 finally feels like part of the Creative Suite. The revamped interface now shares the look and feel of Photoshop, Flash, and Illustrator.

  • Adobe Fireworks review

    Adobe Fireworks

    New features in Adobe Fireworks CS4 provide designers with advanced tools to create websites, applications, and interactive designs.

  • Adobe Contribute CS4 review

    Adobe Contribute CS4

    Adobe Contribute CS4, a program that allows web-unsavvy users to edit web pages without the possibility of breaking the site, has changed little since the CS3 version.

  • Adobe Photoshop CS4 review

    Adobe Photoshop CS4

    Adobe Photoshop CS4, the latest version of Adobe's flagship image-editing program, will hit the streets practically on the heels of Photoshop CS3, which debuted a little less than 18 months ago.

  • Adobe Premiere Pro CS4 review

    Adobe Premiere Pro CS4

    Adobe Premiere Pro CS4 is the fourth incarnation of Adobe's professional video-editing software.


IDG UK Sites

5 things we want to see in Android M: New features and fixes

IDG UK Sites

iPad mini 3 release date rumours: 'iPad mini Air' will be 30 percent thinner than current model

IDG UK Sites

Introducing generation tech

IDG UK Sites

This animated film reveals the importance of designing for everyone