Support for PHP-based content management systems
With authoring and testing support for third-party PHP-based content management systems (CMS) like WordPress, Joomla, and Drupal, Dreamweaver CS6 delivers a professional development environment for creating robust websites. Dynamically Related Files provides direct access to the assets necessary for these complex systems, including dynamically generated pages and content. New Live View Navigation allows you to explore the various states of your dynamic applications and pages—even those already deployed on a live server.
Dynamically Related Files
One of the biggest challenges in developing sites with a web-based content management system such as Wordpress, Joomla, or Drupal is understanding how a page will look when finally assembled. This is primarily because a page itself is generated dynamically by the CMS from any number of individual pieces, known as includes, and is dependent on server-side logic to be viewed in a browser. The Dynamically Related Files feature in Dreamweaver CS6 helps you access files and update pages faster, as well as simplify management tasks for complex sites. With a single click, you can direct Dreamweaver to discover all of the external files and scripts necessary to assemble the page and display their filenames in the Related Files toolbar. With Live View enabled, Dreamweaver renders the page as it will appear in standards-compliant browsers, complete with dynamic, database-driven content and server- and client-side logic.
Even the simplest pages in many of the popular CMS frameworks and themes have numerous dynamically related files, making it difficult to find the particular related files you need. With the ability to filter file types or use a wildcard expression, Dreamweaver lets you focus specifically on the files that you want to edit. If a related file doesn’t exist locally, Dreamweaver CS6 shows a prompt, and allows you retrieve the file from the server with a single click.
Live View navigation
Live View navigation expands upon the Live View feature introduced in Dreamweaver CS4 and allows you to quickly and accurately check your code and your CMS design themes. With Live View navigation enabled, not only can you view a page as it is rendered in standards-compliant browsers, but links are active, allowing you to interact with server-side applications and dynamic data. In addition to the rendered Live View of the page, Live Code highlights changes as they happen, allowing you to quickly locate the dynamically loaded data or code changes triggered by JavaScript. At any stage of development, Live View navigation also allows you to enter a URL to inspect pages served from a live web server and easily edit pages you have browsed to if they exist in one of your locally defined sites.
Enhanced CSS inspection tools
By separating page markup (HTML) from the actual presentation of the content (CSS), web designs have become much more flexible and adaptable. However, for seasoned professionals and novices alike, there is a need to understand how page elements relate to one another, as well as to have the freedom to iterate and experiment with their page designs in real time. With enhanced CSS tools and Live View, Dreamweaver CS6 gives you more control without having to leave your editing environment, even giving you the ability to view any link state and change text size—tasks that previously required a browser.
The Inspect command
Develop CSS-based designs more efficiently and accurately by visually displaying the CSS box model properties—including padding, border, and margin—in detail, without reading code or requiring a separate third-party utility such as Firebug. For designers who are new to web design or looking to expand their understanding of CSS, Dreamweaver CS6 makes it much easier to learn about the properties of an HTML element. In the past, external browser-based tools were required to visually identify page elements and their related CSS styles. This tedious process involved previewing the page in a browser, enabling the tool or plug-in, and then exploring the document to find the properties you wanted to change. Because this activity occurred in a browser, you had to keep track of all the changes made, and then copy and paste them into your web documents in Dreamweaver. In Dreamweaver CS6, you can use the Inspect command in tandem with Live View to quickly identify HTML elements and their associated CSS styles, giving you immediate feedback.
When an element is highlighted in Live View, its corresponding CSS rules and cascade are exposed in the CSS Styles panel where they can be edited in real time, removing the need to copy from an external tool and paste the results into Dreamweaver. When inspecting in Split view, the corresponding HTML code—including the tag—is immediately selected.
CSS enable/disable
Quickly and easily disable and re-enable CSS properties directly from the CSS Styles panel in Dreamweaver CS6. Disabling a CSS property simply comments out the specified property without actually deleting it, and the affected property is no longer rendered. This convenient option for toggling CSS properties on and off, coupled with the ability to inspect CSS, allows you to remain in your editing environment throughout the development process, eliminating the time-consuming process of previewing in the browser and troubleshooting with browser-based tools.
Integration with Adobe BrowserLab
Dreamweaver CS6 integrates with Adobe BrowserLab, one of the new CS Live online services, which provides a fast and accurate solution for cross-browser compatibility testing. Whether you are new to web design or a seasoned professional, you can use BrowserLab to preview web pages and local content with multiple viewing and comparison tools, customizing sets of browsers to meet your project’s requirements. While working within Dreamweaver CS6, you can interact with your page in Live View, including the ability to freeze JavaScript-triggered interactions, and then send this “snapshot” of the page directly to BrowserLab for an accurate preview in the specific browsers and operating systems you’ve chosen. For traditional designers who want to understand how the various browsers and browser versions render their content, Onionskin view in BrowserLab allows you to overlay the same page in two different browsers or browser versions to easily spot differences.
