Dreamweaver CS6 Responsive Design Online Course

Dreamweaver CS6 Responsive Design Online Course in Senegal

 

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.  2KO International supplies computer training all over Africa, starting from beginner level to advanced certification, and is also a top supplier of internationally recognised online computer courses.

 

Course Modules

 

Module 1: Getting Warmed Up!

Welcome to Responsive Design with Dreamweaver CS6

Previewing the Completed Layout

 

Module 2: Let's Get Started With Fluid Grid Layouts!

Dreamweaver Set Up

Creating A New Fluid Grid Layout

Touring Through the Layout

Looking At Other Device Views

Building the Fluid Grid Layout's Basic Structure

Adjusting Layout Objects

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

 

Module 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

 

Module 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

 

Module 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

 

Module 6: Finishing Up With Some Final Adjustments!

Cleaning Up The Style Sheet

Hiding Layout Content Between Devices

 

Module 7: Wrapping Up Fluid Grid Layouts

Where To Go From Here