Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
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.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Gettin' Warmed Up!|
Welcome to Responsive Design with Dreamweaver CS6Preview
Previewing the Completed LayoutPreview
|Section 2: Let's Get Started with Fluid Grid Layouts!|
Dreamweaver Set UpPreview
Creating A New Fluid Grid LayoutPreview
Touring Through the LayoutPreview
Looking At Other Device ViewsPreview
Building the Fluid Grid Layout's Basic StructurePreview
Adjusting Layout ObjectsPreview
Touring And Understanding The External Style Sheet
Building The Raw Structure For Mobile
Adjusting The Structure For Tablet And Desktop
Inserting Nested Divs In The Layout
Previewing Your Work
Adjusting The External Style Sheet
|Section 3: Building The Mobile Device Layout!|
Building The Header
Inserting The Logo
Inserting And Formatting The Menu Items
Roughing In The Slideshow
Building The Positioning Statement Area
Getting The New Additions Area Built
Constructing The Feature Boxes
Finishing Up The Feature Boxes
Adjusting The Mobile Layout To Scale, Part 1
Adjusting The Mobile Layout To Scale, Part 2
Formatting The Footer
Finishing Up The Mobile Device Layout
|Section 4: Building Out The Tablet Device Design!|
Setting Up A Visual Cue For Device Previewing
Adjusting The Tablet Layout's Logo
Configuring Layout Objects To Inherit From The Mobile Style Sheet
Adjusting The Positioning Statement And New Additions Areas
Setting Up The Tablet Device's Feature Boxes, Part 1
Setting Up The Tablet Device's Feature Boxes, Part 2
Let's Cheat! Here's How To Fix Scaling Graphic Margin
Fixing The Mobile View
Finishing Touches For The Tablet Layout
|Section 5: Building The Desktop Layout!|
Adjusting To Accomodate A Fixed-Width Desktop Layout
Adjusting The Desktop Layout's Logo
Applying Desktop-Only Formatting To The Menu
Tweaking The Slideshow Positioning
Fixing The Positioning Statement And Feature Boxes
Final Desktop Layout Adjustments
|Section 6: Finishing Up with Some Final Adjustments!|
Cleaning Up The Style Sheet
Hiding Layout Content Between Devices
|Section 7: Wrapping Up Fluid Grid Layouts|
Where To Go From Here
Request a Course
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 370,000 students currently taking Stone River eLearning courses. We currently offer 100+ 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.