Responsive Design with Dreamweaver CS6

Learn how to set up and customize Dreamweaver with a personal workspace, define a site, organize project files in the files panel, and tailor keyboard shortcuts for efficient editing.

Create a new fluid grid layout in Dreamweaver CS6, configure mobile/tablet/desktop columns (6/9/12), apply a 25% gutter, set 100% widths across all devices, and save the external stylesheet.

Explore the Dreamweaver CS6 fluid grid workflow, including the grid container and non-nested fluid grid divs, and review boilerplate.css, the fluid grid stylesheet, and respond.min.js.

Switch between mobile, tablet, and desktop views in Dreamweaver CS6 to preview a responsive grid with 5, 8, and 10 columns while learning that CSS, not previews, controls actual widths.

Build the mobile view fluid grid layout in Dreamweaver CS6 by inserting labeled div blocks with IDs, selecting start new row, and applying the same structure to tablet and desktop.

Resize fluid grid layout divs to create responsive three column feature boxes across mobile, tablet, and desktop views, mastering snap to column behavior, left margins, and device specific layouts.

Explore how the external style sheet drives mobile, tablet, and desktop layouts via media queries and inherited rules across a css file, with visual cues in the panel for clarity.

Build the mobile-first rock structure for a responsive layout in Dreamweaver CS6, setting header, menu, slideshow, features, and footer heights, and preview cascading inheritance to tablet and desktop.

Adjust the tablet and desktop structure with media queries and an external stylesheet, setting header and section heights to override mobile cascading styles.

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.

Preview your responsive layout by applying a temporary wireframe background to all divs, then view it in mobile, tablet, and desktop browsers using Dreamweaver's live view or browser previews.

Explore how Dreamweaver CS6 handles the external stylesheet, media queries, and class rules across mobile and desktop views, and learn to keep wireframe rules organized outside media queries for clarity.

Start in the mobile view by adding a header background image and removing dummy head text, then define header css rules and view in tablet and desktop to see inheritance.

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.

Insert and format the site menu in Dreamweaver CS6 mobile view, setting height, font size, bold text, line height, alignment, padding, and a temporary background, with dummy links for demonstration.

Insert slideshow graphics, remove placeholder text, and delete height and wireframe rules to reveal a cleaner, mobile-ready slideshow. Save and refresh to see the layout resembling a mobile web page.

Develop the mobile positioning statement area by cleaning the wireframe and creating nested CSSA rules for text and a right-aligned button, with borders and a subtle box-shadow.

Build the new additions area in Dreamweaver CS6 using nested divs and id selectors. Create a headline, text block, and button with CSS styling and layout adjustments.

Construct three feature boxes by removing the wireframe and dummy text, set a 90 percent width, and build a reusable class rule in Dreamweaver CS6.

Finish three feature boxes by duplicating the first box's content into boxes 2 and 3 and updating the graphics to jpgs. Use CSS margins and Chrome dev tools to troubleshoot.

Adjust the mobile layout in Dreamweaver CS6 by switching feature boxes, graphics, and text from fixed pixels to percentage-based sizes so content scales smoothly with the viewport.

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.

Format the footer in Dreamweaver CS6 with a dark background, centered links, and golden colors; learn responsive tweaks for mobile and tablet using the CSA styles panel and media queries.

Finish the mobile device layout by adding social media icons to the footer and styling the follow us and social icons containers with css rules for responsive tablet adjustments.

Create a visual cue to signal device switching during browser previews by applying mobile, tablet, and desktop styles with menu background color changes.

Copy the logo image rule from mobile to the tablet area using the CSS styles panel and option/alt-drag, then increase the tablet logo width from 75 to 90 percent.

Configure layout objects to inherit from mobile style sheet in Dreamweaver cs6, duplicating rules across devices, and ensure the tablet menu and slideshow scale by cascading width and height properties.

In the tablet styles, inherit the mobile height for new additions, add text-align right to the positioning statement and new additions buttons, and adjust bottom margins for better vertical alignment.

Learn to configure tablet view feature boxes in Dreamweaver CS6 by copying rules, adjusting floats, widths, and padding to maintain a responsive fluid grid layout.

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.

Discover a practical hack in Dreamweaver CS6 to fix scaling graphic margins by adding a 10-pixel canvas and using transparent PNGs for consistent margins across devices.

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.

Finish the tablet layout in Dreamweaver CS6 by adding a follow us id selector within the tablet media query, adjusting the footer spacing, and removing the Christmas menu.

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.

Adjust desktop logo in Dreamweaver CS6 by copying mobile logo rules to desktop, increase left margin to 20, top margin to 30, and set logo image to 100 percent.

Apply desktop-only formatting to the menu using media queries, adjust dimensions, remove background color and underline, and tailor fonts for desktop views.

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.

Align the new additions and three feature boxes on one row by adjusting margins and widths, and refine the desktop layout with a styled feature box holder.

Finalize the desktop layout by fixing the more info button, removing the green background, duplicating the new additions text from mobile, and increasing its height from 100 to 200 pixels.

Clean up the external style sheet by removing unused rules, consolidating hyperlink rules across devices, and ensuring media queries properly apply formatting to desktop, tablet, and mobile.

Learn to hide mobile content by setting the slide show display to none, so the space collapses, while tablet and desktop views stay visible using a css and html file.

Explore the fluid grid layout features in Dreamweaver for responsive design and learn where to go from here with your projects.