/>
X

Dreamweaver CS6

Dreamweaver CS6 delivers enhanced HTML5 and CSS3 features, flexible design tools and better mobile support. It also integrates Adobe's Business Catalyst hosting service.
adobe-dw-box.jpg
1 of 9 Adobe

Dreamweaver CS6
The return of the browser wars has meant that users expect more and more HTML5 features on the sites they visit. Dreamweaver CS6 is intended to give web designers and developers the tools they need to deliver those sites, adding support for modern CSS3 features like CSS Transitions, along with Fluid Grids that allow sites to be designed once and then delivered to phones, tablets and PCs. There's also improved mobile support, with JQuery Mobile Swatches for themes, and integration with Adobe's PhoneGap service to turn web applications into native mobile apps.

Dreamweaver is in two CS6 suites: Design/Web Premium (£1,509 ex. VAT; upgrade from £298) and Master Collection (£2,223 ex. VAT; upgrade from £397). On its own, Dreamweaver CS6 costs £302 (ex. VAT; upgrade from £95). Dreamweaver CS6 is also available via a Creative Cloud subscription (£38.11 ex. VAT on an annual subscription).

adobe-dw-start.jpg
2 of 9 Simon Bisson/ZDNet

User interface
There's a cosy familiarity to Dreamweaver CS6. The familiar mix of design and development tools remains, surrounded by properties panels and the tools you'd expect. There's the option of switching between views targeted at different users, including a multi-monitor view. Open a page and you can switch quickly between a design/layout service and a code editor with support for HTML, CSS and JavaScript, as well as a WebKit-based Live view that lets you see rendered pages without having to leave your code and open a browser.

Screenshots: Simon Bisson/ZDNet UK 

adobe-dw-fluid.jpg
3 of 9 Simon Bisson/ZDNet

Fluid Grids
Fluid Grids are a powerful HTML5 tool, and can simplify building sites that work across phones, tablets and PCs. You start by using Dreamweaver CS6's grid wizard to choose the number of columns in a grid, as well as the percentage of the page used for columns. Grid elements will align to your columns, and you can choose which ones show at which screen resolution. There's no need to add code — CSS media queries handle browser resolution detection for you.

adobe-dw-layout.jpg
4 of 9 Simon Bisson/ZDNet

Live view 
Once you've created a Fluid Grid layout you can add page elements, using DIVs to wrap and group elements. Using Dreamweaver's Live view you can choose which screen resolution you're working in, and then place DIVs appropriately. Some may be in different places and in different sizes for different views, while some may be hidden. It's best to start with the mobile layout first, before working on desktop and tablet views.

adobe-dw-jquery.jpg
5 of 9 Simon Bisson/ZDNet

JQuery swatches
If you're building mobile web applications, Dreamweaver CS6's JQuery mobile support simplifies building pages that work across the ever-growing field of mobile devices. Mobile apps need no longer all look the same, as you can now use Fireworks to design mobile swatches that can be used to apply styles to JQuery Mobile applications. Select the element you want to style, pick a swatch and apply.

adobe-dw-phonegap.jpg
6 of 9 Simon Bisson/ZDNet

PhoneGap
Adobe recently purchased Nitobi, the developers behind the PhoneGap tools that wrap web applications as native mobile apps. That means that the PhoneGap Build cloud service is now part of Dreamweaver. Sign up for an account and you can upload content to the service, downloading mobile apps ready for testing and for the app stores. There's even the option of getting a QR code for an app, which you can use to load test devices or to share prototype downloads with clients.

adobe-dw-code.jpg
7 of 9 Simon Bisson/ZDNet

Code types
If you're working with any of the more popular web development environments, you'll find the tools you want in Dreamweaver. There's support for ASP and ASP.NET, as well as PHP and Adobe's own ColdFusion. Pick the environment you're using, choose a layout template and you can start coding. There's even support for standalone JavaScript, so you can use Dreamweaver to create and edit JavaScript libraries, as well as working with newer technologies like node.js.

adobe-dw-css.jpg
8 of 9 Simon Bisson/ZDNet

CSS Transitions
CSS Transitions are one of the more useful features in CSS3, replacing what would have been lines of JavaScript with a few CSS statements. You can use transitions to add basic animations and effects to a page, and Dreamweaver CS6's transition tools make adding them as easy as selecting an element, and then choosing the appropriate rules — from triggering a transition, to choosing the properties to modify — and the final end state for the transition.

adobe-dw-bc.jpg
9 of 9 Simon Bisson/ZDNet

Business Catalyst
Adobe has integrated its Business Catalyst hosting service with Dreamweaver CS6, making it easy to publish sites to the service. There's also a library of Business Catalyst components, which can quickly add extra functions to a site — these are specific to the service, however, and won't work anywhere else. Dreamweaver users get a trial account that can be used to share prototypes and completed sites with clients. A subscription is needed for more permanent use.

Related Galleries

Cybersecurity flaws, customer experiences, smartphone losses, and more: ZDNet's research roundup
shutterstock-1024665187.jpg

Related Galleries

Cybersecurity flaws, customer experiences, smartphone losses, and more: ZDNet's research roundup

8 Photos
Inside a fake $20 '16TB external M.2 SSD'
Full of promises!

Related Galleries

Inside a fake $20 '16TB external M.2 SSD'

8 Photos
Hybrid working, touchscreen MacBook hopes, cybersecurity concerns, and more: ZDNet's tech research roundup
Asian woman working at a desk in front of a computer and calculator

Related Galleries

Hybrid working, touchscreen MacBook hopes, cybersecurity concerns, and more: ZDNet's tech research roundup

8 Photos
Developer trends, zero-day risks, 5G speeds, and more: Tech research roundup
Person seated at a booth in a cafe looks at their phone and laptop.

Related Galleries

Developer trends, zero-day risks, 5G speeds, and more: Tech research roundup

10 Photos
Drive Electric Day: A dizzying array of EVs in sunny Florida
ca3b4019-26c5-4ce0-a844-5aac39e2c34b.jpg

Related Galleries

Drive Electric Day: A dizzying array of EVs in sunny Florida

16 Photos
Incipio, Kate Spade, and Coach cases for Samsung Galaxy S22 Ultra: hands-on
s22-ultra-incipio-coach-cases-2.jpg

Related Galleries

Incipio, Kate Spade, and Coach cases for Samsung Galaxy S22 Ultra: hands-on

15 Photos
Casetify Impact Crush Galaxy S22 Ultra case hands-on: in pictures
casetify-s22-ultra-3.jpg

Related Galleries

Casetify Impact Crush Galaxy S22 Ultra case hands-on: in pictures

10 Photos