Fluid Grid Templates

Hey all,
I'm looking to rebuild my company's current website and I'd like to use Fluid Grid Layouts to make it more appealing to my customers. My concern is that I've noticed their doesn't seem to be a way to be able to use this feature with the Templates feature.
I very much like the templates feature as I'd like knowing I can make a change to the content of the website and have it cascade across every other page (such as changing the navigation menu, adding a new image or link that I want to show up on every page, etc..) very quickly rather than having to go to each individual page one by one making the changes.
My question is: Is there a way to make these two items work or is there a better, newer way of doing this now in which I can still make use of the Fluid Grid Feature?

This sounds a bit "off" to me, I don't use DWCS6, but you should be able to turn any page made with DW into a site template.
Do you have a Defined Site set up?
What happens when you open a new fluid grid page, add a few of the basics then choose File > Save as Template?

Similar Messages

Fluid grid template - editable region - resize not possible

Hi,
After quitting DW the first resizing problem was gone.
Now I saved the page as a template and inserted an editable region.
Then it wasn't possible anymore to recize the divs.
The lines are know yellow dotted.
Do I have to make editable regions in a different way?
See: http://www.ifacilityservices.nl/index.html
Thanks again.
Carla

Hi Nancy,
Thanks voor your reply!
Is it now not possible anymore?
I deleted the editable regions, but it stays with the yellow lines.
Carla
Van: Nancy O. [email protected]
Verzonden: zaterdag 24 augustus 2013 21:59
Aan: Carla Leliveld
Onderwerp: fluid grid template - editable region - resize not possible
Re: fluid grid template - editable region - resize not possible
created by Nancy O. <http://forums.adobe.com/people/Nancy+O.> in Dreamweaver CC - View the full discussion <http://forums.adobe.com/message/5623512#5623512

How to make regions editable in fluid grid template in 2014.1.1 in LIVE view - can't open the template editable selection panel

I am teaching a course in Dreamweaver 2014.1.1
We are setting up templates in fluid grids.
We need to make regions editable.
The LIVE view replaced the DESIGN view and does not have certain options accessible anymore.
I can't find the command to access the dropdown panel to make a region editable.
The Template tab at top, and the make editable options subtab, will not come open in fluid grid template mode.
Does anyone have a way to do this?

I was under the impression that the February update (2014.1.1) released a few days ago had fixed these problems. I urge you to file an official bug report below.
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
My advice for now is to stay away from Fluid Grid Layouts. But if that's not an option, I'll show you a trick for getting Design View back. Open the Fluid Grid CSS file and add an X as shown below. This tricks DW into thinking it's a normal layout.
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:      X 4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
=====================================
Once saved, you should see Design View as an option.
Nancy O.

Creating fluid grid templates

I have a very large website for a real estate company that I sold as a RWD. They have 175 or so pages of listings.
I have a good handle on DW's fluid grid design tools. When a try to create a DIV inside an editable region the DIV loses it's fluent grid functionality like copy, hide, sizing etc.
Has anyone worked with templates and DW's fluid grid. Is there a way around this problem. Any help or suggestions would be appreciated.
Thanks

I set up a really simple site to demonstrate the issue.
This is an Editable Region with a fluid grid DIV inside the region. The highlighted DIV is a regular DIV.
This next screen shot is a fluid grid DIV outside of the Editable Region. It is performing as it should.
It would make our lives much simpler if we could use the Fluid Grid DIVs in a template for the 175 redundant pages of this site.

How do I upgrade a fluid grid template created in CS6 to CC?

Do I need to recreate the template from scratch to take advantage of the CC improvements? Is there a tool for simply upgrading it?
Thanks

The following FGLayout was built by me in CS6. It performs as expected in IE10.
http://alt-web.com/FluidGrid/Fluid1.html
If your FGLayout isn't rendering right in IE10, I can 100% guarantee you that it's caused by web designer error or bad coding practices. And CC won't help you with either of these things.
Nancy O.

How can I use the entire screen width while using fluid grids?

Starting to play around with fluid grids in CS6. If you start with the fluid grid template, in the desktop layout (for example), the gridContainer is 88.5% wide. It appears you should do everything within the gridContainer div. With that being said, If I want to create different visual effects on my page that use a true 100% of the width, how do I do that and stay within this design structure/methodology?
This seems pretty basic but I don't want to start off by breaking the rules or hacking in a work around
Thanks in advance.
Donna

