Adobe Dreamweaver CS5 What’s New
Adobe® Dreamweaver ® CS5
Design, develop, and maintain standards-based
websites and applications
Work visually or directly in code, develop with dynamic third-party application frameworks
like WordPress, Joomla!, or Drupal, and troubleshoot efficiently with CSS inspection tools.
Simplify advanced website development with custom PHP code hinting. Work more
securely in a team environment with enhanced support for Subversion® software.
Integration with Adobe BrowserLab—a new Adobe CS Live online service*—gives you
access to fast and accurate browser compatibility previews, including dynamic content and
user-generated interactions.
Adobe Dreamweaver CS5 is also
available as a component of:
•Adobe Creative Suite® 5 Web Premium
•Adobe Creative Suite 5 Design Premium
•Adobe Creative Suite 5 Master Collection
Adobe Dreamweaver CS5 software offers a comprehensive integrated environment in which to design,
develop, test, and deploy websites and applications of all flavors—spanning the gamut from the simplest,
static HTML page to complete sites built upon complex dynamic application frameworks. Dreamweaver
CS5 streamlines both front-end and back-end development tasks with ease. With a set of integrated tools
available directly in the authoring environment, Dreamweaver CS5 increases your productivity and
virtually eliminates the need for external third-party browser-based tools. Creative professionals can
jump-start the design process with updated CSS starter layouts and leverage enhanced CSS features for
increased control and creative flexibility. Developers benefit from interacting directly with their
database-driven applications and Ajax interface elements, including testing individual states of a page or
application throughout the development process. With many compelling new features, Dreamweaver
once again raises the bar on productivity and efficiency for web designers and developers alike.
View, access, and edit any file related to your PHP-based site or content management system with Dreamweaver CS5.
* CS Live online services are complimentary for a limited time. See the last page for details and limitations related to all Adobe online services.
Top new features
•Support for PHP-based content
management systems (Page 2)
•Dynamically Related Files (Page 3)
•Live View navigation (Page 3)
•Enhanced CSS tools (Page 4)
•Integration with Adobe BrowserLab
(Page 5)
•Enhanced support for Subversion
(Page 6)
•PHP custom class code hinting
(Page 6)
•Site-specific code hints (Page 7)
•Enhanced CSS starter layouts (Page 7)
•Simple site setup (Page 8)
•Integration with Business Catalyst
(Page 8)
With Dreamweaver CS5, you can:
Work with the most popular content management systems. Enjoy authoring and testing
support for third-party PHP-based content management systems like WordPress, Joomla!, and
Drupal. The Dynamically Related Files feature provides direct access to a page’s dependent files,
even for complex database-driven pages. Live View and enhanced Live Code offer accurate
previews of even the most advanced dynamic applications. Use Live View Navigation to follow
links to reach different application states, as well as view pages already on a live server, without
leaving Dreamweaver CS5.
Visualize and inspect CSS structure. Design and develop websites with more effective CSS
inspection tools. With the expanded and more powerful Live View, visually display and interact
with the CSS box model with no separate browser-based utilities required. Quickly and easily
disable and re-enable CSS properties directly in the CSS Styles panel for simplified testing.
Help ensure cross-browser compatibility. Preview dynamic web pages and local content with
multiple viewing, diagnostic, and comparison tools. From Dreamweaver, launch Adobe BrowserLab,
a new Adobe CS Live online service*, to preview your web content in multiple browsers and
operating systems. Navigate to an application state, such as a shopping cart, or freeze JavaScriptgenerated interface elements in Dreamweaver CS5 and preview these states in BrowserLab.
Who uses Adobe Dreamweaver?
Professional web designers have made Adobe Dreamweaver the market leader in visual
web-authoring tools, using it to create engaging websites for more than 11 years. The flexible
development environment in Dreamweaver allows visually oriented designers to work in
Design view to create their pages. By beginning with the CSS starter layouts, they can easily
insert assets created in Adobe Photoshop® and Adobe Fireworks® software, or interactive
elements created in Adobe Flash® Professional software. Using Live View in Dreamweaver,
web designers can preview and interact with their pages as they will appear in standards-based
browsers, making troubleshooting a more visual experience. Due to the extensible architecture in
Dreamweaver, designers who want to add Ajax-based interface elements to their designs
without writing any code can download third-party extensions from Adobe Exchange at
www.adobe.com/cfusion/exchange.
Web developers, who generally work in a more code-centric environment than their web
designer counterparts, rely on professional coding tools in Dreamweaver to build not only static
HTML pages, but also advanced web applications using back-end languages such as PHP and
Adobe ColdFusion® software. As web developers build sites upon popular content management
systems, they will be able to work on individual “pieces” of the dynamic page while seeing the
completely assembled page in Live View. Developers working within Code view quickly leverage
timesaving features such as code hinting, code completion, and code snippets for their chosen
server model as well as for client-side scripts written in JavaScript. Regardless of the language,
developers using Dreamweaver are confident that their code is written as they expect—but
should a syntax error inadvertently occur, real-time highlighting allows the developer to quickly
spot and correct the problem.
Top new features of Adobe Dreamweaver CS5
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 CS5 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.
* CS Live online services are complimentary for a limited time. See the last page for details and limitations related to all Adobe online services.
Adobe Dreamweaver CS5 What’s New
2
Dynamically Related Files
Achieve extraordinary web design
Explore the wider world of web
design and development with
Adobe Creative Suite 5 Web Premium software.
Get a more comprehensive toolset
at an appealing price. In addition to
Dreamweaver, CS5 Web Premium
offers the latest versions of Adobe
Flash Catalyst™, Flash Professional,
Flash Builder™ Standard, Photoshop
Extended, Illustrator®, Acrobat® Pro,
Fireworks, and Contribute®, so that
you can:
•Use a comprehensive toolset for
the Flash platform. With Flash
Catalyst CS5, Flash Professional
CS5, and Flash Builder 4 Standard,
create expressive, interactive
content that delivers consistently
across personal computers, mobile
devices, and screens of virtually any
size or resolution.
•Quickly create stunning 3D
artwork. With Photoshop CS5
Extended, take your designs even
further by easily building 3D
extrusions with Adobe Repoussé.
•Design crisp graphics for web
and mobile devices. With
Illustrator, you can deliver clean,
sharp, pixel-aligned artwork and
text with enhanced anti-aliasing.
For more information, see Adobe
Creative Suite 5 Web Premium
What’s New.
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 CS5 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 CS5 shows a
prompt, and allows you retrieve the file from the server with a single click.
With a single click, Dreamweaver CS5 can discover all the related files necessary to render the page.
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.
With Follow Links Continuously enabled, Live View
works like a browser, allowing you to click on links
and view states of your web applications.
Adobe Dreamweaver CS5 What’s New
3
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 CS5 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 CS5 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 CS5, 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.
Dreamweaver CS5 highlights box model properties with colors so you can visually inspect individual page elements.
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.
Adobe Dreamweaver CS5 What’s New
4
CSS enable/disable
Quickly and easily disable and re-enable CSS properties directly from the CSS Styles panel in
Dreamweaver CS5. 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.
Dreamweaver CS5 gives you the freedom to
experiment with and troubleshoot CSS by toggling
individual CSS properties on and off as you view the
box model changes in color.
Integration with Adobe BrowserLab
Dreamweaver CS5 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 CS5, 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.
Adobe BrowserLab allows you to compare your web pages and applications in multiple browsers without having the specific
operating system or browser installed on your local computer.
* CS Live online services are complimentary for a limited time. See the last page for details and limitations related to all Adobe online services.
Adobe Dreamweaver CS5 What’s New
5
Enhanced support for Subversion
With Dreamweaver CS5, you can manage files more effectively in collaborative, version-controlled
environments with enhanced support for Subversion, an open-source version-control system. In
Dreamweaver CS4, Subversion support was limited to the most basic functions of locking and
unlocking files and generating status updates. Dreamweaver CS5 expands support for Subversion,
allowing you to move, copy, and delete files locally, and then synchronize changes with your
remote SVN repository. The new Revert command allows you to quickly correct tree conflicts or
roll back to a previous version of a file. From the Repository View of the Files panel in
Dreamweaver CS5, you can reduce clutter by directly performing svn:ignore commands to hide
files you don’t need to access. To ensure future compatibility, the built-in Subversion libraries in
Dreamweaver CS5 are designed to be updated by the Adobe Extension Manager. As newer
versions of the Subversion libraries become available, they will be made available to the public as
free extensions at Adobe Exchange at www.adobe.com/cfusion/exchange.
Dreamweaver CS5 enhances support for Subversion, the open-source version-control system, with new commands that can give you increased control and confidence.
PHP custom class code hinting
Display proper syntax for PHP functions, objects, and constants to help you write code more
accurately. Dreamweaver CS5 provides enhanced PHP code hinting on the fly by dynamically
parsing PHP code and updating it as you type—even with code that hasn’t yet been saved to disk.
The code hints for PHP core functions and objects include the function signature, the module that
defines the function, a description tooltip that mentions the PHP versions in which it is available,
the method and parameter descriptions, and a link to the PHP.net manual page. Code hinting also
works with your own custom functions and classes, as well as with third-party frameworks such as
the Zend Framework. Dreamweaver CS5 dynamically highlights errors and provides alerts in the
Information bar to help you more efficiently find and fix errors in your PHP code.
Code hinting for core PHP functions includes descriptions and information from the PHP manual.
Adobe Dreamweaver CS5 What’s New
6
Site-specific code hints
As sites become more and more customized, especially those built using content management
systems and/or custom plug-ins, the need to edit customized code efficiently becomes more
important than ever. Site-specific code hints within Dreamweaver help you to more efficiently
handle PHP coding tasks on a site-by-site basis. Theme files for blogs and other custom PHP files
and directories can be included (or excluded) to customize the coding environment of
Dreamweaver CS5 when working with third-party PHP libraries and CMS frameworks such as
WordPress, Drupal, and Joomla! and others. For robust code hinting, you can also specify files and
even folders located outside of the defined site root.
Configure Dreamweaver to
provide code hints for specific to
your site’s structure, with the
most common content
management systems
automatically recognized.
Enhanced CSS starter layouts
Jump-start your standards-based website design with updated and simplified CSS starter layouts.
Based on user feedback and constantly evolving CSS best practices, the CSS starter layouts have
been completely rewritten. For example, complex descendent selectors have been removed in
favor of simplified, easy-to-understand classes, and the overall structure of the documents has
been revamped. To help ensure success with the new layouts, instructions and comments are
included both in the CSS code and the text of the document. Regardless of your experience, CSS
starter layouts speed your development time by providing a variety of solid structures upon which
to build your designs. For print designers and others just making the move to web design, CSS
starter layouts can dramatically speed up the learning process.
CSS starter layouts are now color-coded—liquid layouts are in shades of blue, and fixed layouts are in earth tones.
Adobe Dreamweaver CS5 What’s New
7
Simple site setup
To help make setup faster and easier, the Site Definition dialog box has been extensively
redesigned, implementing many improvements suggested by web designers and developers who
use Dreamweaver on a regular basis. You can start with as much or as little detail as you like—
even with just a site name and local site folder—and Dreamweaver will prompt you for the
remaining details as they’re needed as you build your site. For more advanced projects, you can
specify multiple servers with custom names to utilize staged, networked, or other server types.
To start a new website, you can give
Dreamweaver as little information as
a site name and where your local files
are stored, or all the details about
your site’s servers. If Dreamweaver
needs more information to carry out a
task, it will prompt you.
Integration with Adobe Business Catalyst
In today’s competitive environment, your clients demand more from their websites—they want
true business results. With the Adobe Business Catalyst® extension for Dreamweaver (available
separately and in English only) and the Business Catalyst online service* (available separately) you
can deliver powerful online businesses without programming and at a fraction of the time and
cost—all from within your familiar Dreamweaver workspace. Business Catalyst is an online service
that can replace as many as five or more applications and tools with a single central platform for
web designers that works hand in hand with Dreamweaver through the Business Catalyst extension
for Dreamweaver. Using the unified platform and without back-end coding, you can build
everything from amazing websites to powerful online stores, and from beautiful brochure-ware
sites to lead generating mini-sites.
Smooth integration between Adobe Business Catalyst and Dreamweaver CS5 makes it simple to maintain your online
businesses without leaving the familiar Dreamweaver environment.
* CS Live online services are complimentary for a limited time. See the last page for details and limitations related to all Adobe online services.
Adobe Dreamweaver CS5 What’s New
8
System requirements
Still using Dreamweaver CS3?
Windows®
If you still use Dreamweaver CS3, upgrading to Dreamweaver CS5 also gives you the chance to
catch up on all the great features added in Dreamweaver CS4. These include:
• Intel® Pentium® 4 or AMD Athlon® 64
processor
• Microsoft® Windows® XP with Service
Pack 2 (Service Pack 3 recommended);
Windows Vista® Home Premium, Business,
Ultimate, or Enterprise with Service Pack
1; or Windows 7
• 512MB of RAM
• 1GB of available hard-disk space for
installation; additional free space required
during installation (cannot install on
removable flash-based storage devices)
• 1280x800 display with 16-bit video card
• DVD-ROM drive
• Broadband Internet connection required
for online services*
Mac OS
• Multicore Intel® processor
• Mac OS X v10.5.7 or v10.6
• 512MB of RAM
• 1.8GB of available hard-disk space for
installation; additional free space required
during installation (cannot install on a
volume that uses a case-sensitive file
system or on removable flash-based storage devices)
• Live View and Live Code. Design your web pages under real-world browser conditions with Live
View while still retaining direct access to the code. Changes to the code are reflected in the
rendered display. Live Code enables you to see the generated source code as a browser would,
including dynamic content or code changes as a result of JavaScript. The Freeze JavaScript
command lets you freeze the state of the page to more easily style complex interface elements.
• New user interface. Work faster and smarter across Adobe Creative Suite components with a
shared user interface design. Use the Workspace Switcher to quickly toggle from one work
environment to the next.
• Fast image updating with Smart Objects. Insert Adobe Photoshop (PSD) files as Smart Objects
in Dreamweaver, and then update the images with one click whenever the original files change—
no more need to resave and reinsert images. Images are automatically web-optimized in your
preferred HTML-friendly format.
• Convenient access to the code and CSS styles you need. Choose any file in the Related Files
toolbar to simultaneously see its source in Code view and the parent page in Design view. Quickly
create CSS rules and control their specificity with the redesigned New CSS Rule dialog box. Use
Code Navigator to quickly access CSS source code that affects your current selection.
• Enhanced JavaScript support. With the addition of JavaScript code hinting and support in Code
view for your custom functions, your productivity when writing JavaScript is increased.
• 1280x800 display with 16-bit video card
• DVD-ROM drive
• Broadband Internet connection required
for online services*
For updates to system requirements, visit
About Adobe Systems Incorporated
Adobe is the world’s leading provider of software solutions to create, manage, and deliver highimpact, reliable digital content. For more information, visit www.adobe.com.
www.adobe.com/go/dreamweaver_systemreqs.
Expected ship date
Second quarter 2010
For more information
Product details:
www.adobe.com/dreamweaver
Adobe Systems Incorporated
345 Park Avenue
San Jose, CA 95110-2704
USA
www.adobe.com
* This product may allow you to extend its functionality by accessing certain features that are hosted online, including CS Live online
services (“Online Services”), provided you have a high-speed Internet connection. The Online Services, and some features thereof, may
not be available in all countries, languages, and/or currencies and may be discontinued in whole or in part without notice. Use of the
Online Services is governed by separate terms of use and by the Online Privacy Policy, and access to some services may require user
registration. Some Online Services, including services that are initially offered at no charge, may be subject to additional fees and require
a separate subscription. For more details and to review the applicable terms of use and Online Privacy Policy, visit www.adobe.com. For
more information about CS Live online services, see www.adobe.com/go/cslive.
Adobe, the Adobe logo, Acrobat, ActionScript, ColdFusion, Contribute, Creative Suite, Dreamweaver, Fireworks, Flash, Flash Builder, Flash Catalyst, Illustrator,
and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. AMD Athlon
and AMD Phenom are trademarks or registered trademarks of Advanced Micro Devices, Inc. Mac OS is a trademark of Apple, Inc., registered in the U.S. and
other countries. Intel, and Pentium are trademarks of Intel Corporation in the U.S. and other countries. PowerPC is a trademark of International Business
Machines Corporation in the United States, other countries, or both. Microsoft, Windows, and Windows Vista are either registered trademarks or trademarks
of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners.
© 2010 Adobe Systems Incorporated. All rights reserved. 02/10