|Page (1) of 2 - 05/28/10||email article||print page|
Adobe CS5 Web Premium Part Three: Dreamweaver, Fireworks, and the RestThe three-part review concludes with two old Macromedia programs and one near hissy fit
We're down to the last major pieces of Adobe CS5 Web Premium, but last doesn't always mean least. OR DOES IT??? HMMMM??? With that as a spectacular teaser, let's spend our final installment looking at two holdovers from those halcyon Macromedia days of yore: Dreamweaver, the venerable web site building tool, and Fireworks, the oft-overlooked prototyping and vector/bitmap editing powerhouse.
Dreamweaver grows up right before our eyes
What a difference a week makes. Last week at this time, in part two of this series, I lamented the following:
Adobe CTO Kevin Lynch, even as I was writing this piece, came out and said the company was going to build world-class HTML5 products, but I'm very curious to know when that might be, or in what form that will take.
Well, we're starting to get some idea. Literally moments after last week's piece left my hands, Adobe went and posted a preview version of the Dreamweaver CS5 HTML5 Pack, an extension which adds a good chunk of HTML5 goodness to the previously-lacking Dreamweaver CS5. Here's what the pack includes:
- New and updated code hinting for additional tags and attributes in HTML and CSS
- Support for <video>, <audio>, and additional CSS3 rendering in Live View (note: video support was displaying garbled images as of this writing)
- HTML5 templates in the New Document dialog
- And, most intriguingly, a new Multiscreen Preview panel (fig. 1)
This is an encouraging development for a couple of reasons. For one, Adobe's commitment to HTML5 is suddenly more than just lip service (in the words of Adobe's John Nack: "a little less conversation, a little more action"), which is all any of us could have said about the shipping version of CS5. Two, Adobe is breaking with "tradition," such as it is, and being aggressive with add-ons and extensions right off the bat this time around, which is absolutely needed in this age of a majorly hyped Web spec being adopted on the fly. In any event, there's nothing like starting right in the middle, right? So let's back up a bit and get to some of the features Dreamweaver CS5 had from the beginning.
So, after catching our breath, let's start with one of the biggest complaints designers had about previous versions of Dreamweaver: it was nigh impossible to use DW to work effectively with leading CMS platforms. The response is a beefed-up handling of PHP-based sites in general, and specific support for WordPress, Drupal, and Joomla.
Here's how it works: first, you define a site using Dreamweaver CS5's much improved, far less picky, and generally much easier to configure Site Setup tool (fig. 2).
Once you're done with that, you can work with files as normal. However, as is the case when working with CMS platforms, simply opening index.php (for example) isn't going to be terribly helpful. What is terribly helpful is the way Dreamweaver now recognizes that you're using a CMS, and offers to discover related files for you (fig. 3).
I'm using WordPress in this example, and once DW does its thing, all the files it finds appear in the related files area (fig. 4). In the case of WordPress, there are so many related files that even a very tall screenshot (fig. 5) doesn't even tell the whole story.
Anticipating that this might be a problem, Adobe added a custom filter option (fig. 6), allowing you to only display files meeting a specific criteria, which cleans things up quite a bit (fig. 7)
General-purpose code inspection
Moving on from the CMS goodness, Dreamweaver CS5 packs a couple features that fall into the generic heading of "code inspection." First up is the new way of visually inspecting the CSS box model. Just flip the Inspect switch, hover over part of your page, and you can see content (turquoise), borders (gray), margins (yellow) and padding (purple). Clicking on an inspected area freezes the effect, at which time you can enter new values or even hide a style entirely (fig. 8) and see changes reflected in the Live View in real time. You can even jump to the CSS code itself to see where your edits are being updated.
The second item is a seemingly innocuous change that, when coupled with features available since CS4, transforms Dreamweaver into a Firebug-like tool for not only wrangling your own code, but works just as well for pretty much any site on the Web. I'm talking about the addition of an address bar that allows general browsing, meaning that you can type in any address and use Dreamweaver's Live View, Live Code, Inspect mode, or whatever else to see what's doin' behind the scenes.
Lastly, I'd be remiss if I didn't mention how Dreamweaver CS5 integrates with Adobe's BrowserLab service. I'll get to how I'm generally not interested in Adobe's push into integrated services in a bit, but BrowserLab remains an exception to me. I enjoyed the preview version, which had been available for almost a year, and I was excited about having the service integrated into Dreamweaver. However, the process of getting it to work was beyond painful. Even with an integration patch applied, even after signing up for the CSLive service (which I would not have done otherwise), even after trying every connection option available, I never got images delivered to Dreamweaver -- the panel always got stuck on something, often never progressing past the "launching Browser Lab" dialog. It requires your browser to be open anyway, which kind of defeats the purpose of integration in the first place. The whole process reminded me of Dreamweaver CS3's supposed "deep" Photoshop integration, which never worked correctly. So chalk one up in the disappointment column.
Figure 9: That really looks like something is going to happen, doesn't it?
Related Keywords:adobe, cs5, web premium, dreamweaver, fireworks