To begin, lets take a look at the main improvements/changes for Dreamweaver CS6:
• Fluid Grid Layout
• Updated Multiscreen Preview panel – allows you to check rendering of HTML5 content
• Enhanced jQuery Mobile support
• Updated Live View
• Updated PhoneGap support
• Adobe Business Catalyst integration
• CSS3 transitions
We’re going to take a quick look at these features in this article, then delve into greater depth in subsequent articles.
Fluid Grid layout are new starter templates. These allow you to create adaptable page layouts with a multicolumn design grid. One fast way to get started is: File: New Fluid Grid Layout. In the New Document dialog box you’ll see three layouts for mobile devices, tablets and desktop resolutions.
The first step is to specify the layout grid, then create the layout using DIV tags which you can name as part of the layout. Once you’re done, you can preview the layout with the Multiscreen Preview pane. The one down side of using DIV tags is management, so when you’re working on layouts and copying information from one file to another, I recommend working in code view with each DIV tag, that way you’ll be able to make sure that the code goes where you want it to go. Also, you’re less likely to inadvertently delete a DIV tag, which will play havoc with your layout.
By using scaling layouts, you avoid issues that can occur when trying to use fixed width layouts on multiple screens.
This is the new Multiscreen Preview dialog. Note that there’s not much here because I used the default Fluid Grid default layout. Some of the improvements are: Being able to view three different screen sizes using HTML5 and CSS3 code in real time and all at the same time. You can also test the behavior of HTML5 and CSS3.
JQuery Mobile Themes
In this version of Dreamweaver an important change with jQuery is with the use of themes, which were not available in the previous version. To see theming in action, go to File: New. In the New Document dialog box, choose Page from Sample, Mobile Starters and in the third column, there’s been a change. In the Dreamweaver CS5 there was an option concerning PhoneGap. That’s been removed and replaced with JQuery Mobile with Theme (local).
When you click on Create, it will build a layout that looks much the same as Dreamweaver CS5, but it offers one important difference, which are the jQuery Mobile Swatches. In the screen shot above, you see the code with the Mobile Swatches active and the color blue applied to the layout. There’s a lot more than this, which includes getting more themes and applying icons to elements in your designs.
Integrated Support for PhoneGap
With the PhoneGap Build service you can use your HTML, CSS and JavaScript to create mobile apps for Android, iOS, Blackberry, WebOS and Symbian platforms. PhoneGap takes care of all the configuration issues for you.
Updated Live View
In this version of Live View, Adobe provides you with more accurate renderings of HTML5 and CSS3. You can test real time rendering, view HTML5 video content and other forms of rich media. All of this is supported by WebKit.
Business Catalyst Authoring
Business Catalyst is fully integrated into Dreamweaver CS6.Business Catalyst contains: Content management, shopping carts, module based site features, reporting metrics, customer data and email marketing. It’s offered as a free 30 day trial. To get yours, click on Site: New Business Catalyst Site. When you activate this option, a site will be built for you using a template, which you can then modify as necessary. After the 30 days, you’ll have the option to upgrade to a paid site. Once you do so, you’ll be able to configure payment gateways to process store transactions online.
CSS3 Transitions Panel
With this feature you’re able to create animation effects and color fades between CSS states without writing code. An example of how this works is if you have a design where you have a photo with a lot of information underneath. You can use CSS transitions so in the browser, only the photo is visible but when you hover the mouse over it, an animation will take place which opens up the lower panel to reveal more information. This can be set for all the elements on the page. And contrary to what you might think, no JavaScript is involved. You can test out the effects of the transitions using Live View. According to Adobe, this code is supported by current browsers and mobile devices.
In the next series of articles we’re going to look at some of these features in more depth and show you how Dreamweaver CS6 can help you get the most out of your layouts. Starting with Fluid Grid Layouts in Adobe Dreamweaver CS6.
