Dreamweaver fluid layouts

If I have a website done in Dreamweaver (done for computer screens) and I want to use fluid layouts to make this for devices and pads, do I have to start from scratch to create a new site, or can I bring my files in from my existing site?

If you're using the Fluid Grid tool, starting over and designing using the "mobile first" approach would be the way to do it. FG's are built with the idea that the global attributes are for a mobile device, then the media queries overwrite them for tablets and then desktops. Starting with the desktop design and working backwards would be pretty frustrating.
That being said, depending on how you set the site up html-wise, it may not be very difficult at all to add your own Media Queries (not using the FGL tools) to it to change styling for smaller devices.
Could you share a link to your site in progress?

Similar Messages

In Dreamweaver 6, I created a new fluid layout. I set up (4) DIVs. In the 3rd div, I changed the font color. The new color shows up on the website when viewed in my computer desktop, but, when viewed in a tablet and a cell phone, the color of the font doe

In Dreamweaver 6, I created a new fluid layout. I set up (4) DIVs. In the 3rd div, I changed the font color. The new color shows up on the website when viewed in my computer desktop, but, when viewed in a tablet and a cell phone, the color of the font does not change. It's the same in Dreamweaver's Live view. It shows the new color on Desktop view and not in the cell phone or tablet view. Also, I changed the font itself in one of the DIVs and it shows up in the new font on the desktop view and website viewed thru the computer, but, not on the tablet or cell phone. Can someone please explain. I want to be able to change the fonts and colors for viewing in the tablet and cell phone, also. The fonts were all standard fonts. Sans-erif and Verdana and Arial were tried. Thanks.

I will lock this discussion because of duplicate post.

Responsive scaling of Edge Animate composition in Dreamweaver Fluid Grid Layout

I have created an animation in Edge Animate and have placed it in the header of a Dreamweaver Fluid Grid Layout. I have put it in a div by itself so it can be turned off in the mobile layout. When I test the layout in a browser, the Edge Animate composition scales responsively to the window size, but the height of the div it is in does not. The width of the div changes with the width of the window, but the height of the div remains the same. Because the height of the div doesn't change, as the animation responds and resizes it leaves a large empty space between the bottom of the animation and the content that follows it on the page.
The div itself does not have a rule for it's height associated with it. It seems to me that the div is getting its height from the original size of the html object which is the animation. I tried removing the height rule for the object, but then the div clips the bottom of the animation, and again, it doesn't resize with the window.
Is there a way I can get the div's height to resize with the size of the animation as it changes?

Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

How to get fluid layout for Dreamweaver CS5?

CS 5 is not have Fluid Layoout,how to get fluid layout for Dreamweaver CS5?

For Responsive Web Designs (RWD), you can do it manually with CSS Media Queries. David wrote a detailed tutorial below.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Or you can jump start your RWD projects with one of these popular Frameworks.
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 CC understanding external style sheets when using Fluid layouts?

I'm attempting to build a website using the Dreamweaver CC Fluid layout feature. I've been using this tutorial:
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
The bit i'm stuck at is when it comes to attaching a external style sheet to format the text and content. So to be clear, i've already created my fluid layout and created a 'layout.css' file when promted, then using some html 5 class div tags (header, navigation and article) i've built my layout. All doing what I want up to this point.
Now I need to start adding content and from what I understand its much better practice to set up another external style sheet for the text formatting and styling.
I used the CSS Designer to 'create a new CSS file', called it 'typography.css' and I can see its linked to the main Source Code file.
I understand that theory but here is where its confusing for me:
After creating and linking the new CSS file what do I do next? Do I have to hand code in various text formatting ids or is there a more visual way of doing it? Or do I select my text content in the source code page and then press the '+' button in the 'Selectors' panel to start adding ids that way? And should the class or id names in the new CSS file be the same as in the layout CSS file or different?
I guess I dont really understand excatly how external style sheets should be created and implemented, all the youtube vids i've watched so far are done with hand coding but i'd like to use the Properties panel to do it in a more visual way if possible.
Any tips or help greatly appreciated, some basic learning needed. Thanks.

