g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Home Improvement
Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


New Fluid Grid Layout Dreamweaver CS6

If you develop simple websites or complex CMS, you always have this nagging question in your mind -- am I doing all I can to target all types of audiences and screen resolutions? Well, DreamweaverR CS6 has new features that make this an easier task.

In the past, one would need to create a different CSS file for each different screen resolution and use media query to assign the required CSS file. This was very time consuming and added to the overall cost of site development, which was bad news for both the developer and the client. Dreamweaver CS6 has taken much of the labor out of creating adaptive websites.

This new workflow process depends on the new Fluid Grid Layout which is somewhat like a starter template with default layouts and typography for each screen resolution for your website.

  1. Just click File - New Fluid Grid Layout from the Menubar.

  2. In the New Document dialog box, you will see the defaults for this new adaptive webpage. The width is fixed for each of the different screen resolutions.

    Mobile 480px
    Table 768px
    Desktop 1232px

  3. You have the option to change the default number of columns and the percent of column width for each screen resolution. The defaults are:

    Mobile 5 columns - 91%
    Tablet 8 columns - 93%
    Desktop 10 columns - 90%

  4. The default workspace can show the code and the design views. As you can see in the design view, the new file already has one div tag. You can change the default ID and Class for the div in the Properties panel.

    Of course, your webpage will need more than one div. So we can add more divs for the header, navigation, main, aside and footer.

  5. To add a new div, choose Insert Fluid Grid Layout Div Tag in the Insert panel.

  6. In the dialog box, you can name the ID for the tag.

  7. When we have added all the major divs for our page, we can click and drag them to reposition them within the grid.

It is suggested that we begin building the mobile version of our site and move up to the larger sizes. You can easily compare the visual results as you work by using the Resolution Switcher for Mobile, Tablet and Desktop resolutions.

When we save our layout, we get one HTML5 and CSS3 file that will work for all three screen resolutions. If we take a look inside these files, we can find information about how the files work to create our adaptive webpage.

*Adobe provided a copy of this software to me for review purposes.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.


Add New+Fluid+Grid+Layout+Dreamweaver+CS6 to Twitter Add New+Fluid+Grid+Layout+Dreamweaver+CS6 to Facebook Add New+Fluid+Grid+Layout+Dreamweaver+CS6 to MySpace Add New+Fluid+Grid+Layout+Dreamweaver+CS6 to Del.icio.us Digg New+Fluid+Grid+Layout+Dreamweaver+CS6 Add New+Fluid+Grid+Layout+Dreamweaver+CS6 to Yahoo My Web Add New+Fluid+Grid+Layout+Dreamweaver+CS6 to Google Bookmarks Add New+Fluid+Grid+Layout+Dreamweaver+CS6 to Stumbleupon Add New+Fluid+Grid+Layout+Dreamweaver+CS6 to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Animation Software Terms

Why Hype 3.5 and Pro

Tumult Hype and Pro Intro

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor