Learn Dreamweaver CS6: Designing for Multiple Devices
Janine welcomes you and provides an overview of what you’ll learn in this course.
1. Designing for Desktop, Mobile, and Tablet Devices
Janine explains how responsive designs work and demonstrates how to create websites that adapt to look good on small mobile phone screens, tablets, and large monitors.
2. Introducing the Dreamweaver CS6 Interface
Discover the newest features in Dreamweaver CS6, set up the interface to best suit your preferences, and make sure you can find all of the features Janine shows off in the rest of the course.
3. Setting up a New Site in Dreamweaver CS6
Set up the sample site featured in this course (you can download the site about Spanish Architect Antonio Gaudi to follow along). In this lesson, you ’ll also find instructions on using the FTP and other site publishing features, using the Files panel, and learn how to use the new Site Set Up features to manage all of the websites you work on in Dreamweaver.
5. Inserting Fluid Grid Layout Div Tags
When you create a new Fluid Grid Layout, it’s important that you only add Fluid Grid Divs. In this lesson, you learn how to add a series of Fluid Grid Divs to start building your page layout.
6. Saving Files and Adding Content
It’s easier to understand how the fluid grid features work when you have real pictures and text in your design. The tips you learn in this lesson will help you build out the sample site, and show you how to add your own pictures and text when you’re creating your own site.
7. Inserting Images and Backgrounds
You can insert images into fluid grid div tags, and you can add them to the background of any part of the page using CSS. In this lesson you discover how to inset images and use images as backgrounds, and how these two options serve different design requirements.
8. Adjusting and Aligning Columns
Now that you have all of the content in place, it’s time to create three layouts with one HTML page. Using CSS and the automated fluid grid features, you’ll create a one column, two-column, and four column layouts from one set of fluid grid div tags.
10. Adding Fancy Fonts with @font-face
Dress up your designs with the @font-face tag and discover how the new Dreamweaver CS6 Web Fonts Manager makes it easy to use almost any font in your designs. As a bonus, discover how to get free fronts from the online font services, including the Google Font Directory and FontSquirrel.com and why you won’t need the Web Fonts Manager if you use Adobe TypeKit.com.
11. Reviewing Boilerplate.css and Other Styles
Time to put the final details together, understand why there are more styles in the boilerplate.css file than you may need, and how to attach and remove style sheets from any HTML file in Dreamweaver.
12. Styling Navigation Buttons with CSS
Navigation links need to as easy for ‘fat fingers’ on a touchscreen as they are when you roll a mouse over them on a computer screen. Most good website have a collection, or list, of links that make it easy to get to all of the main pages in a site, in this lesson, you learn how to use CSS to turn a list of links into three different designs using background colors, border, and positioning styles.
13. Setting Up Your Own Media Queries
The new Fluid Grid Layout features in Dreamweaver CS6 provide a great short cut to creating adaptive designs, but if you want to create a design that’s too complex for these automated tools, you can set up your own media queries and assign any CSS you want with the tips you learn in this final lesson.