Responsive Design with Dreamweaver CS6

Name: Responsive Design with Dreamweaver CS6
Rating: 4.2 (21 reviews)

Gain clarity and serious responsive design skills!

Created byStone River eLearning

Last updated 8/2020

English

What you'll learn

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.

Course content

8 sections • 45 lectures • 4h 9m total length

Welcome to Responsive Design with Dreamweaver CS61:34
Previewing the Completed Layout2:24

Dreamweaver Set Up4:24
Creating A New Fluid Grid Layout6:14
Touring Through the Layout6:19
Looking At Other Device Views6:09
Building the Fluid Grid Layout's Basic Structure7:18
Adjusting Layout Objects10:42
Touring And Understanding The External Style Sheet10:28
Building The Raw Structure For Mobile6:18
Adjusting The Structure For Tablet And Desktop8:15
Inserting Nested Divs In The Layout3:06
Learn to nest divs inside the main layout, mix traditional and fluid grid divs, and apply a temporary background color to visualize structure in Dreamweaver CS6.
Previewing Your Work7:30
Adjusting The External Style Sheet4:44

Building The Header4:11
Inserting The Logo9:49
Insert a logo into the header by nesting a div and applying responsive CSS rules to scale the image for mobile while hiding overflow and ensuring layout stability across views.
Inserting And Formatting The Menu Items7:25
Roughing In The Slideshow2:01
Building The Positioning Statement Area8:08
Getting The New Additions Area Built9:42
Constructing The Feature Boxes15:05
Finishing Up The Feature Boxes3:59
Adjusting The Mobile Layout To Scale, Part 15:31
Adjusting The Mobile Layout To Scale, Part 26:59
Scale the mobile layout with percentage widths, adjust menu sizing and padding, remove fixed heights, and apply a bevel box-shadow to new additions; test in the browser.
Formatting The Footer6:15
Finishing Up The Mobile Device Layout6:27

Setting Up A Visual Cue For Device Previewing6:27
Create a visual cue to signal device switching during browser previews by applying mobile, tablet, and desktop styles with menu background color changes.
Adjusting The Tablet Layout's Logo5:11
Configuring Layout Objects To Inherit From The Mobile Style Sheet3:15
Adjusting The Positioning Statement And New Additions Areas3:51
Setting Up The Tablet Device's Feature Boxes, Part 15:31
Setting Up The Tablet Device's Feature Boxes, Part 27:58
Align three feature boxes on one line in tablet view, keeping them centered as the browser resizes. Wrap them in a new div and adjust mobile styles in Dreamweaver CS6.
Let's Cheat! Here's How To Fix Scaling Graphic Margin4:03
Fixing The Mobile View5:47
Learn how to synchronize mobile and tablet views in Dreamweaver CS6 by copying rules, removing mobile-specific properties, and adjusting feature box widths, margins, and text to achieve consistent responsive design.
Finishing Touches For The Tablet Layout3:41

Adjusting To Accomodate A Fixed-Width Desktop Layout3:54
Adjust the desktop view in Dreamweaver CS6 to a fixed width of 960 pixels, centering the layout and applying the desktop grid rules while mobile and tablet remain flexible.
Adjusting The Desktop Layout's Logo1:54
Applying Desktop-Only Formatting To The Menu3:21
Apply desktop-only formatting to the menu using media queries, adjust dimensions, remove background color and underline, and tailor fonts for desktop views.
Tweaking The Slideshow Positioning0:55
Center the slideshow in the desktop view by adjusting the slide show id selector, overriding inherited tablet and mobile properties, and saving changes in Dreamweaver.
Fixing The Positioning Statement And Feature Boxes8:01
Final Desktop Layout Adjustments2:51

Requirements

Basic computer skills

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.

Who this course is for:

Those looking to build a strong foundation in responsive web layouts

Responsive Design with Dreamweaver CS6

What you'll learn

Explore related topics

Course content

Gettin' Warmed Up!2 lectures • 4min

Let's Get Started with Fluid Grid Layouts!12 lectures • 1hr 21min

Building The Mobile Device Layout!12 lectures • 1hr 26min

Building Out The Tablet Device Design!9 lectures • 46min

Building The Desktop Layout!6 lectures • 21min

Finishing Up with Some Final Adjustments!2 lectures • 10min

Wrapping Up Fluid Grid Layouts1 lecture • 2min

Bonus Material1 lecture • 1min

Requirements

Description

Who this course is for: