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.

Similar Messages

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.

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?

How Do You Spell Check in LIVE view using Fluid Grid

How Do You Spell Check in LIVE view using Fluid Grid???
When using LIVE view in Fluid grid... Spell Check is only available in Code view... which doesn't seem to work.
huh... it doesn't end!

At the moment, you don't. The Adobe team is aware of it.
Provide "Design View" for Fluid Grid Webpages
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.

Using fluid grid cs6 but changing content between screens?

hey guys ive just started looking into fluid grid with dreamweaver cs6 and its good but there doesnt seem to be alot of video on the net teaching alot about it.
The one thing I cant find info on is how to remove content from the mobile page because its too much but still have it showing in the and desktop view?
all the tutroials i find show how to get started and how css works between the 3 displays but alot of finished examples show content relocating on the page, changing or disappearing completely from one type of screen to the next such as in this Greg Rewis video http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
How can I control which elemnts show on one screen and not the other?
thanks
Dave

Below is a working example of what you want.
http://alt-web.com/FluidGrid/Fluid1.html
In my custom Content.css file, I have some divs set to display:none wrapped inside a mobile media query like this.
/* Special Rules for Mobiles */
@media only screen and (max-width: 481px) {
/**hide some divs**/
#LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }
Nancy O.

Overlapping images in fluid grid design

I'm designing my first website using the fluid grid design in DW CS6. My in-progress site is located at http://afbcc.com/sandbox/carolhudsondesigns.com/. When viewed on a desktop I want the circular company logo in the top left corner to lie on top of the sideshow of flowers. Previous I would have put the logo in an AP Div with a high z-index. How do I do this in fluid grid design? Thank you.

When viewed on a desktop I want the circular company logo in the top left corner to lie on top of the sideshow of flowers. Previous I would have put the logo in an AP Div with a high z-index.
Nothing's changed. Simply enclose it inside a CSS Media Query targetting desktops. Adjust rules to suit.
/* Special Rules for Desktops */
@media only screen and (min-width: 1024px) {
     #logo {
     position:absolute;
     top:75px;
     left:65px;
     z-index:1000;
Nancy O.

Making my header background image scaleable using fluid grid layout

I'm sorry I dont really know how to post a link to this site (its not online just on my laptop) But really all I have is a blank screen I just started trying to build this responsive site (the site I was building wasn't responsive so i had to start over so thats where I'm at. I started a new fluid grid layout in dreamweaver cc I use 24 collums at 100%. I deleted the the div (but not the grid container one) . First is that I'm trying to build a header using the fluid grid layout (my laptop screen is 1920 px wide so I use the full screen because I want my site to take up a users full screen). The issue is when I use a image thats 1920 px width for a header background it test great in the browers meaning it scales correct but when I check it out in the smartphone and tablet preview options within dreamweaver cc the image is chop off. How do I get the image and really the rest of the site to scale and resize correctly not just in full screen for my pc but for tablets smartphones and anyones computer? I'm baffled please help? I hope I'm being clear if not I'll try again I need your help thank you

Try to keep responses in the original thread, it keeps replies from getting confused.
http://forums.adobe.com/thread/1430668?tstart=0

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;

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 with margins and borders in a fluid grid layout

When I create a page using the built-in fluid brid layout option in Dreamweaver CC, I have problems adding margins and borders. to the elements I've added to the page.
Is there a method to prevent the above occurring?

Hi Ken
I'm sizing each element to specific grid sizes and, working in the "show fluid grid layout guides" view am aligning the second element alongside the first by click the "up" arrow. e.g.:
I'm using a 24 grid layout (mainly because I thought it would allow more flexibility when working on two or three column layouts)
I have the first element 10 grids wide (41.348% wide) and the second element 14 grids wide (56.9% wide)
I've populated the first element with text including an h2, h3 and p element
In the second element I've inserted an EasyRotator slideshow
The third element is below the first containing text . That is also 10 grids wide
The fourth element also contains text and is 9 grids wide and has margins of left = 8% and right = 7% so that it appears below the gallery and it has a border around it.
The problem occors when I try to place a border around the element containing the EasyRotator. When I do, it become too large and drops below the first element.
How can I control this problem?
Thanks in anticipation.
David
P.S. Can you recomment any tutorials that provide info on the above.
I'm subscribed to Lynda.com, have searched adobe TV and looked at all the tutorials that are provided through Dreamweaver CC Help.
Nowhere can I find the above subject covered.
I'd like to find a tutorial which also provides exercise files to work with if possible.

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.

How do I center an image inside a div tag using fluid grid layout?

where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.

This is what my css codes looks like where the image is in the div tag:
#logo_links {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.2033%;
    display: block;
This is the html code where the image is:
</div>
    <div id="logo_links">
      <div align="center">
        <p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
      </div>
    </div>
I'm going to need more detail where to insert the suggested code as I am a newby!
Thanks

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.

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.

Problems trying to develop a template using Fluid Grid Design

Similar Messages

Maybe you are looking for