Adobe Dreamweaver CS4 - Upgrade Edition (PC)

Combine Live View with Live Code to reveal code as rendered in an interactive state, like hovering over and selecting a Spry data image. Armed with these details, you can quickly modify relevant CSS rules. Click to enlarge.

• Cross-product integration with key Adobe tools (Flash, Fireworks, Photoshop, Device Central)
• Support for HTML, XHTML, CSS, XML, JavaScript, Ajax, PHP, Adobe ColdFusion and ASP
• Full FLV support
• Advanced JavaScript functionality

Top new features of Dreamweaver CS4

Explore your code rapidly while viewing the page in the real-world browser rendition of the new Live View. Click to enlarge.

Related Files and Code Navigator--The Related Files feature displays all the documents associated with your current page, whether CSS, JavaScript, PHP or XML, in a bar along the top of your primary document. Click any related file to edit its source in Code View while viewing the parent page in Design View. Changes made to the related file code are immediately reflected in Design View. Prefer to work at code level? A click in either Code or Design View brings up the Code Navigator pop-up window, which displays CSS rules, server-side includes, external JavaScript functions, Dreamweaver templates, Library files, iframe source files and more.

CSS best practices--Implement CSS best practices without writing code. The new CSS tab in the Properties panel shows the styles for the current selection, plus all applicable CSS rules. Hover over any property to view a jargon-free tool tip. Create and apply new CSS rules in the Properties panel and store in the same document or an external style sheet. Dreamweaver CS4 even gives you control over the specificity of your rule; just click Less Specific or More Specific in the updated New CSS Rule dialog box to target your style precisely.

Code hinting for Ajax and JavaScript frameworks--Write JavaScript quickly and accurately with improved support for JavaScript core/DOM objects (Window, Screen, Document, Event), primitive data types (Object, Array, Number, RegExp, String) and advanced custom functions, with support for parameters, class constructors, and nested objects, updated in real time as you modify your related JavaScript files. Incorporate popular JavaScript frameworks including jQuery, Prototype, and Spry by attaching the appropriate external JavaScript files--Dreamweaver automatically displays code hints on demand. Built-in syntax error detection helps you create accurate code first time, every time.

The green symbol in the upper left corner of a PSD file inserted into Dreamweaver tells you that the source file and web-ready instance are in sync. Click to enlarge.

Panels, like the CSS Styles panel, can be quickly expanded to make modifications to your web page and, with a click, collapsed to allow maximum screen real estate for your design. Click to enlarge.

Adobe InContext Editing--This new online service lets anyone who can use a browser update content quickly and easily. Design your editable pages in Dreamweaver CS4 to retain total control over the look and feel of your sites; then, simply designate the parts of the page you want your clients to be able to change, with all other sections remaining locked. Easily set CSS styles to ensure entered content is properly and consistently formatted.

HTML data sets--Create your data in a standard HTML table, a series of div tags, or even an unordered list, and then choose Insert > Spry > Spry Data Set to easily integrate that data into a dynamic table on the page, complete with sortable columns, a master-detail layout or other sophisticated displays. It's easier than ever, with real-time previews along the way. Spry Data Set also works with XML files to render information from RSS feeds and other sources.

Improved Photoshop integration--Simply drag and drop a Photoshop PSD file into a Dreamweaver CS4 page to create an image Smart Object. Unlike standard web-page graphics, a Smart Object is tightly linked to its source file, so if you make any changes to the source image, Dreamweaver notes that the files are out of sync; just click the Update from Original icon in the Properties panel to immediately update your image without opening Photoshop. If you’ve used an image several times across your site (e.g. a logo) you can apply updates individually or in bulk, maintaining unique sizes. Photoshop images can also be re-scaled directly in Dreamweaver with no image degradation.

Subversion--Dreamweaver CS4 integrates Subversion for a more robust check-in/check-out experience to handle version control on collaborative projects. Checked modified pages into a Subversion repository directly within Dreamweaver and update your site to get the latest page versions.

Adobe AIR authoring support--Create multi-platform desktop applications from your Dreamweaver HTML and JavaScript sites with new Adobe AIR authoring support, without leaving Dreamweaver. Preview your Adobe AIR applications within Dreamweaver CS4 to make sure everything is working as designed.