The Best New Features of Dreamweaver CS6

FYC-Dreamweaver

Much has been written about the updates to key applications like Photoshop and Illustrator in Adobe’s Creative Suite 6, which shipped in May. But Dreamweaver hasn’t been discussed nearly as much, and that’s partly because designers and web developers alike have derided it and other WYSIWYG editors since they appeared on the scene in the mid-90s — generally for good reason.

While WYSIWYG is still a big part of Dreamweaver, more and more designers and front-end developers are using it as an IDE for the web of sorts, allowing them to work with the code and see a preview of the design in real time, and make use of some shortcut features from time to time that you just don’t get in a text editor. Let’s take a look at the best new features in Dreamweaver CS6, and you can decide for yourself whether it is worth reconsidering your favorite text editor.

Fluid Grid Layout

Fluid Grid Layout gives you the ability to develop a site that is flexible and displays consistently across different browsers, and even different screen sizes. The fluid layout is supposed to be adaptive. The thing that Adobe boasts is that you can design the site visually and they take care of the rest. Adobe continues with Live View, where you can preview your site in a live environment, but of course you can go into code view and work from there. Adobe is aiming this technology towards people who may be designers, but aren’t necessarily coders. The source code is generated in HTML5 and CSS3.

This is excellent, because now you can design how your site will look on a monitor, design the layout for an ipad, and then design a vertical layout for a mobile device, such as a cell phone, and preview how they will look while you are working. You  have control over the grid and the number of columns for structuring  your work exactly how you want it.

To create a Fluid Grid Layout, go to File> New Fluid Grid Layout. A new dialog box will come up, asking your preferences for a mobile, tablet and desktop layout.

Screen shot 2012-07-01 at 4.05.35 PM

Dreamweaver will ask you to specify the percentage of space that your content will take up in the browser. You can specify different percentages for each platform. Under Mobile, it will ask you what you want the gutter width to be. This is the space between each column, and is based on a percentage of the width of the column itself. Another great feature is that Dreamweaver asks you to specify how many columns you want to use in the layout for each platform. I left mobile and tablet the same, but I changed Desktop to 16. Specify the Doctype as HYML5 and then you can specify the CSS file that you would like to have attached.

Screen shot 2012-07-01 at 4.18.29 PM

The shot above is similar to what you should see. My stylesheet is has a blue background specified, but yours will most likely be white. The first view that showed up is the mobile view, but you can toggle between views by clicking one of the icons circled above. This is where you can specify the layout for each platform.

The interface is meant to be created visually. If you are comfortable with code, you can always switch to code view. To start building your layout, make sure you are inside of the main container div and click Insert> Layout Object> Fluid Grid Layout Div Tag. Remember to try and use semantic tags when marking up your site, such as header, article, aside, etc. If you aren’t familiar with these tags, you can find them online.

Screen shot 2012-07-01 at 4.40.44 PM

CSS3 Transitions

Adobe has integrated CSS3 transitions into its arsenal, giving designers the ability to create cutting edge CSS3 transitions to their websites via the CSS Transitions Panel. Here you can select which element you want to apply a transition to.

Simply go to the CSS Transitions Panel and the the “+” symbol to add a transition. A dialog Box will come up, giving you several options to enable you to create your transitions.

Screen shot 2012-07-01 at 7.56.20 PM

The first thing it will ask you is what rule you want to apply the transition to, and it will give you a list of all of your divs and classes via the dropdown menu.

Screen shot 2012-07-01 at 8.03.59 PM

The next option will ask which state that you would like to apply the transition to. This includes active states, hover, target and more.

Screen shot 2012-07-01 at 8.04.17 PM

Duration determines the duration of the transition, meaning how long it takes, delay determines the amount of time before the transition starts, and timing function determines how the transition behaves. For example, ease-in will make it slowly come in.

Screen shot 2012-07-01 at 8.04.52 PM

Property determines what style you would like to change during the transition, and end value determines what the final outcome will be.

Screen shot 2012-07-01 at 8.05.28 PM

When you are done, simply tell Dreamweaver which stylesheet to put the transition into.

Adobe Business Catalyst Integration

Adobe Business Catalyst is Adobe’s way of created a website in a modular fashion. They create a template for you to use, and only leave certain parts editable. You can create anything from a simple html website, to a full-blown e-commerce solution. If you are a member of Adobe’s Creative Cloud service, one of the perks of this is that you are allotted hosting for up to 5 websites. You can Create your site using either Dreamweaver, or Adobe Muse, and you can publish it using Business Catalyst.

In Dreamweaver CS6, they have integrated Business Catalyst and given it its own panel. Here you can view your files, integrate modules, such as e-commerce solutions, menus, web forms, and even social media.

jQuery Mobile Support

Adobe upgraded their support for jQuery Mobile, which means that you can build better mobile applications for iOS and Android. They have upgraded and overhauled this feature for a better and more streamlined workflow. You can them your jQuery mobile applications much easier now, and you can decide what theme or skin to use at any time, and you can also integrate your own custom skins. You can also change elements like icons and button styles in seconds with the built-in interface.

PhoneGap Support

Development for iOS and Android updated so that you can build better native applications quicker and easier. They have integrated emulators in order for you to preview your work. Now you can package your work up and export it for different native devices, such as Blackberry, Android, and iOS.

To Get to PhoneGap to start working, go to Site> PhoneGap Build Service. It is going to ask you for your login, so if you don’t have one, you will have to follow the steps to make one. It will ask you to login with Github or your Adobe email and password. It will ask you to name your app, and you have different options. For mine, I pointed to an index.html file, which the interface asked for me to point to via a file browser.

Phone Gap

Once You are logged in, you can get to work Via the PhoneGap Panel. You can that the popular platforms are available, especially iOS and Android.

Better Live Preview

Dreamweaver’s Live Preview has been updated this time around to support the latest webkit technology, so that you have better HTML5 support. I have to say that I really like Live Preview this time around. Many times in the previous versions, I had loading problems, errors, and sometimes it caused a lot of lag. I used MAMP as a testing server because it performed better. In CS6, Live Preview behaves how it should. I still test in multiple live browsers, but this is really handy just to check right inside of Dreamweaver.

This is the Actual Live Preview in Action

This is the Actual Live Preview in Action

HTML5 Support for Multiscreen Preview

You can now preview how your HTML5 content will be seen on multiple devices before you publish. This is great because you can test your work for consistency before ever sending the site live. This way, you don’t have to set up intricate testing sites to debug your work, because you can do that all inside of Dreamweaver CS6’s interface.

Multiscreen Preview

This interface is really handy, considering you can control media queries and dedicate different media queries to different stylesheets. This is great because it gives you the capabilities to work how you want to. If you have a particular workflow in your development, you can implement it exactly how you like.

Media Queries

You also have control over Viewport sizes here, which lets you dial in the sizes of screens that you are building for.

Viewport Sizes

Conclusion

Dreamweaver has made a few vital upgrades to Dreamweaver CS6 to make it easier to develop mobile sites and applications. It has added a lot of functionality to help designers and developers with their workfow, making them more productive. Now, you can build apps for multiple platforms, from iOS to Blackberry, and make sure that they are consistent and functional.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote