Dreamweaver CS5 First Look: More WordPressy, More Firebuggy
There’s a new version of Adobe Dreamweaver on the way, and it includes new features for building sites with WordPress, new CSS enhancements and a new set of tools that let you see code changes in real time as you work, much like the popular Firebug add-on.
Adobe announced details about its latest Creative Suite bundle of applications on Monday morning. Creative Suite 5 is Adobe’s new package of apps for building websites, assembling videos and editing photos. We have a first look at Flash CS5 here on Webmonkey, and we have a first look at the new Photoshop on Wired.com’s Gadget Lab.
Dreamweaver, which has been one of the most popular apps for developing websites since its debut (as a Macromedia creation) in 1998, gets a fairly substantial update in Creative Suite 5. It doesn’t have the whiz-bang new features found in Photoshop CS5, but if Dreamweaver is part of your development workflow, you’ll definitely find much to appreciate in the new Dreamweaver CS5 that makes it worth an upgrade.
Of course, whether or not to use a WYSIWYG editor like Dreamweaver is a debate in itself. Most can get by with a text editor, a few browsers and a short stack of reference materials. But if you’re working with a team of developers, or if you’re building more complicated sites with dynamic elements, databases and hundreds of pages, tools like Dreamweaver are essential. They speed up the workflow, keep everything organized and ease the pain of constant testing and iteration.
So, if Dreamweaver has a place in your life, here’s a rundown of what’s new in the latest version.
One of the biggest improvements in the new Dreamweaver is the inclusion of better development tools for dynamic sites built using PHP-based content management systems like WordPress and Drupal. These systems, which of course are super-popular for blogs and community sites, don’t spit out static HTML files. Rather, most of the pages on a WordPress blog or a Drupal site are generated on the fly using templates and include files. Dreamweaver CS5 now gives you tools to design templates and see what your layout will look like in your final design. The built-in WebKit engine renders your page as it would render in WordPress (or whatever PHP-based system you’re using).
PHP support has been improved in other places within Dreamweaver, too, with new code hints for WordPress, Drupal and Joomla, plus support for custom functions and classes, so you can create your own code hints and error highlights for other PHP frameworks.
Added support for WordPress and other like-minded CMS tools is a big improvement, and one that’s necessary since so much of web publishing has moved to PHP-based systems. Fans of WordPress or Drupal should find reason to test out the latest Dreamweaver and see if it takes some of the pain out of designing templates.
The new inspection tools in Dreamweaver CS5 let you make adjustments to the CSS or the DOM of whatever page you’re working on and see them rendered in real time. The inspector shows you how your code will change as you interact with dynamic elements on a page, and it will show you how various changes you make to stylesheets show up on the rendered page.
As with several of the features in Dreamweaver, this is something that you can do with the free browser-based plug-in of your choice. In particular, the inspection features offer an experience similar to the Firebug add-on and its various extensions, but here it’s baked right into the development environment. The primary advantage of having these tools sit directly inside your editing environment is one of convenience. Once you make the changes, there’s no copying, pasting, testing and redeploying. Most Dreamweaver users have found a happy medium between browser-based and IDE-based inspection and testing tools.
Speaking of testing, Dreamweaver fully integrates Adobe’s BrowserLab web service, which lets you examine your layouts as they appear in different browsers. So you can look at your page in a 2-up dialog, with Firefox on one side and IE8 on the other (or any two browsers). There’s also a cool “onion skin” feature that overlays your differently rendered pages on top of one another, so you can clearly spot any layout inconsistencies, color differences or interactive elements that don’t work.
BrowserLab is a free service available to anyone right now, and it very well may remain free for its entire lifetime. But the fine print on the site warns that Adobe could make it a paid service at any time. So, fair warning. UPDATE: Adobe’s site says “Notice: On April 30 2010, the limited free preview of Adobe BrowserLab will conclude. [...] If you sign up by April 30, 2010, you will receive one year of complimentary access to all CS Live services.” [Thanks, Scott!]
When it comes time to deploy files, Dreamweaver CS5 has vastly improved Subversion support. There was some support for Subversion in CS4, but it was pretty limited. Now, you can make all your changes, moves and deletions locally, then sync to your server. The
svn:ignore command works now, too. Also, the the Extensions Manager (which has been a vital part of Dreamweaver since the Macromedia days) now handles the Subversion libraries, so if there are any updates, you’ll be able to download them for free from Adobe Exchange.
Finally, something helpful for the new users: the addition of some new CSS starter layouts. These are basic CSS files that help you kick-start a site design using the latest web standards, including totally bare-bones layouts and more complicated things like dropdown menus. So if (like a lot of people starting out) you understand CSS but you don’t feel confident writing it all yourself, Dreamweaver’s templates will provide a boost — and hopefully keep you from taking the easy route and doing your whole site in tables. There, of course, similar templates available on the web, but they vary in quality and in compatibility across browsers.
The new Dreamweaver will ship soon, (Adobe says mid-May), along with the rest of Creative Suite 5. Dreamweaver on its own costs $400, or $200 for an upgrade from any previous version going back to Dreamweaver 8. You can also get Dreamweaver in one of the Adobe Creative Suite 5 bundles, which vary in cost from $1,800 to $2,600 depending on which one you buy. Upgrades vary between $500 and $1,400 for the suite. Also, we should note that Adobe has done away with the Web Standard edition of Creative Suite, so now the Web Premium edition is the cheapest CS5 bundle you can buy that includes Dreamweaver.