Dreamweaver cs6 and Fluid Grid Layouts!

New to Dreamweaver cs6 and Fluid Grid Layouts!
Could you please tell me if you can create several layout grid designs (in the same website) depending on the page layout you need for each
page?
The reason I am asking is my web site has different information on each page (which is laid out differently)
Maybe create layout.css and layout2.css and so on. AND TIE EACH PAGE IN WITH A PHP INCLUDE NAVIGATION PLACED ON EACH PAGE.
Is this possible.
Thanks, Mrs. White

Different layouts for different pages?  It's certainly possible, but I don't recommend it.  Ideally you want to work with ONE FluidGrid Layout throughout your site with some additional CSS rules for optional regions (classes & styles) that may not be required on all pages. Some examples of optional regions would be contact forms, tables, definition lists, re-usable floats, etc...
If your Responsive Design is well planned, you shouldn't need more than one main structure for mobile, one for tablet and one for desktops.  If you go down the path of having different structures for 3 devices AND each site page, you will soon be wrestling with a 10,000 lb. gorilla: Herculean to build and not much fun to maintain.
Server-side includes for site wide headers, footers & navigation are a very good idea whether your site is Responsive or not.  I use them all the time.
Nancy O.

Similar Messages

  • Dreamweaver CS5.5 Fluid Grid Layout Help!!!

    Needing help with What a fluid grid layout is, I hear that itll help my webpage be responsive and it will adjust for screen sizes depending on if your on a computer, phone or tablet. Can anyone link me to an Adobe TV tutorial for CS5.5? All I found was CC stuff and upgraded versions.

    Sorry but FluidGrids are not part of CS5 or CS5.5.  They didn't come on the scene until CS6 (12) & CC (13).
    If you're still interested in building responsive web sites without upgrading software, read this first:
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
    To jump start your responsive web project, you can use one of the freely available Responsive Frameworks below:  Some people feel these are actually better than FluidGrid Layouts.
    Foundation Zurb
    http://foundation.zurb.com/templates.php
    Skeleton Boilerplate
    http://www.getskeleton.com/
    Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
    http://www.initializr.com/
    DMX Zone's Bootstrap * free extension for DW *
    http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
    Nancy O.

  • Dreamweaver 12.0 - Fluid Grid Layout problem - I have 12 columns - but some DIV's are too wide

    http://skicmsc.org/NewResponsive.htm
    Working on a new look for a current site.  I have 16 columns. Left div is 3 columns, next is 7 columns, then 3 and 3. Total: 16
    The 7 column Div is pushing the right Div's off the layout by several "columns". If I delete the thing, everything is fine. Make it just 2 columns wide and the layout is messed up.  I've tried naming it different things, starting from scratch - twice. Still have the same problem. Deleted, recreated, moved up and down. Nested and not nested.  Next step is to say forget it.  Wasted four hours on this already.
    Screen grab of the layout - all looks nice and clean.
    Here's what it looks like (In Chrome, IE and Firefox.)
    What's really annoying - undo/Ctrl-Z does not undo "visual" changes.  I can edit text, resize a Div by dragging the right handle, do an Undo - and my text edit is changed - not the resize.
    Any suggestions?
    Thanks
    Rick Drew

    For best results, your LayoutDivs need to be wrapped inside the .gridContainer as it serves as the basic structure for your entire  layout (mobile, tablet and desktop).
    <div class="gridContainer clearfix">
         <div id="LayoutDiv1">
         </div>
         <div id="LayoutDiv2">
         </div>
         <div id="LayoutDiv3">
         </div>
         <div id="LayoutDiv4">
         </div>
    <!--end gridContainer--></div> 
    Design View Screenshot
    When you put Divs outside the .gridContainer, this can create rounding problems in many browsers because the inner div widths are all set in fractional percentages rather than whole numbers.  Browsers don't fully understand how to render widths in fractions.
    In the following example, I have the same set-up as shown in my screenshot above except my footer div is intentionally located outside the gridContainer.  This allows my footer to be 100% page width.
    http://alt-web.com/FluidGrid/Fluid1.html
    If you understand and work within the limitations of FluidGridLayouts, they can save you a lot of time.
    Nancy O.

  • 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.

  • Trouble styling across device views ( Mobile, Tablet, Desktop) in fluid grid layout.

    Hi pros,
    I’m having a problem in Dreamweaver CC laying out and styling my website using the fluid grid layout. For the record, I have not touched the boilerplate.css or JS file and have been using my own.css file to place all my .css in. I’ve managed to get some of the content in little by little but it looks nothing like my mock up. Since I’m new to Dreamweaver and coding in general, I’ve been starting my design in the desktop view. However, when I switch to tablet or mobile view and move something around, it completely moves it when I got back to the desktop view. Also, when I put in on live view or view it in a browser, I get two different looks all together.  I try to make sure that my .css file is selected and under media I tried selecting the predefined media sizes and then under selector, there is usually 3 of each tag (one for each view I’m guessing), I select the tag associated with that view and change the properties from there. That hasn’t worked because when I go to live view or view in the browser, it looks completely off or it will screw with the other views. L
    So here are my specific questions:
    How do I style my elements specifically in each view WITHOUT messing up the desktop, or the other views? Simply clicking on a view using the icons on  the bottom and styling has not worked.
    Why is my live view so different from my browser view? I’m using the presets given in Dreamweaver for the desktop. When I view, say the logo and navigation in live view, everything is aligned but when I switch to my browser (chrome) it’s all crooked.
    Should I be using % throughout all my properties (width, height, margin, padding, positioning)? Currently I have most of my div sized using % but some margins and other properties using px. Will that affect anything?
    Can someone recommend a good tutorial? Everything that I seen either covers the basics that I already know,( adding/moving divs, switch views) but when it comes to the .css styling, they are adding a style sheet from somewhere without showing you how to do it from scratch.
    Should I design the page in a non- fixed layout and then import the .css style sheet from there? If so, how do I do that without messing with the boilerplate.css file.
    I’m taking a course in graphic and web design and we went over this very quickly and was given a lot of the material, however our final project (a full website with 5 pages) must be responsive and built in Dreamweaver. Any advice is greatly appreciated!

    Making an external style sheet.
    Go to File > New > Blank page > CSS. 
    Hit create button.
    Add some style rules to your new style sheet and save it. 
    Link your HTML pages to your new style sheet using the directions below.
    Dreamweaver, Linking HTML to External Style Sheets
    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
    Nancy O.

  • Repositioning DIVs in a DW6 fluid grid layout

    I've followed James Williamson's video tutorial on fluid grid layouts http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/ and have created something similar.
    Williamson gives his DIVs fairly standard ID names. He starts with "header", ends with "footer" and places three DIVs in between:  "article", "interview" and "artwork" (around 6:20 in the video).
    The desktop layout is a standard three column layout with a header and footer while in the mobile layout all the divs stack up one on top of the other.
    In Williamson's tablet layout, he adjusts the width of the DIVs so two site below the header ("article" and "interview") and he makes the third ("artwork") span the full width (he shows the three layouts in a browser from 15.00  to 15.20 in the video).
    What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
    Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?

    eddieduggan wrote:
    What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
    Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?
    No. The way that Dreamweaver's Fluid Grid Layouts work is by floating all divs to the left. New rows are created by setting the clear property to left. As a result, you cannot have a div on the right that spans the height of multiple divs on the left.
    The divs must be displayed in rows in the same order as they appear in the underlying HTML. To get two divs on the left alongside a taller one on the right, you would need to wrap the left-hand divs in an outer div. The outer div can be snapped to the grid, but not the inner ones.
    As Nancy says, failing miserably with the Fluid Grid Layout feature is much easier than succeeding. It reminds me of Dreamweaver's earlier love affair with "layers" (absolutely positioned divs) -- well intentioned, but fatally flawed.

  • 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.

  • I'm designing my first website using Fluid Grid Layouts. CSS question

    I'm designing my first website using CS6 and Fluid Grid Layouts so I need a lot of help. I realize CS6 creates something called a boilerplate css file. However, in addition to that file, do I have to create an individual external style sheet for my desktop, ipad, and smart phone pages (3 separate style sheets) or should I have only one external style sheet for everything?
    Or this is there another recommended way to use Fluid Grid Layouts?

    FluidGrid Layouts creates a boilerplate.css file, a respond.js file & a Fluid.css file for you -- you name it whatever you like.  I like to call mine Fluid.css so I remember what it is. 
    Fluid.css contains mobile first -- upon which all others are based.  Inside, CSS Media queries, you'll find code for tablet and later on desktop.  So one stylesheet generated by DW covers all 3.
    TIPS: 
    FluidGrids are very temperamental.  Do not tamper with boilerplate.css or Fluid.css files.  Instead create a separate external style sheet for your typography & other custom content styles.
    Build mobile first, then tablet and finally desktop.
    Keep your designs simple and uncluttered. 
    Don't worry about content until you get the layout perfected.
    Have fun with it .  You'll probably have to start over a few times before you get what you want.
    Nancy O.

  • Cs6 fluid grid layout wide-screen resolution issue

    Hi all, I've done some poking around but have not found anything that answers this question - if I missed something please pass me the link!
    So I'm doing a new site in cs6 with fluid grid layouts. It's fine in terms of screen sizes, that is, small medium large, but different resolutions make the content appear differently. Specifically on desktop size screens with wide-screen resolutions (eg 1600X1200) the content is squeezed up towards the top of the page. The background image is fine on all resolutions - fills the screen - but the content on top changes according to the resolution. On my screen (1600X900) there's a nice distribution of content vertically. Is there any way to make it so that the content adjusts for resolution, not just size? Thanks in advance.

    What I'd like is for the widescreen view not to change the vertical distribution. That is, on my screen the content fills about 3/4 of the screen, which looks fine. On widescreen resolution, it barely covers 2/3 and it looks top-heavy - users I've asked with widescreen resolutions have said "it looks squished towards the top, why don't you move it down?". I guess I don't understand, if height as well as width is determined in percentage, why this happens (that lack of understanding could reveal my fundamental lack of understanding of aspect ratio/mathematics in general ).
    I suppose I could give a bigger margin at the top to move the content down the page in all cases, but on my screen, not widescreen, that's not ideal. And I'm hoping there's a way to adjust for widescreen without affecting all resolutions.

  • 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.

  • 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.

  • 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

  • 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.

  • Background images in fluid grid layouts Dreamweaver CS6

    How can I get a background image png or jpg original size 1040w by 840h to scale down in the tablet and mobile layouts in Dreamweaver CS6 fluid grid layout?

    Adding one of these in your CSS should do the trick...
    background-size:contain;
    or
    background-size:cover;
    Depending on the layout of your background image, one may work better than the other.

Maybe you are looking for