Giving a detailed explanation of how to best use CSS goes beyond the scope of what this forum can do. There are volumes of books, blogs and tech sites devoted to this topic.
A Must Read -- How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
In a nutshell, make the most of your logical HTML tags. They not only add semantic structure to your content, they serve as hooks for your CSS styles. Don't class or ID something unless you absolutely need it. The goal here is to keep your HTML streamlined.
/**effects all h2 tags in your site**/
h2 {font-size: 125%}
/**only effects h2 tags inside headers**/
header h2 {color:orange}
/**effects all p tags**/
p {font-size: 100%}
/**only effects p tags inside articles**/
article p {color:#333}
Nancy O.

Dreamweaver Fluid Grid Layout

Hi everybody! Doesn't it feel like the Fall weather? I love it as I see the trees changing colors. I will miss Summer but will enjoy the Fall holidays.
This question goes back to one I asked a while ago but it is different. I decided to update to DW CC and I can't tell you how much I love it as
I have watched all of the tutorials and find it much easier than the previous version.
One thing I decided to do was to use the Dreamweaver Fluid Grid layout. I totally understand how it works for the most part. When I go to DW CC and the load up screen, I Select fluid grid layouts and then I am presented with a smartphone version, a tablet version, and a desktop version. I left the defaults as they seem to be updated and correct. This is the thing, I design my mockups in PS. I guess I am baffled on how to code that offer to DW. When I always created a fixed layout, I would easily just measure out the divs in PS and then create them in DW sizing everything to perfectly match my initial mockup.
Now that I am using a fluid layout. I am presented with columns. Again, I left them as the default. My question is, I am designing in PS, I am designing for a specific resolution of 1024x768. But I am just confused on if I need to decrease columns or add columns to fit that, or if I even need to at all. For my specific resolution, should I change the desktop columns to somehow correspond to a 1024x768 resolution? The default is 12 columns. In Photoshop, is there a way to insert a fluid like grid to help me with my mockup?
Sorry if this is a lot, but I would appreciate any help, thank you so much!

Hi Nancy! I hope you have been well. Thanks so much for taking the time to post screen shots.
I thought I just needed to create a mockup in PS with a 1024x768 resolution, and slice images. With the fluid layout, I inserted for example, my header image or banner at the top and I inserted it in the desktop view, it looked normal. It was sliced in a 1024 x 768 mockup. But, when I go to tablet and smartphone, it shrinks and it looks distorted almost. Is there something I am doing wrong?
You stated that I needed to create 3 mockups in PS based on those sizes. Does that mean I would have to slice them all and place them in their proper sized sections smart phone, tablet, and desktop?
Here is a video I watched. It seems like this guy used the same image and it looks just fine in all sizes. Create fluid, responsive web pages in Dreamweaver | Learn Dreamweaver CC | Adobe TV

Apply Fluid Layout to existing site?

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!

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.

Could not find Dreamweaver Fluid Grid style sheet

I have error in Adobe Dreamweaver CS6 which is part of the Creative Suite 6 Master Collection.
Error was when I trying to use "rubber" <div> layout: "Could not find Dreamweaver Fluid Grid style sheet". When I clicked on the button in the sidebar, in the new document.

Ask in the DW forum.
Mylenium

"Could not find Dreamweaver Fluid Grid style sheet error" in Dreamweaver CS6

I have error in Adobe Dreamweaver CS6 which is part of the Creative Suite 6 Master Collection.
Error was when I trying to use "rubber" <div> layout: "Could not find Dreamweaver Fluid Grid style sheet". When I clicked on the button in the sidebar, in the new document.

#1 Go to File > New FluidGrid Layout > select 3rd item > Hit Create button. See screenshots.
#2 DW will prompt you for a file name and location for your new FluidGrid.css file. Give your style sheet a name without spaces or special characters eg. MyFluidGrid.css. Save.
#3 From the SourceCode tag, hit Ctrl+S to Save your HTML Page. DW will set the corrected path to your external files:
MyFluidGrid.css
boilerplate.css
respond.js
That's all there is to it.
Nancy O.

Full width preloader for fullscreen layout/fluid layout

Hi,
I'm new to this forum. I need help to figure out how to make the preloader works on the full screen website/ fluid layout. I add the Stage.resize on the code for FYI. When I added this code to the bar, it expanded to full screen, but there's no loading bar. The text is also no progress. Help please. Thanks

I really need help for this. FYI, I have:
Stage.align
stage.scaleMode
stage.addEventListener
to make the bar to fullscreen. Any idea why the bar is not working? Thanks

How to get text padding in CS6 fluid layout div?

After having set-up my fluid layout divs and entering some content, the text is all slammed against the left. Very unsightly! But my every attemtpt at chaning the CSS to insert some left padding breaks the overall layout by pushing divs down the page and ruining the column structure, presumably because these divs no longer fit (?). My overall layout does have a mix of columns for tablet and desktop, which degrade to a single column for the mobile.
Any help teaching an ol' dog a new trick would be much appreciated!

If you're using other HTML tags like <li> <address> <cite> <code> <blockquote> etc... you'll need to create padding styles for those, too. Usually the padding will not appear if you haven't enclosed text or images inside an appropriate tag.
Nancy O.

Fluid Layout - Background Image

Hello All,
First I'll explain what I did and what I'm hoping to see. I created a fluid grid layout. Below the fluid grid layout, added a div that extends 100% width that's not part of the fluid grid. So I inserted an image by going to the Commons tab and selected image, I was then able to browse for the image I wanted and then inserted it. once inserted I see it scales correctly on all 3 devices. Now I would like to add text over this image but I can not do that. I can only put text either above or below the inserted image. So I deleted the image, selected the div and inserted the image by going into my Properties panel and imported it as a background image. But as you guys may know, I had to set a specific height, for the image to be view and it doesn't even scale correctly on all device outputs. But that was the only way I could insert text over the image.
What am I doing wrong? All I want is to have a background that's scaleable on all viewports with the text on top of the image. Maybe there's a tutorial that can help me out with this.
HELP!
Thanks in advance.
P.S. Here's the simple code that I have.
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for mhvkhhadditional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>
</div>
<div>This is the content for Layout Div Tag</div>

You really must use a Background in the CSS. You cannot position image & overlay elements in Responsive Web Designs. It simply won't work well.
Resizable Full Page Background Image
I prefer to use CSS Gradients or solid background colors which is much less bandwidth for mobile data plans to absorb.
Ultimate CSS Gradient Generator - ColorZilla.com
Nancy O.

Fluid layout problem

I have decided to rebuild my site from a fixed with layout to fluid/responsive. So far, I've set up a test page with a fluid layout, but it's not working as expected. See http://www.perberntsen.com/responsive_test.html
The relevant css is in the page.
When I make the browser window smaller, the columns will resize, but the rightmost column will drop down much too early, leaving lots of white space. (It does continue to resize, although out of sight.) I am planning to use media queries, but I dont't think they should be neccessary to achieve what I'm trying to do.
Things I've tried:
Removing min-width on the menu (didn't help)
Removing the header (didn't help)
Using position:relative (didn't help)
I've also read Ethan Marcotte's book on the subject as well as various articles on the internet.
Would be very grateful if someone could point me in the right direction ...
Edit: I also tried disabling external css and javascript, both of which didn't help. I am pretty sure the answer lies in the css.

No knowledge of responsive, but narrowing the min width to 150 looked pretty good in FF
#nav {
    background-color: #F4F4F4;    border: 1px dotted #505050;
    float: left;
    margin-top: 0;
    min-width: 150px;
    width: 15.3333%;

Fluid layout

Hi,
I am trying to build a site with fluid layout. I have three
classes: Preloader, Main and Background.
Preloader loads main.swf and has resize function where it can
access Background like so:
Sprite(loader.content).getChildAt(0).y = stage.stageHeight -
Sprite(loader.content).getChildAt(0).height;
Main has an instance of Background.
Background draws vertical lines. It uses fluid layout on its
own. Works fine.
Here is the catch:
Background utilizes stage.stageWidth and stage.stageHeight,
when tested with separate fla works like charm. However, when
accessed thru Preloader throws this error: Error #1009: Cannot
access a property or method of a null object reference. I think it
is because use of stage but I don't know how to go about it.
It also uses its own resize function.
So, what is the best way to put it all together? Where should
I keep resize function? What I need to do with stage object in
Background?
Hopefully I explain more or less coherently what is the
problem.
Here is abbreviated code for all three classes:

I just used the publish settings myself don't know if it will
help you it worked for me on this site.
http://www.cybermountainwebservices.com/client0/date/
settings:
http://www.mespinach.com/fluid.gif

Fluid layout since the beginning

hello.
i have a website with a fluid layout. in the website i have only one element that is "fluid" (it's kind of a mediaplayer which is suppoused to be always in the center of the page).
i write some line of code...and it works...but only if i resize the page...i wish to have it in the center since the beginning.
here it's the code:
// LAYOUT CONTROL -----------------------------------------------------------------------
addEventListener (Event.ADDED_TO_STAGE, onAdded);
function onAdded ( e:Event ):void
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.addEventListener (Event.RESIZE, resizePage);
// resizePage ------------------------------------------------------
function resizePage ( e:Event = null ):void
    if ( stage )
bg.x = stage.stageWidth / 2 ;
bg.y = stage.stageHeight / 2 ;
media.x = stage.stageWidth / 2 ;
media.y = stage.stageHeight / 2 ;
resizePage ();

You could try it like so:
// LAYOUT CONTROL -----------------------------------------------------------------------
addEventListener (Event.ADDED_TO_STAGE, onAdded);
function onAdded ( e:Event ):void
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.addEventListener (Event.RESIZE, resizePage);
     resizePage ();
// resizePage ------------------------------------------------------
function resizePage ( e:Event = null ):void
    if ( stage )
bg.x = stage.stageWidth / 2 ;
bg.y = stage.stageHeight / 2 ;
media.x = stage.stageWidth / 2 ;
media.y = stage.stageHeight / 2 ;

Dreamweaver fluid layouts

Similar Messages

Maybe you are looking for