Printer Friendly Version

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.


Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.

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

BellaOnline Editor