Silas Norbu Lepcha
15 April 2013


Prerequisite knowledge
Previous experience working with Dreamweaver is recommended.
Prior knowledge of building responsive layouts is helpful, but not required.
Required products
Dreamweaver (Download trial)

User level



The Dreamweaver CS6 update includes many new features to help you build responsive layouts faster and more efficiently. Using columns on a grid design surface, you can align and position page elements that adapt to fit a range of different screen sizes.
In this short article and accompanying video, you'll get an overview of the new capabilities. You'll see how the interface has been updated to include new functionality to let you achieve tasks with a single click. You'll also learn how the updated behavior lets you create HTML5-based pages that follow modern web standards and are easy to update.


Identifying improvements to the responsive layout workflow


You can create responsive layouts in the New Document dialog box by choosing File > New Fluid Grid Layout. Set the options in the New Document dialog box. Name and save the CSS file and the index page in the local root folder.
Insert div tag containers and then drag the right side to resize the width to fit within the column. Hover over each element to access the overhead menu to hide, duplicate, delete, and swap elements within the layout.
Note: Drag the left handles when you want to adjust the margin for the selected element.
As you work, enable Live View to review your progress in the workspace. Switch between Desktop, Tablet, and Phone layouts by choosing the desired screen size in the Resolution Switcher.
Take a moment to review the updated feature set you can use when building fluid, responsive layouts that adjust to display within a host of different screen dimensions.
Navigate nested elements
Press the left or right Arrow keys to jump between nested page elements. While an item is selected, use the transformation handles that appear to edit nested items in both Live view and Design view.
New element controls
Select any page element in the layout to access the overhead menu. With a click you can perform common layout tasks including hiding, duplicating, and deleting the element, directly within the design surface. The new menu only appears when needed, and helps you design layouts more intuitively within the workspace.
Support for element classes
In previous versions of Dreamweaver, the page elements you add are assigned unique IDs. Now you can add grouped page elements that use a single class selector, so that you can ensure design consistency. A single class that controls grouped elements also makes it easier to update layouts.
If desired, you can also insert elements without adding a specific fluid class. As a result of these changes, the source code output by Dreamweaver is shorter and less verbose.
Absolute positioning
Dreamweaver CS6 update includes new support for absolute positioning, so you can set elements to appear at a specific location in the browser window. Use the new overhead menu to enable the Absolute Position option while an element is selected. Insert AP items inside relatively positioned containers for more control over a layout's appearance.

Setting up structured HTML5 layout elements


New support for HTML5 structural elements let you quickly define page items without writing code. The Insert panel now includes options to insert standard page elements so that you can rapidly produce responsive layouts that display well on desktop monitors and the latest device screens. 
Using the Insert menu to add page elements
Access the Insert menu by choosing Window > Insert. Notice that the Layout category has been updated to include HTML5 items, including: Header, HGroup, Paragraph, Navigation, Aside, Article, Section, Footer, and Figure. In Design view, click the page in the location where you want to insert a page element, and then click the name of the item you want to add in the Insert menu.


Where to go from here


Watch the video below for a detailed tour of the new enhancements in Dreamweaver CS6 update that make the process of building responsive, fluid layouts easier and faster.
Click Play to watch an overview of the recent Fluid Grid Layout feature updates.
If you have any questions or comments, please post them on the Adobe Dreamweaver Team Blog.
Also check out these other helpful Dreamweaver CS6 videos on Adobe TV: