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.
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 website, 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 prebuilt 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 behaviours.” 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.
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 visualise 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 visualising 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.