Dreamweaver CS6 Responsive Design
PS You can change currency to see the price in your country at the top of the screen, just below the search box
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 presents authorised computer courses with IT certification, and is a leading supplier of online computer training (available world-wide).
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