Using Fluid Grid layouts

Show:

Digital Design CS6

Products Covered:

Save

Translations

Was this episode helpful?

Yes No

About This Episode

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.

James Williamson

Produced By

lynda.com

Show More Details

More Episodes

Comments

Episode Title	Runtime	CC	Products Covered	My Library
Untappd at PhoneGap Day US 2012 Untappd at PhoneGap Day US 2012 Greg Avola does a presentation on the highly successful PhoneGap application Untappd at PhoneGap Day US 2012. Runtime: 00:13:12 Added: January 21, 2013 Views: 512	00:13:12
Introduction to PhoneGap - An Open Source Framewor... Introduction to PhoneGap - An Open Source Framework Get an intro to PhoneGap and PhoneGap Build. Learn how to create mobile apps using standardized web APIs for the platforms you care about. Runtime: 00:03:33 Added: January 21, 2013 Views: 973	00:03:33
Getting Started with Creating Mobile Apps and Webs... Getting Started with Creating Mobile Apps and Websites with Design and Web Premium CS6 Adobe Evangelist Paul Trani shows how to create apps and websites for multiple screens using Design & Web Premium CS6. Runtime: 00:05:23 Added: April 22, 2012 Views: 23,478	00:05:23
Introduction to Dreamweaver CS6 Introduction to Dreamweaver CS6 Adobe Evangelist Greg Rewis provides an overview of Dreamweaver CS6. Runtime: 00:02:04 Added: April 22, 2012 Views: 220,817	00:02:04
Understanding WYSIWYG HTML Editors Understanding WYSIWYG HTML Editors In this video you'll see how WYSIWYG editors handle the heavy lifting of building a web page by writing the HTML code for you as you're building the page visually. Runtime: 00:00:71 Added: May 06, 2012 Views: 85,619	00:00:71
The Welcome Screen The Welcome Screen From the Welcome screen you can create new content, open existing content, and much more. In this video you'll see why the Welcome screen is a great point of reference when working in Dreamweaver and a great place to learn about new features. Runtime: 00:00:55 Added: May 06, 2012 Views: 55,563	00:00:55
Workspace overview Workspace overview Workspaces allow you to quickly and easily shift focus from one task to another in Dreamweaver. In this movie, you'll discover how to take control of the interface. See how to take advantage of the default workspaces in Dreamweaver, or create and manage your own custom workspaces. Runtime: 00:10:21 Added: May 06, 2012 Views: 46,502	00:10:21
Optimizing images Optimizing images 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. Runtime: 00:11:07 Added: May 06, 2012 Views: 33,136	00:11:07
Inserting HTML5 Video Content Inserting HTML5 Video Content 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. Runtime: 00:00:74 Added: May 06, 2012 Views: 87,195	00:00:74
Fluid Grid Layout in Dreamweaver CS6 Fluid Grid Layout in Dreamweaver CS6 Create cross-platform and cross-browser-compatible web designs using the CSS3-based fluid grid layout system. Runtime: 00:01:18 Added: April 22, 2012 Views: 16,241	00:01:18
Creating Adaptive Designs Using Fluid Grid Layouts... Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 Adobe Evangelist Greg Rewis shows how to create adaptive designs using Fluid Grid Layouts in Dreamweaver CS6. Runtime: 00:06:27 Added: April 22, 2012 Views: 41,312	00:06:27
Using Fluid Grid layouts Using Fluid Grid layouts 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. Runtime: 00:17:06 Added: May 06, 2012 Views: 267,148	00:17:06
New CSS3 Support in Dreamweaver CS6 New CSS3 Support in Dreamweaver CS6 Adobe Evangelist Greg Rewis shows what's new with CSS3 support in Dreamweaver CS6. Runtime: 00:07:35 Added: April 22, 2012 Views: 15,519	00:07:35
Creating CSS Transitions in Dreamweaver CS6 Creating CSS Transitions in Dreamweaver CS6 Adobe Evangelist Greg Rewis shows how to create CSS transitions in Dreamweaver CS6. Runtime: 00:06:46 Added: April 22, 2012 Views: 22,564	00:06:46
Using the CSS Transitions panel Using the CSS Transitions panel 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. Runtime: 00:08:46 Added: May 06, 2012 Views: 118,873	00:08:46
Selecting multiple classes Selecting multiple classes Adobe continues to improve CSS management capabilities in CS6 through the addition of support for multiple classes. Learn how to apply multiple classes to elements at virtually any point through the CSS workflow in Dreamweaver. Runtime: 00:05:58 Added: May 06, 2012 Views: 15,173	00:05:58
Designing with web fonts Designing with web fonts 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. Runtime: 00:12:06 Added: May 06, 2012 Views: 31,881	00:12:06
Enhanced jQuery mobile support Enhanced jQuery mobile support 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. Runtime: 00:09:21 Added: May 06, 2012 Views: 95,423	00:09:21
Web Standards: Introduction and Overview Web Standards: Introduction and Overview Join Developer Evangelist Kevin Hoyt for this thorough series on web standards, starting with a clarification of the various HTML5 browser specifications and an overview of the emerging APIs covered in this series’ seven lessons. Runtime: 00:11:00 Added: April 02, 2012 Views: 8,094	00:11:00
Web Standards: CSS Transitions Web Standards: CSS Transitions Developer Evangelist Kevin Hoyt covers the visual magic of CSS Transitions by detailing how to create linear animation of content when style properties are changed. Runtime: 00:12:28 Added: April 30, 2012 Views: 2,834	00:12:28
Web Standards: CSS Transforms Web Standards: CSS Transforms Developer Evangelist Kevin Hoyt dives into advanced effects that you can change with CSS Transforms, adding more sophistication to your style toolkit. Runtime: 00:10:42 Added: April 23, 2012 Views: 2,605	00:10:42
Web Standards: CSS Animations Web Standards: CSS Animations Developer Evangelist Kevin Hoyt shows how a little style manipulation using CSS Animations goes a long way toward orchestrating complex movement of content. Runtime: 00:11:39 Added: April 30, 2012 Views: 4,032	00:11:39
Web Standards: Device Orientation Web Standards: Device Orientation Developer Evangelist Kevin Hoyt demonstrates the capabilities of device orientation and motion events, and how physical device interaction can be used to control content. Runtime: 00:11:43 Added: April 16, 2012 Views: 1,839	00:11:43
Introduction to Fireworks CS6 Introduction to Fireworks CS6 Evangelist Greg Rewis provides an overview of Fireworks CS6. Runtime: 00:02:06 Added: April 22, 2012 Views: 26,294	00:02:06
Quicker access to color Quicker access to color Discover the advantages of the new and improved Color panel, reviewing what's new with fill/stroke opacity, gradients, and cut and paste of information for Hex and RGB color. Runtime: 00:03:02 Added: May 08, 2012 Views: 3,057	00:03:02
Improved CSS suppport Improved CSS suppport Review the latest support features for CSS and CSS3 including CSS code extraction, Internet Explorer 10 support, CSS Sprites Export, and the ability to modify and export jQuery Mobile Themes. Runtime: 00:02:01 Added: May 08, 2012 Views: 12,292	00:02:01
Clean CSS Code Extraction From Designs and Web Pag... Clean CSS Code Extraction From Designs and Web Pages in Fireworks CS6 Save time and preserve your design's integrity by cleanly extracting CSS elements and values (such as color, font, gradient, and corner radius) using the new CSS Properties panel. Once you have the code, copy and paste it directly into Adobe Dreamweaver® CS6 software or other HTML editors. Runtime: 00:02:08 Added: April 22, 2012 Views: 12,533	00:02:08
CSS Sprites CSS Sprites Compare the advantages of exporting via CSS Sprites vs. conventional methods by creating a graphic with multiple states and reviewing the streamlined CSS Sprite code and image generated. Runtime: 00:00:40 Added: May 08, 2012 Views: 7,762	00:00:40
CSS3 support: extraction CSS3 support: extraction Explore the expanded support for CSS3 by creating a graphic and reviewing the powerful CSS Properties panel with the CCS rules you can copy, add comments to, and optimize for Firefox, Opera, Explorer, and Webkit. Runtime: 00:03:52 Added: May 08, 2012 Views: 7,152	00:03:52
Alpha support in Fill & Stroke Alpha support in Fill & Stroke Get an overview of Alpha support for fill and stroke revealing the time-savings and creative versatility this new feature offers. Runtime: 00:02:50 Added: May 08, 2012 Views: 4,864	00:02:50
Common library of mobile assets and components Common library of mobile assets and components Discover the handy and time-saving Common Library, a set of pre-created graphics and images that you can bring into your design, including iphone graphics, Windows Phone 7 graphics, Mac and Windows graphics and more. Runtime: 00:02:48 Added: May 08, 2012 Views: 4,837	00:02:48
Introduction to Flash Professional CS6 Introduction to Flash Professional CS6 Evangelist Paul Trani provides an overview of Flash Professional CS6. Runtime: 00:02:32 Added: April 22, 2012 Views: 34,498	00:02:32
Wide Platform and Device Support in Flash Professi... Wide Platform and Device Support in Flash Professional CS6 Reach Android™ and iOS devices by targeting the latest Adobe Flash Player and AIR runtimes. Runtime: 00:01:17 Added: April 22, 2012 Views: 3,344	00:01:17
The Flash Interface The Flash Interface The Flash Professional interface contains a variety of useful panels and other structures that allow you to work effectively within the program. This lesson provides an overview of the most important and useful elements of the application interface. Runtime: 00:00:41 Added: May 06, 2012 Views: 27,037	00:00:41
The Welcome Screen The Welcome Screen Like most Adobe Creative Suite applications, Flash Professional will present you with a Welcome screen when the application is initialized, giving you quick access to a number of common tasks. This lesson looks at the options available in the Welcome screen. Runtime: 00:00:51 Added: May 06, 2012 Views: 13,209	00:00:51
The Main Menu Bar The Main Menu Bar The main menu bar in Flash Professional is full of options and commands that can help you work effectively. This lesson takes a look at the main menu, focusing on commonly used functionality. Runtime: 00:00:94 Added: May 06, 2012 Views: 16,030	00:00:94
The Toolbar The Toolbar The Toolbar in Flash Professional gives you quick access to the essential tools in the application. This lesson will provide an overview of what these are and what they do. Runtime: 00:00:92 Added: May 06, 2012 Views: 9,220	00:00:92
The Stage and the Work Area The Stage and the Work Area The Stage and accompanying work area in Flash Professional are where all of the visual creation, manipulation, and animation take place. This lesson demonstrates the differences between these two features and looks at properties associated with the Stage. Runtime: 00:00:43 Added: May 06, 2012 Views: 8,602	00:00:43
New Support for HTML5 in Flash Professional CS6 New Support for HTML5 in Flash Professional CS6 Leverage a new extension (available separately) to create interactive HTML5 content by building on core animation and drawing capabilities in Flash Professional. Export as JavaScript to target the CreateJS open source framework. Runtime: 00:01:24 Added: April 22, 2012 Views: 14,373	00:01:24
Sprite Sheet Generation in Flash Professional CS6 Sprite Sheet Generation in Flash Professional CS6 Export symbols and animation sequences to instantly generate sprite sheets that improve gaming experience, workflow, and performance. Runtime: 00:01:21 Added: April 22, 2012 Views: 4,673	00:01:21
Generating Sprite Sheets Using Flash Professional... Generating Sprite Sheets Using Flash Professional CS6 Adobe Evangelist Paul Trani shows how to generate sprite sheets in Flash Professional CS6. Runtime: 00:02:43 Added: April 22, 2012 Views: 8,989	00:02:43
Exporting Flash Content as HTML in Flash Professio... Exporting Flash Content as HTML in Flash Professional CS6 Adobe Evangelist Paul Trani shows how to export Flash content as HTML using the Toolkit for CreateJS extension with Flash Professional CS6. Runtime: 00:03:29 Added: April 22, 2012 Views: 24,608	00:03:29
Generating sprite sheets from the Stage Generating sprite sheets from the Stage This tutorial demonstrates in detail how to generate a Flash sprite sheet from items on the Stage. Learn how to add multiple symbols or bitmaps images to a sprite sheet. Also learn about the effect the layout and output format of the sprite sheet has. Runtime: 00:03:53 Added: May 06, 2012 Views: 3,287	00:03:53
Simulating mobile content with the new Content Sim... Simulating mobile content with the new Content Simulator The new Content Simulator allows you to effectively simulate how your Flash content is going to behave on a mobile device. This video demonstrates simulation of events specific to mobile, such as touch and drag, geolocation, and reacting to the accelerometer. Runtime: 00:11:28 Added: May 06, 2012 Views: 5,582	00:11:28
Flash Technology: Better Games, More Easily, For M... Flash Technology: Better Games, More Easily, For More People Game developers talk about why they love developing games in Flash: easy workflow, maximum exposure, rapid prototyping, ubiquity of experience across devices, Stage 3D, graphics acceleration, and the ability to distribute to multiple platforms. Runtime: 00:04:41 Added: May 15, 2012 Views: 17,904	00:04:41
Introduction to PhoneGap Introduction to PhoneGap Brian LeRoux provides an overview of PhoneGap. Runtime: 00:02:27 Added: April 22, 2012 Views: 7,128	00:02:27
Using the PhoneGap Build Panel in Dreamweaver CS6... Using the PhoneGap Build Panel in Dreamweaver CS6 to Build Native Applications for Android and iOS Devices Adobe Evangelist Greg Rewis shows how to build native applications for Android and iOS devices using Dreamweaver CS6. Runtime: 00:05:25 Added: April 22, 2012 Views: 35,706	00:05:25
Packaging an App with PhoneGap Build Packaging an App with PhoneGap Build This video looks at the PhoneGap Build Service panel in Dreamweaver CS6, which uploads your files to an online service that generates the native app files for different mobile operating systems. Runtime: 00:08:39 Added: May 14, 2012 Views: 14,598	00:08:39

Suggested Episodes

Next episode in this show

New CSS3 Support in Dreamweaver CS6

Digital Design CS6

Products Covered:

Other Suggested Episodes

Bend the Web to Your Imagination

Creative Cloud Artist Series

Products Covered:

What’s New in Dreamweaver CC

Creative Cloud for Web

Products Covered:

Adobe Dreamweaver CC Integration with Creative Cloud

Creative Cloud for Web

Products Covered:

CSS Designer

Creative Cloud for Web

Products Covered:

Using jQuery widgets in web pages in Dreamweaver

Learn Dreamweaver CC - Preview

Products Covered:

Products used in this episode

Dreamweaver

Try Buy Learn More Help & Support

Related Shows

Digital Design CS5

Learn web design, production, and digital communication from how-to information, subject experts, and tutorials. For more on teaching these skills, see the free Adobe Digital Design curriculum on adobe.com/education.

Recent Episodes

Starter Layouts