How to use Dreamweaver’s CS6 Fluid Grid Layouts

The Fluid Grid Layout option is available under the File menu. It is also available in the New Document Window. To use Fluid Grid Layouts in Dreamweaver CS6 do the following:

1. Go to File -> New-> New Document Window, then select the Fluid Grid Layout. From here you can edit the number of columns for a grid for each of the target sizes, you select the percent of the column width used in each margin between columns. You select the version of HTML by using the DocType drop-down , and you can also determine the browsers window total percentage that will be filed by the layout.

2. Click create and you will be prompted to save a CSS file that has the initial styles for the page. Simultaneously, a boilerplate CSS style sheet a Javascript file will be saved .

3.You can switch from one layout to the another from the bottom of the workspace, using the three small icons that represent the Mobile size design, Tablet size design , or Desktop size design.

4. If you want to change the display size of a target device simply click on the Window Size arrow located bottom of the workspace, and then select a preset screen size. You can edit the Window sizes from the Window Sizes category in the Preferences dialog.

5.You can insert images and add to your pages, you should add div tags using Insert Fluid Grid Layout Di, from Layout Insert Panel.

6.you can resize the Fluid Grid Layout divs while adding them by clicking and dragging the corners of a div. They will snap automatically to the closest grid line.

7.If you want to create multiple columns, just click on the small arrow located at the right of a re sized div.