Dreamweaver CS5

Adobe Dreamweaver has always offered solid tools for designing, building, and managing Websites. The latest version offers powerful tools for PHP programmers, a new tool for inspecting CSS, support for popular PHP-based content management systems, and a few simplifications that make setting up sites and building CSS-based layouts easier.

Welcome to the server side

Dreamweaver CS5’s most significant additions are aimed at Web developers building PHP-driven sites. PHP is a free, open-source Web programming language used on millions of sites (including FaceBook, Flickr, and Digg) and drives many of the most popular content management systems such as Drupal, Joomla, and WordPress.

Dreamweaver CS5 includes expanded code hinting support for PHP, so that as you type PHP code into a Web document, Dreamweaver lists functions and keywords that match. You can then select one of Dreamweaver’s suggestions and have it write in the rest of the code, saving your fingers from typing and speeding up your programming. The code hints feature also displays documentation directly from the PHP Web site, so that if you’re unclear on exactly how to use a PHP function, you can begin to type the function name, select it from the list of code hints, and then see an explanation of how that function works directly inside Dreamweaver.

Dreamweaver code hints even support your own functions and keywords. If you define a variable in your code (for example, $theValue), Dreamweaver is aware of it, so that if you begin to type just the first couple of letters ($th, for example), Dreamweaver suggests that variable in the code hints window. Even better, if you use WordPress, Joomla, Drupal or another pre-built PHP application on your site, you can point Dreamweaver to the PHP files for that application, and have it build a custom set of code hints. In other words, if you use WordPress, Dreamweaver can supply code hints for the core WordPress functions as well. All of these code hinting additions add up to faster programming and fewer keystrokes for you.

Unfortunately, code hints don’t pop-up automatically: you frequently have to type Ctrl-Space to make Dreamweaver display the code hint list, reducing some of the benefit of this “type less, program more” feature.

Dreamweaver CS5 is also much better at working with Websites that use nested (or “included”) PHP files. For example, in the WordPress blogging system, dozens of PHP files are used to display a single page. Dreamweaver’s “related files” toolbar now lets you open a Web document and find any of the PHP files used by that document, making it much easier to edit the PHP file you want.

Another great feature for those working with server-side programming is the enhanced Live View. Live View, which has been around since Dreamweaver CS4, uses Apple’s WebKit (the rendering engine behind Safari and Chrome) to display a page as it would appear in a browser (well, in Safari, at least). When in Live View you can easily preview pages that are created on the fly by a server-side programming language like PHP.

Dreamweaver CS5 adds navigation to Live View: when you click a link, Dreamweaver loads that new Web page in Live View. This feature is particularly important for dynamic sites, which often require a link to correctly display a page. For example, in the WordPress blogging system the main file, index.php, displays most of the pages on the site: the home page, categories pages, and individual blog posts. In other words, a blog post doesn’t exist as a single file—it’s really just created by the main index.php file. So, in order to preview many dynamic sites correctly you have to be able to click and navigate the site.

Unfortunately, if you’re programming-phobic and rely on Dreamweaver to write PHP for you, you won’t find any updates to the program’s “server behaviors.” Those handy, pre-written code snippets that handle all the behind-the-scenes programming for common tasks such as connecting to a database, retrieving, inserting and updating data, and password protecting Web pages remain unchanged (as they have for the past several versions of the program). The PHP enhancements to CS5 are aimed squarely at those who program their PHP code by hand.

Inspect your CSS

CSS (Cascading Style Sheets) is a Web designer’s most important tool for crafting beautiful sites, and Dreamweaver already sports great tools for creating, editing, and managing CSS. CS5 adds an excellent tool for inspecting CSS while in Live View. The new Inspect Mode lets you mouse around a page, and visualize the normally invisible space added by padding and margins; as you mouse over an element, Dreamweaver highlights the space added by margins in yellow, and the space added by padding in purple. In addition, the CSS Styles panel changes as you mouse around a page, displaying the styles that apply to whatever element you mouse over; this is an excellent tool for visualizing the complex interactions of styles known as the “cascade.”

When you click an element in Inspect Mode, Dreamweaver freezes the Styles panel and displays the list of styles applied to the element. You can then quickly see which properties are applied to the element and make fast edits to the styles.