While starting with the FG Design you can set the widths to 100% in the New Document Dialog
If you have already into the design of your page , you can modify the gridcontainer classes in your css as below
.gridContainer {
          margin-left: auto;
          margin-right: auto;
width: 100%;
          padding-left: 0%;
          padding-right: 0%;
          clear: none;
          float: none;

Fluid grid website is showing up as two-columns even on very large monitors in IE10

In Firefox and Chrome, the website looks and functions just fine. However, viewing on the same large monitors in Internet Explorer, the webpages are broken up into two columns. To see what I mean, the site is www.PixelHallPress.com

Yes, I use code view and I put the tags you suggested exactly where you had suggested. No, I am not a coder, but I'm pretty good at following directions. Yes, I've been known to make mistakes. Most of the time it's because I know a little code, but not enough to keep myself from getting into trouble (or help get out of it).
The thing is that this website has been behaving just fine for about a year. It works fine in other browsers. IE is the only problem. I tried applying the template from two earlier versions that I know worked previously, and they too are having the display problem in IE
I'm no longer getting that error code, by the way. However, when I place <body> then </body> tags I get an error message that I have an unbalanced body tag. I wonder if the fluid grid template creates its own version of a body tag.
One variable: The host has migrated the site to a new server. Could this have introduced some errors?
I appreciate your advice. Thanks, Sally

Fluid Grid wont work in IE11? Firefox and Chrome is fine. Any ideas?

Need help on this one.
I'm new to fluid grid, and I should say a bit of an amateur at Dreamweaver, but I get by.
I can create fluid grid pages without any problems. Although it will not work with IE11. Chrome and Firefox works fine.
I'm also having the same issue with the Dreamweaver Fluid Grid Templates. I'm confident in saying, I'm doing everything correctly.
Has anyone come across this issue?

By "not working" what isn't working exactly?
Display? Media Queries? Layout?
Are you using IE in Compatibility Mode which is essentially like viewing in IE7? Try turning off Compatibility Mode to see if things improve.
Nancy O.

Templates in Fluid Grid Designs

I have been searching until my eyes are bleeding trying to find out if you can use templates with fluid grid layouts. No one seems to be able to answer this as far as I can see. And Adobe is their usual useless self on this matter with no information that is easy to find on the subject. I have sites up that require similar looks to many pages, thus the need for templates. Without this ability, Fluid Grid Designs in Dreamweaver are a joke unless you only one or two pages in your site.
Again, CAN DREAMWEAVER FLUID GRID DESIGN SUPPORT THE USE OF TEMPLATES???????

DW Templates are nothing like SSIs.
SSI's are server-side code statements (either in PHP or ASP files) that pull content from one file into the parent page. That's why they are ideal for re-usable bits of code like site wide headers, footers and menus. Everything on the parent page is fully editable in DW.
Include files are nothing more than snippets of html code. An include statement is inserted into the parent page where you want the content to appear. For this demo, I have three pre-built SSI files in my Includes folder:
    Header.html
    Menu.html
    Footer.html
My parent page has been saved as index.shtml (.shtml or .shtm tells the server there are include statements in the page). Depending on your type of web server, you may also use .php or .asp however those include statements look different than the ones in this demo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header">

</header>
<nav>

</nav>
<div id="mainContent">
<h1>Main Content H1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing odio.</p>
 </div>
<div id="footer">

 </div>
</body>
</html>
My include file for Menu.html looks like this -- no body tags, no doc type, just the relevant menu code:
<a class="intro" href="index.shtml">home</a>
<a class="gallery" href="gallery.shtml">gallery</a>
<a class="tools" href="tools.shtml">tools</a>
<a class="portfolio" href="portfolio.shtml">portfolio</a>
<a class="fees" href="Fees.shtml">fees</a>
<a class="contact" href="contact.shtml">contact</a>

One last thing, you won't see includes appear on the page until you publish to a server. If you want to test pages locally, you will need to install a local testing server such as WAMP, MAMP or XAMPP on your local computer.
Nancy O.

Starter Templates for fluid grid layouts.

Hello, I am watching the video (Learn Dw CC video by David Powers.) In the video and in the version of Dw CC he is using there are 6 templates for a fluid grid layout but I see none in my version of Dreamweaver CC and I have the latest version? Maybe the ones I see in David Powers version are ones that he has purchased separately? Anyone know?
For anyone reading this that is interested in Fluid Grid Layouts I would definitely consider purchasing the video as he does a first class job of teaching you.
Thanks, Imelda.

To open a starter page, go to File > New > Blank page > HTML > select a layout from 3rd panel . Hit Create. AFAIK, there are no pre-built templates for FluidGrid Layouts. You simply use the FGLayouts tool to build your own custom layout for mobile, tablet and desktop devices.
Nancy O.

Problems trying to develop a template using Fluid Grid Design

Having serious problems trying to get a template to work using Fluid Grid Design with Dreamweaver CS6
I have develop my template with editable regions etc, however when I load it to make an html5 page and preview it on any browser it comes completely blank
If I do this on an HTML5 document without Fluid Grid it comes out fine.
I heard this issue is happening to other people as well
Need to resolve this issue as soon as possible
Your help will be highly appreciated
Mike Riego

Before you create a template, you need to a) properly define a local site folder in DW. And b) test your prototype (Fluid Grid page) to ensure the code is valid and it works in all target browsers/devices.
When you're completely happy with your prototype page, SaveAs a DW Template and close it.
DW will create a Templates folder in your local site folder for you.
1. File > New > Page from Template > select your newly created template from the 3rd panel. Hit Create.
2. This is a child page spawned from a Template.dwt.
SaveAs index.html.
Preview in browsers. It should work just fine.
Repeat Steps 1-2 for remaining site pages.
Nancy O.

