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">
<!--#include virtual="Includes/Header.html" -->
</header>
<nav>
<!--#include virtual="Includes/Menu.html" -->
</nav>
<div id="mainContent">
<h1>Main Content H1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing odio.</p>
<!--end mainContent --> </div>
<div id="footer">
<!--#include virtual="Includes/Footer.html" -->
<!--end 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>
<!--end menu -->
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.

Similar Messages

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

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

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

  • CS6 Image enlargement in fluid grid design

    Trying to find a method of allowing image enlargement in cs6 fluid design.  Currently reworking a site into a fluid layout which uses css to enlarge an image on hover. This neat method works in virtually all browsers and on Iphones.  Not sure how to impliment this in a fluid grid layout as the style sheets seem to conflict and prevent the effect.
    Any ideas?
    Here's a working example from the original site: 18th Century Map of Kent by Thomas Kitchin
    Many thanks.

    It cannot be used in fluid design. In fact, it was quite poor at handling images in fixed pages especially in touch screens as these do not have a hover event.
    Reason why the product has been discontinued as can be seen here https://www.magictoolbox.com/magicmagnify/
    You are better off using lightbox or similar like Fancybox - Fancy jQuery lightbox alternative

  • Fluid grid designs

    I am attempting to build a fluid grid site, however, after the initial page creation the option on the "insert" tab for "fluid div" (shown in all fluid grid videos & tutorials) doesn't show up.  Instead only "div" or "draw absolute position div" are there.  If I click on the "div" I get an insert div dialog box showing "class".  Whatever I attempt, I do not get the familiar green fluid div boxes to work with.  Now the boxes are blue outlined and don"t allow me to layout the page.  I have created fluid grid pages before in Dreamweaver in the past year but didn't have this problem.  Where am I going wrong???

    Go to View > Visual Aids or simply click the Eye icon on your toolbar. 
    Check Fluid Grid Layout Guides.
    Also refer to this article -- Creative Cloud  CS6 12.2 Enhancements to Fluid Grid Layouts
    http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
    Nancy O.

  • Fluid grid design no longer resizes right for tablets.

    Everything seemd to be working great, but I tweaked something and it no longer displays two columns when you turn your smart phone sideways.
    Any help??  Please
    pestfree.net/bindex.html

    Also you should correct any critical coding errors
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pestfree.net%2Fbindex.html&charset=%28d etect+automatically%29&doctype=Inline&group=0

  • Fluid Grid Design Examples Anyone?

    I'v been searching for examples to see what everyone else is up to. Here is mine. http://www.chclcu.com/djzo
    Feedback welcome.

    This examples are so good
    http://www.openline.com.co/
    http://www.magconsultorias.com/
    http://och8-71.com/
    greetings,
    Jorge Forero
    dweb3d.com

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

  • Dreamweaver CC fluid grid controls disappearing and other info

    Hi All,
    I have finally completed my first commercial fluid grid design in Dreamweaver CC and it was a bit of a mission.
    One disconcerting thing about the program is that the fluid grid controls keep disappearing. You know, the ones where you can hide the div, duplicate it, move it up or down, or delete it.
    I have found that when this happens, I need to close the html file I am working on in DW CC and then open it again. The controls then appear again, so you can rearrange your various layouts as demonstrated in those breezy demo videos about DW CC fluid grid layouts.
    So don't just conclude you have broken the code when these controls disappear, try closing and opening the file again first.
    Also you need to insert all the divs you need for all layouts in the mobile phone layout, as that is the main layout, governing all the others because of the way the media queries are set up in the CSS file that is created when you start your fluid grid layout.
    I could not work out how to reorder divs in the different layouts, this may not be possible at the moment. Instead I created divs in the phone layout to cover all of the divs needed in the three layout sizes and switched them off and on in the various layouts. This works really well, but I found that DW behaved strangely if I switched a div off in the mobile layout and then tried to style it in one of the other layouts. So I suggest styling all of the divs first for all the layouts before switching any of them off in the mobile layout.
    Also you can't copy the contents of one div and put them in another without freaking the program out, especially if you are working in a div that is hidden in the mobile layout.
    I suggest saving regularly as you add new divs and style them and view live in a browser immediately, as the preview in DW CC is not reliable. It can't show rounded div corners or shadows for example.
    Keep an eye on the code as it is built by your use of the CSS Properties panel. If it starts going wrong, close the html file without saving it or the attached CSS file. Then go back in and try what you want to do again.
    If you save weird code errors, your work could be so compromised that you need to start all over again. So quit out without saving if you notice this.
    After much experimentation I now insert images into a div, rather than make them a background image, as the background image will not completely show if the content of the div is not long enough. This may require a rethink of your design.
    Doing any absolute sizes in a div will make the responsive design very hard to style and possibly break the code, so I don't suggest it.
    Adding padding to a div can make it stick out of right edge of the design, I am not sure why this is the case and could not work out how to stop it. So use low pixel numbers in the padding of a div.
    Also control z seems to be a sudden death move, so I stopped doing that.
    So my first job has been a bit of a ride, but I seem to be nearly there on my first design.
    I think DW CC is still a work in progress and I look forward to further updates of the software.

    Hi Top Ten,
    You can't get them back once they go. You now need to edit the css code manually to do the same thing.
    For instance if you want divs to sit beside each other you put this in the css for that div:
    clear: none;
    This css means that div will allow other divs to sit beside it.
    Then put in a width in percentages. For example if you have three divs that need to sit beside each other put:
    width: 33%;
    in each of them. Or maybe:
    width: 31%;
    margin-right: 2%;
    Fortunately in DWCC it is now robust enough for you to do those code changes by hand. My original question in this thread was posed when DW CC fluid grid had just come out and crashed easily. A year later all is well, so you can do those changes in the css code without problems now.
    Regards,
    Mary

  • Making photo galleries fit screen sizes in fluid grid layout

    Is it possible to have photo gallery images fit within the width of a device (such as smart phone) when a fluid grid design is being used?

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

  • Making images and text scalable in fluid grid

    So I'm creating my first Fluid Grid design and I'm having issues with making images scalable and look appropriate. Take a look at this example and the four social media icons on the top right. They're in one div id called sociaLinks. I have in my style_fg.css that the img attribute is set to 3em but that doesn't make the image scale as you resize the browser. I tried doing something like 25% (actually, a little less and I used that figure since there's four images in the div) and that worked in Firefox but in Chrome and Safari, it just appeared as what might as well have been a dot. So how can I make it where the multiple images can scale with the browser?
    Likewise, I have a similar issue with making text do the same thing. In this case, my #access div which I'd like the font to resize with the browser. Any ideas on making that work?

    You can make images scaleable using CSS3 like this:
    div
    background-image:url('mypicture.png');
    background-repeat:no-repeat;
    background-size:cover;
    You can also use vendor specific code to make this code compliant in browsers that don't have css3 yet:
    /* Safari,Chrome */
    -webkit-background-size: cover;
    /* Seamonkey */
    -moz-background-size: cover;
    /* Opera */
    -o-background-size: cover;
    Hope this helps.

  • Sliding background banner in fluid grid layout

    Hello all...
    Hope someone can help me. Kind of new to programming and dream weavers fluid grids. But I've started working on a website and encounted a problem.
    How do you implement a sliding background banner in the fluid grid design?
    PS: My design looks like this and I plan to use a javascript slider for the banner (don't mind the danish language) :

    the logo, menu, headlines and slider navigation is placed on top of the slider.
    This is going to fail for several reasons.
    #1 FGLayouts resize as do the foreground images inside them.  However, menus & headlines don't resize.  They stay the same size regardless of viewport unless you invoke your own special CSS media queries to change them.
    #2 Background images don't re-size to layout. 
    #3 To have a slider appear behind your logo, menu and headines, you'll need to layer elements with absolute positioning.  And as we all know from multiple discussions on this forum, absolute positioning doesn't work well in Responsive layouts because eventually everything becomes a jumbled mess.
    The best advice, keep your slider separate from your site menu and headlines.  You'll have fewer problems that way.
    Nancy O.

  • Fluid Grid and IE7/8?

    I'm using Dreamweaver CC with a one page fluid grid design (www.stratum-group.ca/index_fix.html). It checks out everywhere except with a client who is getting some weird behaviour. In trying to replicate the effect, it seems like the problem is either an IE 7 browser (using IE developer toolbar in IE8 with document mode set to "IE7 standards" seems to replicate the situation), but she says she's running 8.
    Every other platform I'm testing in, right down to mobile and various flavours of Firefox, Chrome and Safari, seems to come through okay.
    Does anyone have any other suggestions?
    TIA

    Reach Puneet may have a good solution for you here. I'm not sure what he is talking about concerning the HTML5 shiv bug but you to have to put http: in front of anything that is a link to an external source (outside of your website).
    But with respect to that, you have created ids for each of the people in that page. It's messy, but should work. None of those ids use HTML5 elements, so the use of the shiv in those cases won't matter.
    The other thing I see here is in lines 2-5 you have:
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
    I'm not sure what the heck these conditional statements are and what they do. These classes do not exist in any of your called style sheets. They also preceed ALL calls to your style sheets, so they cannot possibly correct anything in your style sheets that involve Microsoft browsers. Last but not least, please understand that Internet Exploder 10 does not understand these escapes, so Microsoft has shut down these kinds of conditional structures for their latest browser.
    In any case, these lines seem do do nothing, save set an HTML class that does not exist in your style sheets. Now, there may be people here who can enlighten me as to what these classes mean, but I did not know that any version lower than Internet Exploiter 9 can correctly render any CSS3 or HTML5.
    What it looks like you are doing is placing each of the team bios horizontally. I think that, for versions of Internet Exploder 9 and below, I would make a separate style sheet using the Old School method of lining everyone up, which is to create three vertical columns with the teams inside those, placing this conditional IE-specific line after you call your other style sheets:
    <!--[if lte IE 9]><link href="_css/ie.css" rel="stylesheet" type="text/css"><![endif]-->
    Then create a simple 3-column layout inside a container in that style sheet using the same elements as you have in your main style sheet.
    Frankly, with all of those id elements for each person in your style sheet, you have created a bit of a mess. I would have made styles that are more generic and would have used classes, not ids. But in the ie.css you could clear all previous styles set (using the cascade) by defining them thusly:
    #team-DavidP {
    (and so on)
    If you have a class or id that has no css associated with it, it simply becomes a div with no style and will be displayed in the style of its containing element.

Maybe you are looking for

  • What's wrong with the "guided tours"?  They won't work on my computer OR my ipad??

    What's wrong with Apple's "guided tours"?  They won't work on my computer OR my ipad???

  • Adobe photoshop cs6

    am having deficaulties installing adobe photoshop cs6 and how can i get the serial number

  • IMessage video chat failure

    I recently installed OS X Mountain Lion on my MacBook and got the new iMessages application with it. It's nice, but every time I video chat with someone who doesn't have mountain lion it disconnects saying it hasn't received data in 10 seconds. Last

  • Query button on Tabular form?

    The standard buttons are Cancel/Delete/Submit/Add Row. If I want a form to be used for queries as well, how can it be done? ie similar to the Query function on a Form on a Table with Report where you can query the rows you want, and then do updates.

  • Pleeeaaaase help!

    The computer I had before is broken, and I want to copy new songs into my iPod from another computer. But then iTunes asks if I want to replace the songs and playlists I have on my iPod with the ones that are on the new computer, and i don't want to