Adobe Dreamweaver CS5 – 4 New Features for CMS Development that you can not do without.

Adobe Dreamweaver CS5

With the release of Dreamweaver CS5, Adobe has addressed many of the difficult aspects of designing and developing for Content Management Systems by including the following four new features:

  1. Live Preview (no browser)
  2. File Relationship (filters)
  3. Live Code
  4. Code Hints (specific)

I do have to omit that I am a big fan of Dreamweaver, since the 1997 release, I have found the software to be easy to use and reliable. Other than a few interface changes, and improvements with software stability and workflow, Dreamweaver has not changed much over the years. While deploying internet content has completely changed.

Many web designers/developers have found their roles disappear as clients move toward popular and dependable user controlled content management systems and Social Network sites.

WordPress, Joomla and Drupal offer solid, steady framework web sites that integrate User Privileges, Social Networking, Blog Posting, Google Webmaster Tools, Shopping Carts, CSS capabilities and successful SEO integration. While Social Networking web sites like Facebook and Twitter provides cost effective communication tools.

Clients can now easily post/share content, create advanced online galleries, upload video and deploy endless amounts of content without any help from a web designer or developer. The only noticeable difference by removing the developer and designer is that the web sites look the same, which is generally clean, uninteresting and dull.

For advanced web developers who already had a familiarity with FTP servers transfers, Local Hosting, CSS, PHP, HTML, JavaScript and function based commands, then using Dreamweaver still remained a strong web development tool within their web developers arsenal.

For the advanced web designer, adapting to CMS Framework web sites was more difficult, if almost impossible.
CMS (Content Management Web sites) are dynamic web sites that populate content during runtime, meaning that web site content is generating in real-time for a particular user or request. Unlike static web sites that present the same content to all users, CMS produce content based on the assigned role for a specific user. For a website like Amazon identifying and producing relatable content to the user is an essential component to their success. However, beyond deploying independent content, the sidebar, header, footer and pages can be adapted to coincide with user permissions.

The problem that many web designers have had for the past five years, is that the resulting web site is difficult or impossible to see and complex to update in Dreamweaver.

With the release of Adobe Creative Suite – Dreamweaver (CS5) the role of the developer and design is back. With new integrated CMS Framework tools, developers/designers can test and author WordPress, Joomla or Drupal web sites all within the Adobe Dreamweaver environment.  With the Dreamweaver interface now having the ability to view and edit CMS Framework in real time.

Live Preview (no browser)

All users to Dreamweaver will instantly enjoy the new Live Preview feature. No more having to press F12 to view your webpage in an external browser, and no more of those aggravating activate now warning generated by Internet Explorer 8.   With Live Preview you have a real time preview of your web site right in Dreamweaver, with the extra bonus of being able to preview your content via any popular browser.
Live Preview works by creating a private proxy web site on the Adobe server and relayed back to the Dreamweaver interface.

Giving designers and developers a precise picture of how the web site will appear to your site visitors, making Live Preview feature a huge timesaver.

Adobe BrowserLab > Give access to Domain

File Relationship with filters

There are two very useful aspects to File Relationships with Filters. That can possibly reduce hours if not days from their workflow. From first file relationship aspect, gives you the big picture, the filtering ability provides the results to have access to precise functions or tools included deep within your web site.

Understanding how dynamic web site deploys content can be difficult enough to comprehend, but locating the correct line of code that controls the exact function, format or purpose of the content can be the quintessential needle in a haystack.
Forget about spending hours searching PHP, HTML, CSS, XML and JavaScript documents that content thousands of lines of valuable functional code. Dreamweaver CS5 expands on the build-in file relationship feature by including all files used in any capacity in that particular page. With earlier releases of Dreamweaver that included the file relationship tab, active pages no longer have to be include as local files. Dreamweaver will actually scan the server and compile the relationship based on the live active files, rather than the local copy of files residing on the computer hard drive.

One element that I think developers and designers will really appreciate is being able to see how different PHP, CSS and JavaScript documents relate to one another when used to create dynamic content. A basic WordPress page might use many different elements that share hundreds of live file relationships, making the active live File Relationship panel a little overwhelming. Dreamweaver developers have considered how vast source files can become and have included a clever filter feature. Making it easy and quick for developer or designer to access and edit any aspects of a web site.
Having the filter gives you the ability to search the web site for a particular feature; Header, footer, sidebar or DIV tag – and only show file relate files that include the particular element included for the search.


The LiveView is doing to dynamic web site, what Dreamweaver did ten years ago for static web pages. LiveView provides the developer/designer the ability to browse throughout the web site without leaving Dreamweaver. All of the web site functions are active in the preview – however, the big difference is now any component is editable within Dreamweaver, and fast to access. Simply click the item you need to alter and the corresponding line of code that controls the item will be presented and editable.
For the ultimate experience, combine LiveView with Live Preview.

Code Hints (specific)

New Code Hints Specific is that missing tool for CMS developers.
Writing code in Notepad is not a productive method for generating code. To be a productive web developer or designer it is important to become accustomed with viewing, editing and publishing code within the Dreamweaver environment.
Dreamweaver Code Hints is a fast method for writing clean, good and functional code. Dreamweaver has included code hint as a feature as far back as I recall. Early versions of Dreamweaver had code bloating problems that was later resolved to create a coding platform that produces web standard clean precise code. That is color coded and formatted for easy proofing and troubleshooting.

Building content and writing code of a content management system is different for each platform. For many developers it is easier to select one platform and only develop for that CMS. Dreamweaver is breaking that habit, by giving developers / programmers the ability to write CMS specific code based on the particular CMS updated, with Code Hints relating only to that one specific CMS.

Top Menu Bar: Site > Site-Specific Code Hints

Currently Dreamweaver has builds in presets for Joomla, Drupal and WordPress and any Custom Framework or custom set of class that are used on any dynamic web site.  The best part about the Code Hint feature is when used on a custom web site (not one of the top three), Dreamweaver will actually scan the entire server, locating all the web site functions, variables, CSS, HTML and PHP creating a code hint based upon those source files.  Now you can certainly brag about that Dreamweaver tool.

Other Dreamweaver and WordPress Resources

Written by – Gary Crossey