Can I control column color in fluid grid layout?

The columns in fluid grid layout are gray in CC; they used to be pink. I highly prefer pink, as I almost never design with that color, and I frequently design with gray.
Is there a way to set a preference for grid column color in CC?
Thanks.

NO NO NO NO NO!
Never make your navigation editable or you will shoot
yourself in the foot
when it comes time to change a link there and you would have
to touch every
page. <sheesh>
Give each of those links a unique ID, e.g.,
<a href="page1.html" id="link1">Page 1</a> |
<a href="page2.html"
id="link2">Page 2</a>....
Then in the head of each child page, add this to the Editable
Region called
"head" -
<style type="text/css">
a#link2 { color:whatever; otherstuff:whatever; }
</style>
Now you would just edit the embedded stylesheet to change
a#link2 to a#link3
or whichever button you wanted to affect on that page.
Alternatively, you can go here -
http://www.divahtml.com and get
their
DivaGPS extension.
DO NOT MAKE YOUR NAVIGATION EDITABLE.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"malcster2" <[email protected]> wrote in
message
news:ga5dev$e89$[email protected]..
> make those links editable regions on the template, and
apply the
> neccessary styles in the individual html pages

More insight on divs with fluid grids please!

Help me come further up the CS6 fluid grid learning curve, please!
I'm adapting an exiting site to fluid grids. After creating the template for the primary pages, I have two major issues at this point(yeah, only two, SO FAR).
1- I have a vertically expanding menu in the first layout div. For tablets, I want to preserve the left grid column space for the menu, regardless of its length, and all other content would use just the right gid columns. But when the menu happens to be short, the "excess" content floats left under the menu grid columns. How can I force main page content to only occupy the right grid columns, regardless of the length of the menu?
As a side point to the menu, what happens when I try to put this (or the footer) all back in an SSI, as it originally was?
2 - I've seen the note about no support for nested layout divs. Thru trial and error, I'm still trying to figure out just what this means. Pragmatically, what is the greater implication of this? Can format be controlled only on fluid grid layout divs? Can't I have divs inside of a grid layout div to control image palcement around the text for instance? I've had hit=n-miss experience with this so far.
Can anybody point me to a more in-depth discussion on this topic?
Sorry if this ol' dog seems like he's learning div layout all over again. But hey! That IS how it feels!
Thanks for any education, or pointers to such, that you can provide.