Inspect Mode is especially useful for pages whose content is generated with JavaScript or a server side programming language like PHP, because it lets you quickly view and edit the CSS for content that isn’t visible in either Code View or Design View (like a JavaScript-generated pop-up menu or a byline on a WordPress blog post).

Additional improvements

Dreamweaver CS5 includes numerous small refinements as well. A revised “site setup” procedure greatly simplifies the process of getting Dreamweaver ready to work on a Website. Now there’s only one method for setting up a site (in previous versions you could choose either the time consuming “site definition wizard” or the confusing “advanced” setup process), that merely requires you to tell Dreamweaver where to find your site’s files, and what you’d like to name the site. You aren’t required to provide any other information to get started, and if you need to use other features of the program, like its built-in FTP tool, then Dreamweaver asks you for that information only when you try to use that tool.

The program also includes quite a few small, user-interface changes that provide more working room and a more logical organization of buttons. In addition, the “starter” CSS layouts that have shipped with Dreamweaver since CS3 have been re-written and simplified to provide better guidance, and ease of use for those learning CSS-based page layout.

Dreamweaver CS5 has built-in support for Adobe’s BrowserLab service. This Web-based service is a godsend to beleaguered Web designers who try to make sure their designs work in all major browsers. BrowserLab is basically a giant screenshot machine that takes pictures of a Web page using a wide range of browsers on both Windows and Macs—this is especially useful for Mac users who don’t have access to a Windows machine or multiple versions of Internet Explorer. Within Dreamweaver CS5, you can choose to preview a page you’re working on in Adobe Browserlab—this launches your Web browser and sends your page off to BrowserLab, which takes screenshots and presents them to you so you can compare your design across multiple browsers. BrowserLab isn’t a Dreamweaver CS5-only service, however. Dreameaver CS4 users can download an extension to work with BrowserLab, and you can even use the service without Dreamweaver at all.

Room for improvement

While Dreamweaver CS5 adds many new features for PHP programmers, other tools are beginning to show their age. The program’s visual, “what you see is almost what you get” editing mode fails to display some complex CSS layouts correctly, and doesn’t display the effects of commonly used CSS properties and techniques such as Web fonts (using the CSS @font-face method), generated content, word spacing, opacity, RGBa color, or many of the CSS3 selectors. This means that designers are more and more dependent upon Dreamweaver’s Live View to accurately see their designs—unfortunately, since you can’t edit the Live View, your workflow is interrupted by having to turn Live View on and off as you work on a page.

Dreamweaver CS5 has added little support for newer Web technologies like CSS3 or HTML 5. While you can now choose an HTML 5 doctype for a page, there aren’t tools for adding HTML 5 tags (not even code hints). In addition, the program has spotty or no support for new (and some not-so-new) CSS properties. For example the rule definition window—the designer-friendly dialog used to create styles—remains unchanged from last version and still doesn’t provide access to some widely supported CSS 2.1 properties like min-width, max-width, border-space, border-collapse, or RGB colors. Nor, will you find any tools to work with increasingly commonly used CSS3 properties like opacity, RGBa color, or the @font-face directive.

Although neither HTML 5 nor CSS3 are finalized standards, support among many Web browsers for some CSS3 properties is strong and some aspects of HTML 5 continue to make their way onto Web sites. Given that Dreamweaver has historically offered features that were ahead of the curve, even offering workarounds to support all browsers, this timid approach to emerging Web techniques in CS5 is disappointing.

Macworld’s buying advice

Dreamweaver CS5 is an excellent Web page building and Website management tool that handles all the major site building tasks, from creating HTML, CSS, and JavaScript, to managing files and links, and uploading completed pages to the Web.

If you own Dreamweaver CS4 the question of whether to upgrade depends on what kind of sites you build. If you’re a PHP programmer, the new code hint features and Live View enhancements will improve your productivity. In addition, for designers responsible for crafting the CSS designs of JavaScript-heavy sites or PHP-driven sites, the new Inspect Mode is a valuable addition. It provides the best tool yet for identifying and editing the CSS that formats dynamically generated page content.

However, if you build Web pages that don’t take advantage of PHP or aren’t heavily JavaScript driven, the additions in CS5 may not be that compelling. You won’t find any new tools for working with HTML, and most of the benefits of the Inspect Mode for examining CSS are already available for basic Web pages using the Current View of the CSS Styles panel.

[David Sawyer McFarland is the author of Dreameaver CS4: The Missing Manual (O’Reilly, 2008)]