Dreamweaver CS6: The Missing Manual

What’s New in Dreamweaver CS6

If you’ve never used Dreamweaver before, see Chapter 1 for the grand tour. If you’re upgrading from Dreamweaver CS3 or some other version of the program, you’ll find that Dreamweaver CS6 offers a host of new features:

• HTML5 is touted by everyone from AT&T to Google to Newsweek as the next big thing (described in more detail on XHTML). It’s the first major change to HTML in years and promises to make building powerful website easier than ever. Dreamweaver CS6 provides basic support for HTML5. That means that it understands the new HTML5 tags and provides code hints as you type those tags in Code view (code-hinting lets you type a few letters of a tag and then select the tag you’re after from a pop-up menu—in other words, less typing, fewer typos, faster web page building). Unfortunately, code-hinting is only helpful if you type HTML by hand. If you prefer using Design view and clicking buttons on a user-friendly palette of HTML options, you’ll have to wait for the next version of Dreamweaver for Dreamweaver-produced HTML5 code.

• CSS3 is, like HTML5, a new (and evolving) standard for web designers. It promises many new formatting controls to make web pages look beautiful, including drop shadows for text, rounded corners on boxes, background gradients, borders made of graphics, and even animated transitions from one set of CSS properties to another. Dreamweaver CS6 includes code-hinting for CSS3 and adds many CSS3 properties to the CSS Styles panel.

  Dreamweaver CS6 also adds helpful tools for some of CSS3’s most exciting offerings: the new web fonts manager (Using Web Fonts) frees you from the boredom of the same limited set of fonts (Arial, Helvetica, and Times New Roman, for example) that web designers have been using for years. Now, Dreamweaver provides an easy way to use any of hundreds of freely available fonts to enliven the typography on your pages. And the new CSS transitions panel (CSS Transitions) lets you easily add animations to mouse rollovers, so you can turn a navigation bar into an animated visual delight.

• Mobile Web Design. iPhones, iPads, Android gadgets, tablets, and other mobile devices are popping up like weeds. Web developers need to know not only what their site looks like in the many browsers on the market, but they also need to customize their sites for mobile browsers. Dreamweaver CS6 builds on the mobile tools added in CS5.5 (multiscreen preview to see designs at different screen sizes and media query support to craft your CSS to respond to different screen widths). CS6 introduces a new “fluid grid layout” tool that lets you build designs that re-flow content to match different devices: For example, using the same HTML, you can create designs that fit in a single column for a phone, two columns for a tablet, and three or more columns for a spacious desktop monitor.

• Mobile Application Development. Dreamweaver CS6 includes built-in support for jQuery Mobile and PhoneGap—two programming technologies that let you build mobile phone applications using just HTML, CSS, and JavaScript. The new PhoneGap Build service simplifies the headache-inducing hurdles usually involved in creating native applications for iOS, Android, and Blackberry devices. With it, you can write an application using HTML, CSS, and JavaScript and turn it into standalone phone app you can sell in iTunes’ App Store or one of the many other smartphone marketplaces.

• Under the hood improvements. Of course, any new version of software includes numerous bug fixes and performance improvements. Most notably, the Dreamweaver engineers have streamlined file transfers from your computer to your web server. In previous versions of the program, you had to transfer files one at a time; now you can move multiple files simultaneously.