Responsive Design with Dreamweaver CS6

Learn how to use media queries and the Fluid Grid Layout feature in Dreamweaver to create a website that delivers different layouts to desktops, tablets, and other mobile devices.

This course illustrates two approaches to responsive web design, the new Fluid Grid Layout feature and media queries, which allow a wide spectrum of designers to reach their target audience via desktops, tablets, or other mobile devices. Author Joseph Lowery shows how to use the Fluid Grid Layout feature in Dreamweaver to create a single web site that delivers different layouts to targeted screen sizes. The course also offers a more advanced approach to responsive design by using media queries—employing the Multiscreen Preview feature and enhancing the resulting output code—as well as methods for handling mobile first priorities and adaptive images.

Introduction

• Welcome
• About the exercise files

1. Understanding Responsive Web Design

• The foundation of responsive web design
• Structuring fluid grids
• Understanding media queries

2. Fluid Grid Layouts in Dreamweaver

• Exploring the default Fluid Grid Layout
• Adding building block div tags
• Inserting content
• Targeting a phone design
• Balancing tablet layouts

3. Expanding on a Fluid Grid Structure

• Modifying the number of grid columns
• Adjusting column widths and margins
• Including advanced page elements

4. Enhanced Media Queries

• Building media queries from the ground up
• Working with additional media queries
• Handling orientation changes
• Working with high-resolution displays

5. Flexible Images and Media

• Core CSS manipulation
• Applying JavaScript techniques
• Setting up server-side solutions

Goodbye

• Next steps