How to edit fluid grid layout in Dreamweaver CS6

Hi all
I am a designer at the company I work for and we've been building repsonsive designs for the past 12months. I've decided that it would be good for me to try out the new fluid grid layout tool in Dreamweaver CS6 to see if we can improve the design process by using dreamweaver to allow us to quickly prototype my designs for mobile, tablet and desktop.
However I have 2 problems so far.
1) I've created my first fluid grid layout and saved all the files into a new folder. I set grid widths and gutter but now want to edit the values as I am not happy with the gutter. Can this be done? I can't seem to find the file that does this so can anyone point me in the right direction?
2) We have traditionally used pixels to define our grids. I normally produce a grid with a fixed pixel gutter, overall width and column size. It seems that Dreamweaver only has the option to use percentages. Can anyone tell me if this can be changed and again where I can do this?
Thanks for your  help
Trevor

In Code View, open your FluidGrid.css file (or whatever you named it) when you created the layout.
FluidGrid Layouts are not perfect and the interface could use a lot of improvement.  That said, I think they can be used as a starting point for simple layout projects providing you understand their limitations and are willing to manually tweak the FluidGrid.css code.   
If you've been doing Responsive Layouts for 12 months, you're probably building desktop to mobile whereas FluidGrids build from mobile to desktop.   It takes a little adjustment in thinking.
Keep FluidGrid.css for layout only.  Use a seperate stylesheet for your content styles. 
Nancy O.

