Skip navigation
Currently Being Moderated

Apply Fluid Layout to existing site?

Jun 30, 2012 1:06 AM

Has anyone been able to apply the CS6 Fluid Layout to existing Dreamweaver site pages? I have about 1000 pages, all template-based that I wojld love to convert to Fluid Layout if there is a reasonably efficient way to do it. Any info or a link to a tutorial on this would be appreciated. I am going crosseyed right now from all of the searching!

 
Replies
  • Currently Being Moderated
    Jun 30, 2012 4:39 AM   in reply to newwoodworker

    How many different templates have you used for this 1000-page site?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2012 5:05 AM   in reply to newwoodworker

    When you say "C6 Fluid Layout" are you referring to the Fluid Grid layout method in C6?  If so, then I think you would just have to create a new page using that Fluid grid, migrate your design elements into that new page, and then save that new page as your base template.  In other words, I don't think there's an easy way to adapt a currently built page to conform to the grid without just recreating the page within the grid.

     

    DISCLAIMER - I have not used the Fluid Grid feature *at all*, but I am familiar with its operation/method.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2012 9:25 AM   in reply to newwoodworker

    I don't have CS6, so I don't know what the Fluid Grid Layout is that Murray's talking about. But if what you are trying to do is to create pages that fill the browser window, that's easy.

     

    And I think you don't have to alter your template(s) -- it can be done in your style sheet.

     

    Almost all web pages have an outer "wrapper" that everything else (save the body) lives in. So, for a fixed-width website, you do the following:

     

    #wrapper {

                   margin: 0 auto; /* this centers your main content in the web page */

                   width: 980px; /* This is the maximum width of your website in pixel units. */

    }

     

    For a fluid width, you do the following:

     

    #wrapper {

         margin: 0 auto; /* this centers your main content in the web page */

         width: 100%; /* this sets the width to the viewport */

    }

     

    Now, one thing I do like to do is specify a minimum width, which I do in the body:

     

    body {

              min-width: 760px;

    }

     

    I also like the CSS Tricks example, which specifies minimums and maximums, giving you "fluidity" up to a point.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2012 11:45 AM   in reply to newwoodworker

    Before you tackle Fluid Grid Layouts, get familiar with CSS Media Queries.

    http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt3.html

     

    Fluid Grid Layouts in CS6 are a nice, time saving feature. But they're not perfect.  You're going to see code like this which will cause  browser rounding problems if you don't tweak it manually.

     


    margin-left: 3.4482%;

    width: 31.0344%;

     

    Be patient.  Sometimes it takes repeated efforts to get the right layouts for Phone, Tablet and Desktop. 

     

    Finally, use Fluid Grid.css for Layout  only.  Don't style these divisions. Style your content instead.

     

     

    Good luck,

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2012 12:13 PM   in reply to newwoodworker

    Ctrl+A = Select All

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2012 3:10 PM   in reply to newwoodworker

    No shooting allowed!  

    Actually if you use Ctrl+A in code view, it highlights EVERYTHING in the code. 

    In design view, it typically highlights all content in whichever division or cell your cursor is in at the time.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 1, 2012 9:21 AM   in reply to newwoodworker

    Ctrl-A should not leave the images behind.  According to my tests, when in a <div>, Ctrl-A will select EVERYTHING in the div exclusive of the <div></div>.  Unfortunately, when in a table cell, Ctrl-A will select everything in the cell INCLUDING the <td></td> tags.  Is this what you are seeing?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points