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.

Similar Messages

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?

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 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 to edit fluid grid layout in Dreamweaver CS6

Hi all
I am a designer at the company I work for and we've been building repsonsive designs for the past 12months. I've decided that it would be good for me to try out the new fluid grid layout tool in Dreamweaver CS6 to see if we can improve the design process by using dreamweaver to allow us to quickly prototype my designs for mobile, tablet and desktop.
However I have 2 problems so far.
1) I've created my first fluid grid layout and saved all the files into a new folder. I set grid widths and gutter but now want to edit the values as I am not happy with the gutter. Can this be done? I can't seem to find the file that does this so can anyone point me in the right direction?
2) We have traditionally used pixels to define our grids. I normally produce a grid with a fixed pixel gutter, overall width and column size. It seems that Dreamweaver only has the option to use percentages. Can anyone tell me if this can be changed and again where I can do this?
Thanks for your help
Trevor

In Code View, open your FluidGrid.css file (or whatever you named it) when you created the layout.
FluidGrid Layouts are not perfect and the interface could use a lot of improvement. That said, I think they can be used as a starting point for simple layout projects providing you understand their limitations and are willing to manually tweak the FluidGrid.css code.
If you've been doing Responsive Layouts for 12 months, you're probably building desktop to mobile whereas FluidGrids build from mobile to desktop. It takes a little adjustment in thinking.
Keep FluidGrid.css for layout only. Use a seperate stylesheet for your content styles.
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 to setup a default direction for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
Thanks.

This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

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.

How to setup a default size for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
Here is the specific page http://foundation.zurb.com/docs/components/grid.html
The default values are
Em-base : 16px
Row width: 62.5em (62.5em x 16px = 1000px)
Columns per row: 12
These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

Optimizing images | Learn Dreamweaver CS6 | Adobe TV

In Dreamweaver CS6, Adobe has streamlined the integration between Photoshop and Dreamweaver. Learn how to take images directly from Photoshop to Dreamweaver. Then, see how to optimize the images and edit them in Photoshop using Adobe's round-trip editing feature.
http://adobe.ly/IUFnwT

warlock7,
I tested this out in Dreamweaver CS6, but in all cases the drag-and-drop was functioning properly.
If you create a new document using one of the included layouts (e.g. 3-column liquid) and insert an image in it, are you able to drag it around?

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

Designing with web fonts | Learn Dreamweaver CS6 | Adobe TV

Web fonts have become an important part of many web designers' workflows. Dreamweaver CS6 adds support for web fonts through the new Web Fonts Manager. See how to use the Web Fonts Manager to add, manage, and apply web fonts throughout your sites.
http://adobe.ly/IUFnwR

I've been wondering for ages why DW doesn't just show my web fonts in Design View, and now I'm none the wiser. Why doesn't Design View look at your fonts (not your system fonts, your folder fonts) and display them?
With Font Squirrel you don't even need to / or shouldn't even need to go through that rather bizarre "global" Web Fonts dialog. DW should just look at your fonts folder and work out it needs to display the fonts.
I'd give this first generation attempt 1/10.

Enhanced jQuery mobile support | Learn Dreamweaver CS6 | Adobe TV

Adobe continues to add support for jQuery Mobile in CS6 with the addition of new jQuery Mobile Sample Pages and the jQuery Mobile Swatch panel. The new jQuery Mobile Swatch panel allows you to quickly apply themes visually to your jQuery Mobile projects regardless of where the themes were created. The new Sample Pages feature improved architecture that makes it easy to swap out themes without affecting layout or functionality.
http://adobe.ly/IUFk4h

How do I get that toolbar that's used at 4:57 to grab a jQuery button? Can't for the life of me figure out where it is. I know how to insert the object from Insert > jQuery Mobile, but the toolbar'd be cool for a jQuery-based workspace.

Inserting HTML5 Video Content | Learn Dreamweaver CS6 | Adobe TV

In this video you'll find out how easy it is to insert video content into an HTML5-based web page in Adobe Dreamweaver CS6.
http://adobe.ly/L1gjUW

I can't get this player to work in the native mobile app template. I just get the endless ring of death when I build the site as a native android app. The file size is a small 8mb h.264 and is only one page with just one video. Can somebody help?

Using the CSS Transitions panel | Learn Dreamweaver CS6 | Adobe TV

In this movie, learn about the CSS Transitions panel, which makes it easy to add impressive CSS-driven transitions to any element on the page through a single dialog. All CSS syntax is handled automatically, including vendor prefixes for all major browsers. If you prefer to hand-code your CSS syntax, the CSS Transitions panel now gives you an easy way to manage and edit transitions, regardless of where they're added.
http://adobe.ly/Jo2HUM

Painful. WAY WAY WAY too much extranious detail, wastes a lot of time explaining the obvious. this could be 1/2 the length and far better by just going thru the details that REALLY matter, not the million options explanations side trips that confuse the basic info / workflow being presented.

Using Fluid Grid layouts | Learn Dreamweaver CS6 | Adobe TV

Similar Messages

Maybe you are looking for