logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor