Using Fluid Grid Layouts - Dreamweaver CS6

• Dreamweaver CS6

Designing for multiple screens can be a difficult and time-consuming task. The new Fluid Grid feature in Dreamweaver CS6 gives designers a visual way to control page layout for multiple screen sizes. It also automatically integrates cross-browser consistency through the use of HTML5 boilerplate and the respond.js library.

Create a New Fluid Grid Layout

To create a new fluid layout, go to File > New Fluid Grid Layout or go to File > Create New > Fluid Grid Layout:

1. Customize the grid template you wish to use for each device: mobile, tablet and desktop.
   • Change number of available columns
   • Change targeted width of the site
   • Change spacing between columns (for mobile devices only)
2. After configuring the templates, click Create. A prompt will appear for you you to save the CSS you are creating.
3. Select an appropriate location and click Save.
4. Dreamweaver will prompt you to copy dependent files:
   • boilerplate.css is a set of default stylesheets to start from.
   • respond.min.js which is a small (or minified) version of respond.js, a javascript library that improves media queries on older devices.
5. Click Copy to copy the files and continue.

How to Add Layout Divs

From the bottom panel of the Design screen, you can toggle between layouts for different devices. To add divs to a layout:

1. Click the Insert Fluid Grid Layout Div Tag button.
2. When prompted, name the div tag.
   • Select Start New Row only if you wish to separate content by means of block levels which span across all columns, such as with a header. Not creating a new row would be ideal for creating multiple content rows such as for articles or artwork.
3. Go to File > Save All to save CSS.

Once layout divs are in place, you can add content. Content code can be copied and pasted using Code View, placing the code between the appropriate tags.

Managing Divs

When you click on a div, you can adjust it using any of the following actions:

• Move divs by clicking, dragging and dropping in desired location
• Resize divs by dragging the right side handle to the preferred width
• Size the margins beside columns by dragging the left side handle to the preferred width
• Move your div pane up a row by clicking the arrow in the upper right corner of the selected div
• Align a div with the div grid by clicking the button in the upper left corner of the selected div

To preview your work in an active browser, click the Preview in Browser  (blue globe) icon.

What's New in Dreamweaver CS6

• Inserting HTML5 Video Content
• Using Fluid Grid Layouts
• Selecting Multiple Classes
• Improved FTP Performance
• Enhanced jQuery Mobile Support
• Using the CSS Transitions Panel

Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.