O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Responsive Design with Dreamweaver CS6

Video Description

Learn how to build a website from scratch that’s responsive and flexible by using the fluid grid layout features inside Dreamweaver CS6! This 4+ hour hands-on course, hosted by award-winning software trainer and designer Geoff Blake, will take you step by step through the creation of three different layouts in one HTML document for each type of device used to view the website: mobile, tablet and desktop. First, Geoff will very briefly run you through the basics, getting you comfortable in the Dreamweaver interface. Then, it’s on to building the mobile device network from the ground up by using basic building blocks to insert the logo, header, menu, graphics, text, footer and more! You’ll learn how to adjust the mobile layout to scale, tweaking the design for tablet and desktop devices with the end result being a website that scales depending on whether you’re viewing the mobile, tablet or desktop view.

Table of Contents

  1. Gettin' Warmed Up!
    1. Welcome to Responsive Design with Dreamweaver CS6 00:01:34
    2. Previewing the Completed Layout 00:02:24
  2. Chapter 2: Let's Get Started with Fluid Grid Layouts!
    1. Dreamweaver Set Up 00:04:24
    2. Creating A New Fluid Grid Layout 00:06:14
    3. Touring Through the Layout 00:06:19
    4. Looking At Other Device Views 00:06:09
    5. Building the Fluid Grid Layout's Basic Structure 00:07:18
    6. Adjusting Layout Objects 00:10:42
    7. Touring And Understanding The External Style Sheet 00:10:29
    8. Building The Raw Structure For Mobile 00:06:18
    9. Adjusting The Structure For Tablet And Desktop 00:08:15
    10. Inserting Nested Divs In The Layout 00:03:06
    11. Previewing Your Work 00:07:31
    12. Adjusting The External Style Sheet 00:04:45
  3. Chapter 3: Building The Mobile Device Layout!
    1. Building The Header 00:04:12
    2. Inserting The Logo 00:09:49
    3. Inserting And Formatting The Menu Items 00:07:26
    4. Roughing In The Slideshow 00:02:01
    5. Building The Positioning Statement Area 00:08:09
    6. Getting The New Additions Area Built 00:09:42
    7. Constructing The Feature Boxes 00:15:05
    8. Finishing Up The Feature Boxes 00:04:00
    9. Adjusting The Mobile Layout To Scale, Part 1 00:05:32
    10. Adjusting The Mobile Layout To Scale, Part 2 00:07:00
    11. Formatting The Footer 00:06:15
    12. Finishing Up The Mobile Device Layout 00:06:28
  4. Chapter 4: Building Out The Tablet Device Design!
    1. Setting Up A Visual Cue For Device Previewing 00:06:27
    2. Adjusting The Tablet Layout's Logo 00:05:11
    3. Configuring Layout Objects To Inherit From The Mobile Style Sheet 00:03:16
    4. Adjusting The Positioning Statement And New Additions Areas 00:03:51
    5. Setting Up The Tablet Device's Feature Boxes, Part 1 00:05:32
    6. Setting Up The Tablet Device's Feature Boxes, Part 2 00:07:58
    7. Let's Cheat! Here's How To Fix Scaling Graphic Margin 00:04:03
    8. Fixing The Mobile View 00:05:47
    9. Finishing Touches For The Tablet Layout 00:03:42
  5. Chapter 5: Building The Desktop Layout!
    1. Adjusting To Accomodate A Fixed-Width Desktop Layout 00:03:54
    2. Adjusting The Desktop Layout's Logo 00:01:54
    3. Applying Desktop-Only Formatting To The Menu 00:03:21
    4. Tweaking The Slideshow Positioning 00:00:55
    5. Fixing The Positioning Statement And Feature Boxes 00:08:01
    6. Final Desktop Layout Adjustments 00:02:51
  6. Chapter 6: Finishing Up with Some Final Adjustments!
    1. Cleaning Up The Style Sheet 00:04:54
    2. Hiding Layout Content Between Devices 00:05:16
  7. Wrapping Up Fluid Grid Layouts
    1. Where To Go From Here 00:01:32