So, Adobe has finally released details of Creative Suite 5, and you’ll be able to get your hands on it at the end of this month. As the author of a forthcoming book on Dreamweaver (Adobe Dreamweaver CS5 with PHP: Training from the Source), I’ve had the opportunity to explore the new features of Dreamweaver CS5 for some time. Here are my thoughts.
When CS4 was released 18 months ago, I described it as the “most significant release of Dreamweaver since Dreamweaver MX ”. To my mind, Dreamweaver CS5 just blows CS4 out of the water. Before I explain why, let me address the negatives. At least three groups of people are going to be disappointed by this new release:
- Early adopters of HTML5 and CSS3—support is close to zero.
- Developers of dynamic sites hoping for new server behaviors—there aren’t any.
- Former users of GoLive—Dreamweaver CS5 hasn’t incorporated any features from GL.
With the debate that has been raging over Apple’s decision to ban Flash from the iPad and iPhone in the name of HTML5 and “web standards”, many will be stunned to learn that the only concession to HTML5 in Dreamweaver CS5 is the option to use an HTML5
DOCTYPE. There’s also no support for CSS3. Has Adobe missed the boat on this? In publicity terms, maybe. In reality, I don’t think so.
HTML5 and CSS3 are still evolving. The current web standards are still HTML 4.01, XHTML 1.0, and CSS2.1. Moreover, Dreamweaver is extensible. Rick Curran has already created an extension for CSS3 code hints. You can also add HTML5 tags to Dreamweaver through the Tag Library. No doubt someone will come up with an extension for that, too. In my view, it would have been a mistake for Adobe to release a half-baked implementation of incomplete standards that are still not supported on all browsers in widespread use.
The basic design of the server behaviors is now eight years old, so many people had been asking for new, improved ones, particularly after the decision to drop Adobe Dreamweaver Developer Toolbox (ADDT) last year. Few people realized the significance of that move. This is only my personal opinion, but I think Adobe was sending a clear signal that it’s not in the business of creating server behaviors to automate the generation of server-side code. It’s leaving that market to extension developers like WebAssist, CartWeaver, DMXZone, and others.
So, what is it about Dreamweaver CS5 that I like so much? Lots!
One of the biggest improvements is that Live View now works like a browser. “What’s new about that?” you might think. The difference is that in CS5, the links work. Hold down Ctrl/Cmd while clicking a link, and the target page loads into the Dreamweaver Document window—even if it’s a live page on the internet (assuming, of course, that you’re connected). The Related Files toolbar gives you direct access to the code of all pages linked to the new page. If the target page is on a remote site, the code is read-only; but on a local site, you can edit the code, and press F5 to see the results in Live View. If you want to keep the changes, there’s a new option on the File menu to Save All Related Files.
If you’re still wondering why this is an improvement, just try it with a content management system (CMS) like WordPress, Drupal, or Joomla! As long as you have set up a testing server, you can now view a CMS in Live View. Not only that, Dreamweaver CS5 lets you interact directly with a database. You can test online forms in Live View, inserting database records, updating, and deleting them. Dreamweaver CS5 eliminates the need to make constant round trips to a browser for testing, because the browser is right there in the Document window.
Of course, you still need to test pages in a variety of browsers, but you can launch BrowserLab directly from Dreamweaver to test your pages in Adobe’s online service. Up to now, BrowserLab has been free, but it’s being turned into a paid-for service. Your purchase of Dreamweaver CS5 or one of the suites gives you continued free access to BrowserLab and InContext Editing for another year.
The related files feature now searches for dynamically related files, in addition to those directly linked to the current page. This gives users of WordPress and other CMSs access to the style sheets, which you can edit in Split view or through the CSS Styles panel, seeing the results immediately right inside Dreamweaver. You can even navigate to inside pages of a CMS to style them. And to make it easier to work with CSS, Live View has a CSS Inspect button that highlights block-level elements, padding, and margins in the same way as Firebug—all within the Document window. Another Firebug-like feature is the ability to disable a style rule temporarily by clicking next to the property name in the CSS Styles panel.
As a PHP developer, it’s the changes in Code view that really excite me. When you start typing a PHP script in Dreamweaver CS5, you’ll immediately notice a red marker in the line numbers column and an alert about a syntax error.
Complete the line without errors, and the marker and warning disappear. Dreamweaver constantly checks your syntax on the fly. It doesn’t tell you what the errors are, but it highlights all lines with errors, making the debugging process much quicker. PHP code hints have also been improved dramatically. There’s full support for all core functions, constants, and classes (as of PHP 5.2).
Code hinting is also much smarter. Instead of needing to search through code hints alphabetically, Dreamweaver CS5 searches for substrings. This is helpful when you can’t remember the exact name of function or class—just type the part of the name that you remember, and Dreamweaver includes it in the list. You can also work out your own shortcuts. For example, if you press Ctrl+spacebar and type gesi, the code hints take you straight to
getimagesize() by recognizing the ge of “image” and the si of “size”. And in case you don’t know how a function or class works, the official manual page—complete with code examples—appears as a tooltip at the bottom of the selected code hint.
Incidentally, the smart nature of code hints also applies to style sheets. If, like me, you constantly pick
widows instead of
width, just type dt—it takes you straight to
For serious PHP developers, it gets even better. Dreamweaver CS5 is capable of code introspection, so it builds code hints on the fly for your own functions and classes, as well as for third-party libraries, such as the Zend Framework.
The definition files don’t even need to be directly attached to the page you’re working in. With Site-Specific Code Hints, you tell Dreamweaver where your library files are located, and it scans them for you automatically.
My feeling is that Adobe made the right decisions. HTML5 and CSS3 are not ready for prime time; and server behaviors can offer only a limited number of options if they’re to remain manageable. Site-Specific Code Hints and the improvements to Live View open up a vast new range of opportunities to the beginner and more experienced PHP developer alike. I liked Dreamweaver CS4 a lot, but CS5 is a huge improvement.
Of course, Adobe can’t stop there. CS6 will need to offer solid support for HTML5 and CSS3, but by that time the specification should have settled down and browsers should have caught up.