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 Africa presents computer classes across Africa, and is a leading supplier of internationally-accesible, online computer training.
MODULE 1: GETTING WARMED UP!
to Responsive Design with Dreamweaver CS6
Previewing the Completed Layout
MODULE 2: LET'S GET STARTED WITH FLUID GRID LAYOUTS!
Dreamweaver Set Up
A New Fluid Grid Layout
Through the Layout
At Other Device Views
the Fluid Grid Layout's Basic Structure
Adjusting Layout Objects
And Understanding The External Style Sheet
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!
Inserting The Logo
Inserting And Formatting The Menu Items
In The Slideshow
The Positioning Statement Area
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!
Up A Visual Cue For Device Previewing
Adjusting The Tablet Layout's Logo
Configuring Layout Objects To Inherit From The Mobile Style
Adjusting The Positioning Statement And New Additions Areas
Up The Tablet Device's Feature Boxes, Part 1
Up The Tablet Device's Feature Boxes, Part 2
Cheat! Here's How To Fix Scaling Graphic Margin
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
Desktop-Only Formatting To The Menu
The Slideshow Positioning
The Positioning Statement And Feature Boxes
Desktop Layout Adjustments
MODULE 6: FINISHING UP WITH SOME FINAL ADJUSTMENTS!