Responsive Design with Dreamweaver CS6

Gain clarity and serious responsive design skills!
4.5 (6 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
76 students enrolled
$50
Take This Course
  • Lectures 45
  • Contents Video: 4 hours
    Other: 0 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2013 English

Course 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.

What are the requirements?

  • Basic computer skills

What am I going to get from this course?

  • You’ll be gaining a highly valuable and sought-after set of skills for building websites that are responsive to mobile, tablet, and desktop displays.
  • Clear, non-jargonny instruction and easy to follow lessons walk you step-by-step through the responsive design process.
  • In a matter of hours, you’ll be feeling like an expert in one of today’s biggest web design subjects.

What is the target audience?

  • Those looking to build a strong foundation in responsive web layouts

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stone River eLearning, 180,000+ Happy Udemy Students | 320,000+ Students Worldwide

At Stone River eLearning, technology is all we teach. If you're interested in programming, development or design - we have it covered. 

Check out our huge catalog of courses and join the over 320,000 students currently taking Stone River eLearning courses. We currently offer 125+ different technology training courses on our Stone River eLearning website and are adding new courses on hot and trending topics every month. A subscription option is available for those with a real passion for learning.

Ready to start learning?
Take This Course