Introducing Adobe Dreamweaver CS3

I'm very excited to announce the availability of Adobe Dreamweaver CS3. One highlight of this release is our focus on solving key workflow issues for web designers and developers. Working closely with customers is an essential component of our development process, and I think you'll be very pleased with the results.

Whether you want to get started with technologies like Ajax and CSS layout, automatically detect browser CSS bugs, or accelerate bringing Photoshop content into Dreamweaver, this release brings major improvements to your everyday tasks. Dreamweaver serves a broad set of customers, from the most seasoned hand-coders to those just learning HTML, and the remarkable improvements in Dreamweaver CS3 span that entire range.

Spry framework for Ajax

We've heard more and more from customers that they want to get started with Ajax—but there can be serious challenges in learning Ajax development. While Ajax frameworks have dealt with many of the issues around browser compatibility, they've also introduced their own complexities that make them difficult to learn and understand—especially for someone with a less technical background.

Since we couldn't find a framework that fit our vision for simplicity and ease of use, we built our own: the Spry framework for Ajax, freely available on Adobe Labs. The Spry framework is built to work for both web designers and developers. Building on the patterns of HTML and CSS makes it familiar to web designers, but Spry also includes all the power that web developers need to create complex dynamic interaction.

While the code itself is easy to learn and use, the visual tools in Dreamweaver make that process even simpler. With Dreamweaver CS3, you can add user interface widgets and visual effects with a few clicks of the mouse and drag and drop XML data right into your page. If you prefer to work in code, Dreamweaver's rich code hinting and highlighting capabilities for Spry ensure that you'll be at your most efficient.

Изображение недоступно

Figure 1. Spry framework for Ajax

Browser compatibility check

Ensuring that CSS renders consistently across browsers is another daunting problem made easy in Dreamweaver CS3. We've heard from a broad spectrum of web designers and developers that they are spending hours finding, identifying, and attempting to fix browser compatibility issues. It can be a huge time sink.

Dreamweaver CS3 automatically detects code that will trigger rendering bugs in the major browsers, identifying the name of the issue and where in your code it's being caused. We also provide a link to the solution on Adobe's new CSS Advisor: a free community-driven resource that ensures our browser compatibility data is always up to date.

Other code validators typically check solely against the XHTML and CSS standards, but that solves only half the problem: the real difficulty is when the browsers deviate from standards or the standard itself is unclear. Dreamweaver CS3 is the first tool to automate finding these most thorny of CSS issues—and it's going to transform cross-browser development. What used to be a frustrating debugging process is now truly simple with Dreamweaver CS3.

Изображение недоступно

Figure 2. Check Browser Compatibility

Adobe Photoshop integration

One excellent example of Adobe and Macromedia's union bearing fruit for customers is Photoshop integration in Dreamweaver CS3. We know that web designers and developers often use Photoshop or Fireworks to create comps of web pages and then copy and paste pieces of them into Dreamweaver. Trouble is, until now it was not as easy as copy and paste: it could be a many-stage process to select the piece you want, copy, create a new document, paste, save the document, set compression settings, choose the location, and so on. We knew we could make this important workflow more efficient.

With Dreamweaver CS3 and Photoshop CS3, you can now copy and paste directly between Photoshop and Dreamweaver. Simply choose your compression settings and filename, and the pasted image appears right at your insertion point in the document. Dreamweaver remembers the source file so you can easily open the original to make changes. Moving between Photoshop and Dreamweaver now couldn't be quicker!

In addition to copy and paste, you can import whole Photoshop documents directly into Dreamweaver—yes, Dreamweaver reads PSD files. All these same workflows work for Adobe Fireworks CS3 as well, giving Dreamweaver an end-to-end solution for both of these key professional digital imaging applications.

Изображение недоступно

Figure 3. Adobe Photoshop integration

CSS layouts and management tools

We've definitely heard from customers that the transition from table-based layouts to CSS-based layouts can be a tough one. That said, the benefits of using CSS for layout are widely recognized, so there's a strong need to help people get started using CSS for layout. What we noticed when we looked at pages on the web was that there's a limited set of basic layouts: one-column, two-column, three column, fixed width vs. liquid vs. elastic, etc. Of course every site is unique but most are based on one of these common patterns. Given that, why should anyone have to start their layout from scratch?

With Dreamweaver CS3, you don't have to. We've built in all the most common CSS-based layouts, each one tested to work in all major browsers. Now you can start with our simple layouts and make them your own. To that end, we've provided extensive information on each layout to help people learn how to customize them. CSS layout can be complex but the detailed comments provided in each file not only make simple changes (like changing column widths) easy, but provide a basis for learning CSS layout as a whole.

Изображение недоступно

Figure 4. CSS layouts

As more people move towards CSS layout, they're also creating more CSS rules and spending more time working on them. As a result, there's now a greater need than ever for efficient CSS management tools. In Dreamweaver CS3, you can now drag and drop rules to move them wherever you need them: within a CSS document, to another CSS document, or from a style tag in the head of an HTML page. You can even convert inline styles to CSS rules in two simple steps. These same capabilities are also available in Code view via context menus and the coding toolbar.

Where to go from here

I hope you're as excited as I am about what's now possible in Dreamweaver CS3. We're proud of what we've accomplished. These are only the highlights of the latest release, so please check out the product page or feature tour for more detailed information.

Also see this video discussion about it from Donald Booth of the Dreamweaver quality engineering team.

Автор: Kenneth Berger, Adobe.

Написано Март 26, 2007

Комментарии