Similar Messages

  • Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 | Digital Design CS6 | Adobe TV

    Adobe Evangelist Greg Rewis shows how to create adaptive designs using Fluid Grid Layouts in Dreamweaver CS6.
    http://adobe.ly/Iq7L8z

    maybe someone here can answer this. Can I take an existing website and apply the fluid grid layout feature to it? I have one regular website that is not responsive. I've tried copying and pasting into the dreamweaver grid layout, but it doesn't respond as expected. Is this even possible?

  • Using Fluid Grid layouts | Learn Dreamweaver CS6 | Adobe TV

    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.
    http://adobe.ly/IUFngo

    Although the whole fluid grid layout feature suffers from a terrible implementation, this video explains what is needed to understand, and warns very well for all the strange culprits in this feature.
    It takes time for most designers to get used to the idea of fluidity in a visual representation of information, and let structural building blocks flow according to alternating views and rules. Let's hope Adobe Edge Reflow helps us doing that in a better, faster way.

  • How to setup a default direction for new divs in fluid grid layout in dreamweaver?

    Hi,
    how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
    Thanks.

    This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
    The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
    A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

  • How to setup a default size for new divs in fluid grid layout in dreamweaver?

    Hi,
    how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
    This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

    Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
    Here is the specific page http://foundation.zurb.com/docs/components/grid.html
    The default values are
    Em-base : 16px
    Row width: 62.5em (62.5em x 16px = 1000px)
    Columns per row: 12
    These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
    In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

  • Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

    I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
    Any ideas?

    You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
    If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
    http://projectseven.com/products/menusystems/pmm3/index.htm
    If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
    Basic CSS Drop Menu
    http://jsfiddle.net/mD4zW/28/
    jQuery MeanMenu for mobile/tablet devices
    MeanThemes | MeanMenu
    This is a working example inside a FluidGrid Layout (resize viewport)
    Alt-Web :: Fluid Grid Test
    Nancy O.

  • Using Fluid Grid layouts | Digital Design CS6 | Adobe TV

    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.
    http://adobe.ly/SgbtoZ

    Is there any written help on this subject because the cost of downloading these videos is too great. If I view them all it will cost me £5 a month extra in bandwidth charges as a minimum just to view help videos. Far too expensive for a charitable trust.

  • How To Center Fluid Grid Layout Div Tag

    Hello I am remaking my webiste and am new to fluid grid layouts. I am trying to center the images you will see in my website into the middle.
    I can use pixels to center it but it will not be centered for all screen resolutions. What do I have to change in the css rule defintion to center it all out or simply move it to the side?
    WEBISTE: http://auto-republic.com
    CODE: http://pastebin.com/LujvaGek
    Thanks in advance!

    In HTML Code View, line 53 - 56, replace what you have now with this:
    <div class="gridContainer clearfix">
         <div id="LayoutDiv1">
         <p>LAYOUTDIV1 CONTENT GOES HERE<p>
         <!--END LAYOUTDIV1--></div>
         <div id="LayoutDiv2">
         <p>LAYOUTDIV2 CONTENT GOES HERE</p>
         <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wrecker','','images/wreckerservice/wreckerservice2.gif',1)"><img id="wrecker" src="images/wreckerservice/wreckerservice2.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/facebook/facebook2.gif',1)"><img id="facebook" src="http://auto-republic.com/images/facebook/facebook1.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('askaquestion','','images/askusaquestion/askaquestion2.gif',1)"><img id="askaquestion" src="http://auto-republic.com/images/askusaquestion/askaquestion1.gif"></a>
         <!--END LAYOUTDIV2</div>
    <!--END GRIDCONTAINER--></div>
    Nancy O.

  • How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

    Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.  

    While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
    CS6 Fluid Grid Layouts (6 min video)
    http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
    Instead of fixed-widths in pixels, FLG code is all % based.  It starts with the mobile layout and cascades to tablet, then desktop.  If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
    Nancy O.

  • Problems Creating a "Fluid Grid Layout" with Adobe Dreamweaver CS6

    I am trying to create a fluid grid layout in Dreamweaver CS6 (which I know how to do), the problem is Dreamweaver started automatically saving the boilerplate.css & respond.min.js in the Dreamweaver program folder (C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Fluid Grid Layout\) it does not ask me to save the boilerplate.css or the respond.min.js docs as it normally does. Dreamweaver CS6 also creates a css document instead of the html page it should create. I called Adobe support, however they offer no support for "Fluid Grid Layouts", and I cannot seem to find a solution to this problem anywhere on the internet. If anyone knows how to fix this so it will work properly again it will be greatly appreciated!

    Hi toger02,
    If you have restored the preferences correctly and the issue is still unresolved I would recommend checking the workflow again.
    Define a new site in Dreamweaver.
    File < New Fluid Grid Layout < Create. Doctype set to HTML5 and no CSS file attached.
    A dialog box will pop up, prompting you to save the CSS for this design. This is your custom style sheet. Give a "filename.css" < Click Save.
    Once you've done that, the layout for the mobile device appears in the design view as an "untitled" new document with related files listed as "boilerplate.css","respond.min.js" and "filename.css" i.e your custom CSS file.
    File < Save < "filename.html". < Save. On clicking Save it will show a popup with the message: Copy Dependent Files, which are boilerplate.css and respond.min.js.
    I hope this helps else let us know if issue is on all the new sites and fluid grid pages that you create?
    Thanks,
    Bhawna

  • Dreamweaver CS6 - New Feature - Fluid Grid Layouts

    For those interested in what is coming in CS6, John Nack just posted a video on his blog to see about Fluid Grid Layouts:
    http://blogs.adobe.com/jnack/2012/04/sneak-peek-of-fluid-grid-layouts-in-dreamweaver-cs6.h tml

    A bit more http://www.dwcourse.com/dreamweaver/dreamweaver-cs6-features.php
    Gramps

  • Is it possible to use HTML5 tags within fluid grid layouts?

    Hello,
    I want to build my future websites with fluid grid layouts and Dreamweaver CS6 but I don't find any help by searching the internet how I could use the HTML5 tags like "header" "nav" "footer" etc. within the fluid grid layouts automaticly. If I do anything manually it's more error-prone. Or is just the best way to stay with the "normal" div-tags???
    Thank you in advance, best regards ... Björn

    Those tags are equal to a normal DIV and can be used just the same, they are just not built into CS6.
    Mylenium

  • Fluid grid layouts do not work in IE 7/8

    Hello,
    I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
    IE 9 shows it right.
    When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
    Later I will upload some screenshots.
    All other browser work fine.
    Where is the problem here?

    When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
    Reason:  You added styles to your FluidGrid Desktop  but not  mobile & tablet. 
    In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
    I find it's much safer to use a separate style sheet for content.  When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
    CS6 Fluid Grid Layouts (6 min video)
    http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
    Nancy O.

  • Green highlight when working with Fluid Grid Layout Div tags

    What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
    Dreamweaver CS6
    Mac OSX 10.8.2
    THANK YOU!!

    Brian McNay wrote:
    the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
    If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
    To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
    It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
    Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS.

  • How to convert live website to fluid grid layout

    I have an existing live website. How do I convert it to a fluid grid layout?

    Who is Peter?
    Responsive Web Design
    http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
    http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
    If you want to support multiple languages, you'll need to build a mirror site with translations.
    Nancy O.

Maybe you are looking for

  • ABAP XSLT Extensions or XSLT (XI imported archive)?

    Hi all, I would like to know which is having better performance in a scenario with a significant number of messages. I know that ABAP XSLT Extensions is based in XSLT 1.0 and have some features of XSLT 2.0. So, for me it means some limitations and a

  • Reader XI: after opening a pdf I get black areas in the doc when scrolling down

    Hello, I have a problem with acrobat reader XI after a new installation of my hdd. After opening a pdf, I get black areas in the pdf when I scroll down. The black area disspear when scrolling up. What can I do? Win7 Prof 64bit Many thanks in advance

  • Missing Font - I've Tried Everything!

    PC - Windows XP Pro InDesign CS3 I've been working on some programs and ran into trouble today with some fonts showing up missing. I've read the Help files and message board but whatever information I'm finding, it's not working. In this case I'm usi

  • How can I edit a approved timecard as a timekeeper from timekeeper entry form

    Hi, I want to edit a timecard which is approved and transferred to Projects. I can use adjustment element like Overtime Adjustment, Double time adjustment elements. I did set preference - ''Self service Timecard Allow edits to Approval Initiated. I a

  • Allowing Bookmared Links to work

    <p>Alright I have users who like to book mark links. Most of these links prefill forms in certain ways to search. Then links only work as long as the user is still logged in, as soon as they logout and then reuse these shortcuts they get a login page