2014
Lynda
Joseph Lowery
2:02
English

Responsive web design allows designers to control the look and feel of their website on multiple screen sizes and platforms. This course illustrates two approaches to responsive web design in Dreamweaver CC: the first using Dreamweaver's Fluid Grid Layout tool and the second using media queries. Author Joseph Lowery shows how to use the Fluid Grid Layout framework to create a single website for desktops, tablets, and smartphones. Then he turns to media queries to handle orientation changes, target high-resolution displays like that in the iPhone 6, and hide content when necessary. The final chapter of the course illustrates how to handle images and media responsively.

Introduction
Welcome
Using the exercise files
Using the challenges
1. Understanding Responsive Web Design
The foundation of responsive web design
Structuring fluid grids
Understanding media queries
2. Fluid Grid Layouts in Dreamweaver
Creating a new fluid grid layout
Adding building block tags
Inserting content
Targeting a phone design
Balancing tablet layouts
3. Expanding on a Fluid Grid Structure
Modifying the number of grid columns
Adjusting and hiding page areas
Challenge: Customize the layout
Solution: Customize the layout
4. Enhanced Media Queries
Building media queries from the ground up
Working with additional media queries
Handling orientation changes
Working with high-resolution displays
Challenge: Hiding specific content
Solution: Hiding specific content
5. Flexible Images and Media
Core CSS manipulation
Applying JavaScript techniques
Switching to the right video size
Challenge: Add new media
Solution: Add new media
Conclusion
Goodbye

Download File Size:354.33 MB

---