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.
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.
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.
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.
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.
The next option will ask which state that you would like to apply the transition to. This includes active states, hover, target and more.
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.
Property determines what style you would like to change during the transition, and end value determines what the final outcome will be.
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.
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.
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.
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.
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.
You also have control over Viewport sizes here, which lets you dial in the sizes of screens that you are building for.
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.