Review: Adobe Dreamweaver CS5
Pros: Supports the popular WordPress, Joomla!, and Drupal content management systems; makes working with CSS easier; improved features for coding in PHP; more page preview options.
Cons: No HTML5 or CSS3 support out of the box.
Rating: 85 out of 100
The Web is all about change, and Web designers who fail to constantly adapt to change often need to find another line of work. The nature of Web sites has evolved drastically in the past few years. Sites with static pages, edited occasionally by hand, are fading fast. Today, many commercial and personal Web sites are built with content management systems (CMSs), which build pages dynamically by pulling from databases containing HTML, code, images, and other elements. Adobe has finally recognized that shift, and Dreamweaver CS5 is now relevant in the world of CMSs. At the same time, CS5 has goodies for long-time users who never create CMS-based sites, offering better and easier control over your site’s CSS than CS4. With an addition, it will satisfy people who want to use Dreamweaver to work with sites based on emerging Web standards, such as HTML5 and CSS3.
Support for Content Management Systems
Perhaps the biggest new feature in Dreamweaver CS5 is the ability to work with sites that are built on the foundation of a Web content management system (CMS), which are applications running on a Web server that create and manage Web content. The CMS manages and controls a dynamic collection of Web material and usually (but not always) assembles and creates Web pages that are served to the user “on the fly”; that is, the page is built and sent to the user when the user requests the page. Unlike static HTML, pages that come out of a CMS often don’t exist at all before the CMS software puts together the HTML, CSS, images, and scripts, and squirts them over the Internet to a user’s waiting Web browser.
Dreamweaver CS5 supports three of the most popular PHP-based Web CMSs: WordPress, Joomla!, and Drupal. (PHP is a programming language that typically is installed and runs on Web servers.) You can now use Dreamweaver to author, edit, and test content from any of these systems. You can view dynamically generated pages on a CMS-based site inside Dreamweaver; discover the related files used by the CMS and edit them in Dreamweaver; and filter down those files to find and work on the ones you need to make changes to your site.
As part of loading the page in Live View, the program works with the supported CMSs to discover all the files that go into building the page. Dreamweaver then lists them all in the Related Files toolbar. You can then open any of the related files and edit it using Dreamweaver’s tools. Dreamweaver makes it relatively easy to do something that was previously quite difficult and required serious expertise in a particular CMS: find the particular related files you need. Because there can be so many files, Dreamweaver lets you scroll the Related Files toolbar and filter the file types it shows. You can even create custom filters to display files based on parts of their names.
Pages generated by a CMS are based on templates that control the site’s look and feel. Because the content of the site is separate from its presentation, you can easily change the entire look of the site by modifying or switching the site's templates. You can now use Dreamweaver to build and modify CMS templates, then test them with your sites.
Navigating Your Sites
In CS4, Live View couldn’t follow links, so you couldn’t easily explore your sites within Dreamweaver. That problem is fixed in CS5. Live View navigation allows you to interact with server-side applications and dynamic data. You can use the new Browser Navigation toolbar to enter a URL to inspect pages from a live Web server and edit pages you’ve browsed to, as long as they exist in one of your locally defined sites (Figure 3).
Figure 3. The new Browser Navigation toolbar has an address bar and allows you to easily browse your sites without needing to resort to a separate Web browser.Better Control Over Your CSS
Two new features make it easier to write, modify, and work with cascading style sheets (CSS), an essential task with today’s sites. Dreamweaver was already no slouch in this department, so the new features are really icing on the cake.
The first feature answers the designer’s questions, “Just what does this CSS property do? Do I need it here?” CSS Disable/Enable lets you turn individual CSS properties off and on directly from the CSS Styles panel, allowing you to easily test and see the effect of the property. This works with and without Live View on; just click next to the property in the CSS Styles panel, which toggles an icon with the circle-and-slash No symbol.
Figure 4. In CSS Inspect mode, hovering over an element on the page visually displays its CSS properties.
Figure 5. When you have CSS Inspect and Live Code both active, hovering over a page element is reflected in both the code and rendered views. Click the image below for a larger version.Making Codeheads Happy
If you’re a coder, there are several new features for you. Dreamweaver CS5 expands support of Subversion version-control servers so you can move, copy, and delete files locally, and then synchronize changes with the remote depository. If you don’t like the changes, you can now revert them from within Dreamweaver.
If you’re a PHP programmer, there are many new features aimed at you. The PHP code hinting has been greatly improved, so that as you type your PHP code and press Ctrl-Spacebar, Dreamweaver pops up function names and appropriate properties (Figure 6). If you need help with syntax, you can get documentation for the function you’re entering, provided from the PHP web site.
Dreamweaver has PHP code hinting presets for WordPress, Joomla! and Drupal.
One of the most vexing problems for designers is making sure their pages will display acceptably across different browsers and computer platforms. Most of us don’t have the resources to maintain a lab of computers with different operating systems and browsers so we can test sites in the myriad potential combinations. Adobe’s online service, BrowserLab, shows you how your page will be rendered by many different browsers and versions, under several different operating systems. Adobe BrowserLab uses Flash to display its emulated page renderings in a browser. You can choose which browser or browsers you're emulating, and you can view rendered pages in a two-up mode, viewing them side-by-side to see the rendering differences.
Dreamweaver CS5 can now preview pages directly to BrowserLab, just as if it were any other browser. When you preview to BrowserLab, Dreamweaver sends the page to the service, which then renders the page as it would appear in whatever combination of browsers and operating systems you specify.
Dreamweaver has always had starter layouts that you can use as jumping-off points for your own designs, but they’ve been improved in CS5 to use the latest CSS best practices and boast new, easy-to-understand classes and structures. The text on the starter pages now explain more about the document’s structure and how the CSS works, and when you view the code, you’ll find that it's heavily commented with explanations of each element.
Figure 7. You can use the Widget Browser to find and add new interactive elements for your Web pages. Click the image below for a larger version.Keeping Up with the Standards-Based Joneses
One of my initial disappointments with Dreamweaver CS5 was its conspicuous lack of support for two up-and-coming Web standards: HTML5 and CSS3. Each of these standards are far from complete, but they are workable for certain browsers, and many designers are interested in using, or at least learning, their capabilities. The desire to get up to speed with these standards has been spurred by the ongoing disagreement between Apple and Adobe about Flash support on the iPhone and iPad, with Apple asserting that HTML5 is robust enough to replace Flash, and Adobe’s vehement dissent. Regardless of either side’s claims, HTML5 is here to stay, and Dreamweaver needs to be able to create and work with it.
After Dreamweaver CS5 shipped, Adobe released the free HTML5 Pack, which the company describes as a “technology preview” for working with HTML5 and CSS3 in Dreamweaver. It’s implemented as an extension, installed with the Adobe Extension Manager. . Once installed, it adds code hinting for HTML5 elements; updates the code hinting in existing HTML tags to align them with the HTML5 specification; adds code hinting for many CSS3 specifications; provides a couple of HTML5 starter layouts; and improves Dreamweaver’s Live View so that it can better render pages made with the new standards.
The HTML5 Pack is oriented mainly toward coders. For the most part, Dreamweaver hasn’t been updated to integrate the new standards into the program’s graphic interface. For example, you can’t insert a movie file using the HTML5 <video> element in the same way that you might insert other media types from Dreamweaver’s Insert menu. Instead, you can insert the tag in the Code view, and Dreamweaver will help you write the code by showing you the tag’s attributes and auto-completing the code so that you don’t have to type all of it.
Despite the improvements in Dreamweaver’s Live View, the program won’t play media files in HTML5 documents; to properly preview these files, you must use an HTML5-compliant browser. Still, the HTML5 Pack allows Dreamweaver users to take advantage of these emerging standards (Figure 8).
Figure 8. This HTML5 document contains many new tags that are part of the new specification; here, you can see hgroup, nav, section, article, figure, and video. Click the image below for a larger version.Your Upgrade Decision
Pricing for Dreamweaver hasn’t changed: It costs $399 for new purchasers and $199 for upgrades from Dreamweaver 8 or later, or GoLive CS or later. Upgrades from the standalone product to the CS5 suite are more complex, ranging from $599 to $1,499, depending on which version of the suite you want. See the Adobe Web site for complete details.
If you currently have Dreamweaver CS3 or earlier, the decision to upgrade should be an easy one. The improvements in CS4, plus the new capabilities of Dreamweaver CS5, should increase your productivity enough to pay for the upgrade cost. On the other hand, if you have Dreamweaver CS4, don’t work with PHP, have no need to design for sites backed by a CMS, and are already a whiz with CSS, then you may want to give this version a pass.
Liked This? Read These!
HTML5 will be the next major revision of HTML once it's worked its way through the World Wide Web Consortium (W3C) approval process. Although it probably won't be final for a few years -- maybe even... Read More
Given the growing popularity—and all the hype—around HTML5, it's no surprise that many of the new features in Dreamweaver CS5.5 are meant to help you create cutting-edge Web page designs with the... Read More
If you've read Part I of this series, you should have a working copy of WordPress running on your computer—or at least you know how to set it up. In this second part of the series, I'll show you how... Read More
As a Web designer, odds are pretty good that you spend a fair amount of time preparing graphics for your Web pages. Whether you need to create a logo, a banner, or a set of navigation buttons, the... Read More