With all the hype about designing web sites for mobile phones and tablets, it's no surprise that the most impressive features in Dreamweaver CS6 make it easier to create adaptive designs that look great on small and large screens.
In this 2-hour training video, award-winning author and video host, Janine Warner, introduces you to Dreamweaver’s new fluid grid layout features and shows you how to create one, well-crafted HTML file and then use three sets of CSS styles to adapt how that page displays on mobile phones, tablets, and desktop computers.
Whether you’re new to web design, or you’re looking for a quick introduction to creating adaptive websites, Janine takes you from a blank page in Dreamweaver to a completed design, and provides all of the images and project files so you can follow along every step of the way.
Throughout the course, she shares tips about her favorite features, including how to use Live View to get a better preview of your designs, and how to add text shadows and rounded corners with the CSS Styles panel. From the basics of setting up a site in the new Manage Sites dialog, to the latest in using fancy fonts with the new Font Manager, it’s time to learn the latest in web design with Dreamweaver CS6.
Do you ever get frustrated with tutorials that don't work in the real world? Janine doesn’t just teach web design, she runs her own digital design agency and brings real-world experience to all of her books and videos. Janine always shares multiple methods for developing sites with Dreamweaver so that you can choose the one that’s best for your project, and she keeps things moving with insightful tips, as well as tried and true basic techniques.
You'll learn tons, you'll have fun and most of all you'll be inspired. See why millions of people are passionate about PhotoshopCAFE training. (30,000,000 to date). You can use these techniques with confidence, knowing that this training meets the latest in web standards that produce professional results.
This fast loading DVD ROM contains more than 2 hours of brand new sharp video. The advanced interface allows the user to instantly jump to any of the lessons with complete control over the playback. All the lesson files are included, so you can follow along at your own pace!
If you are a photographer, designer, hobbyist, anyone who wants to learn more about web design, beginner to professional, this Disk is for you!
Now includes Full Screen Playback. And works on iPad,iPhone 4 (Earlier iPhones not supported) iTunes and Apple TV!
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.
4. Creating a New Fluid Grid Layout
Starting with a new, blank page, Janine shows you how to get started creating your first adaptive layout using the Fluid Grid Layout dialog, available from the New Document window.
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.
9. Creating Different Image Styles for Each Layout
Discover how styles cascade from one layout to the next, how using one style through the three layouts is more efficient than creating three, and how you to override any style when you want to vary design elements in layouts.
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.