Not sure I completely understand what you want. But in this example, I have set nav and LayoutDivs 5, 6, 7 to display:none in smaller devices.
http://alt-web.com/FluidGrid/Fluid2.html
I did this inside a media query within my Content.css file:
/* Special Rules for Mobiles. */
@media only screen and (max-width: 480px) {
   /**hide some divs**/
     nav, #LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }
     /**show jQuery buttons**/
     #togglenav { display: block }
     #showDivs { display: block }
Then I used a simple jQuery toggle to show/hide divs.
http://jsfiddle.net/NancyO/AP9Hm/
Nancy O.

Why does DW CC 2014.1 Fluid Grid load HTML file that contains Google Analytics Tracking Code script so slowly?

I exclusively work in Fluid Grid since my site is a Responsive Web Design. I'm having trouble with slow load time in DW CC 2014.1, when my file, as they all do of course, has the Google Analytics Tracking Code script.
I'm on a Windows 8.1 using a Dell Precision M3800 Laptop with Memory 16GB (2x8GB) 1600MHz DDR3 . Each of our site's 180 or so web pages, of course, has its Google Analytics Tracking Code script. It is placed, following Google instructions, as the last entry in the <head>. Google Analytics does not instruct to place the script in the JS Folder with an scr to it, but rather in the <head>. It takes up to one and a half or two minutes for DW CC 2014.1 to load the Google Analytics Tracking Code script . That is, the grid does not show in Live View until finally analytics.js shows up in the Document Toolbar. A minute or two can add up when every page you load takes this long. And, making new Fluid Grid pages, as is done, through the Save As command; every new page made you have to deal with the minute or two wait time since all those pages have the Google Analytics Tracking Code script. Therefore, this time component alone, assuming I'm accessing and/or making 20 pages per week (and in our business this is easily the case) the math is that I'm wasting between 17 and 35 hours per year just with DW CC 2014.1 loading the much needed Google Analytics Tracking Code script.
I have loaded HTML files that do not have the Google Analytics Tracking Code script as a test and those files load at the normal quick speed.
Therefore, the new Chromium Embedded Framework browser engine has a serious load problem when it confronts an HTML5 file with a Google Analytics Tracking Code script. Oddly, the prior DW CC 2014 version, with the old browser engine did not have this slow-load problem since I was loading these same files in that DW CC version up until October 8th or so.
I think this new browser engine is a Google platform that apparently has a problem rendering or loading a Google Analytics Tracking Code script. That makes no sense.
Anyone else had this particular slow-load problem with DW CC 2014.1?
Thanks.

Wow. That sure solved the slow-load problem, at least using your suggested snippet in a simple test HTML file.
Per Google's instructions, I pasted the snippet before the closing </head> tag. And, even in that positioning in the file; the file loaded at the speed (about one second) that it did prior to DW 2014.1.
Two questions.
Will this snippet provide the same tracking data as my current GA snippet?
Because my current GA snippet is in about 200 web pages, can I retain the old snippet in most of them and place the new snippet in my approximately 5 main web pages as well as my templates so my new pages, as well as my main pages, have the new snippet. That is, can I have both snippets (i.e. old snippet in earlier pages and new snippet in main pages and new pages to be made going forward) in my website at the same time?
Of course I would not have both the old and new snippet in a web page at the same time.
I greatly appreciate any assistance anyone can provide me on this issue and thank all of you in advance.
I've provided code for both simple test files below.
Code for Asynchronous Syntax of GA script:
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Asynchronous GA Tracking Code In Head</title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="/css/style.css" rel="stylesheet" type="text/css">


<script src="js/respond.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-73425000-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
    <div id="test1" class="fluid ">This is the content for Layout Div Tag "test1"</div>
   <div id="test2" class="fluid ">This is the content for Layout Div Tag "test2"</div>
</div>
</body>
</html>
Code for older GA script snippet:
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test GA Tracking Code In Head</title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="/css/style.css" rel="stylesheet" type="text/css">


<script src="js/respond.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73425000-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
    <div id="test1" class="fluid ">This is the content for Layout Div Tag "test1"</div>
   <div id="test2" class="fluid ">This is the content for Layout Div Tag "test2"</div>
</div>
</body>
</html>

Fluid grid layout guides and elements are suddenly gone

I’m working in Dreamweaver CC and trying to build a fluid grid layout from scratch. Everything works fine for a while then I notice that suddenly all the grid guides are gone, the icon (next to the “Live” button) that allows me to toggle the fluid grid guides on and off is gone, and when I try to insert a new div tag…(within the "gridContainer clearfix" tag), the dialog box that opens does not have the option to “insert as fluid element.” Even when I click within a div in my page, the usual options that surround the div are gone as well. It’s as if Dreamweaver doesn’t recognize the page as a fluid grid layout, but when I preview the html, it is still responsive and looks like it is supposed to.
Does anyone know what could’ve changed that might cause this?
I even called Adobe and the tech support guy told me they are not trained in CSS and could not help me. I would think Adobe would be familiar with CSS… right?
If anyone has any suggestions that would be great?

Sudarshan Thiagarajan
The only template files I changed were the main css that I specify when creating a new FG layout.
I changed this for all three devices within the "style.css" page:
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%; (this is is what I changed on the mobile, tablet and desktop settings)
padding-left: 0.95%;
padding-right: 0.95%;
clear: none;
float: none;
margin-left: auto;
This the dialog box I get when trying to insert a new div (it used to ask me to insert "As a fluid element"

Fluid Grid Templates

Similar Messages

Maybe you are looking for