New Feature Overview

from: Dreamweaver CS6: New Features Workshop

About this lesson

There's strong emphasis on CSS improvements in this version of Dreamweaver, such as fluid grid layouts, web font management, and CSS transitions. There are also important changes to jQuery Mobile, PhoneGap, and FTP, as you'll see in this video.

From:

Dreamweaver CS6: New Features Workshop

$29.99

Similar Courses

In this chapter you'll be introduced to the new features in Dreamweaver CS6, which are heavily weighted toward CSS improvements. You'll also learn about changes to jQuery Mobile, PhoneGap, and FTP, as well as the new Mac Application frame.

Introduction
- There's strong emphasis on CSS improvements in this version of Dreamweaver, such as fluid grid layouts, web font management, and CSS transitions. There are also important changes to jQuery Mobile, PhoneGap, and FTP, as you'll see in this video.
  
  New Feature Overview
  
  06:22
- The Mac version of Dreamweaver CS6 now hides the Desktop in the same way the Windows version does. This video explains to Mac users how to revert to the traditional Mac way of working by turning off the Application frame.
  
  Mac Application Frame
  
  02:39
Support for web fonts is drastically improved in Dreamweaver CS6, and in this chapter we'll look at the key new features in this area, such as the Web Fonts Manager.

Managing Web Fonts
- This video looks at the Web Fonts Manager, which installs web fonts in Dreamweaver and makes them available to all your Dreamweaver sites.
  
  Using the Web Fonts Manager
  
  05:57
- After installing web fonts, it's a good idea to create custom font stacks with fallback fonts in case the web font can't be displayed for any reason. This video will show you how.
  
  Adding Web Fonts to Font Stacks
  
  05:42
- When you use web fonts installed with the Web Fonts Manager, Dreamweaver automatically creates an @font-face rule and imports the font formats into a dedicated folder in the site root. You'll see how the process works in this video.
  
  Using Web Fonts in a Site
  
  07:31
- A new button in the Type category of the CSS Rule Definition dialog box is designed to promote web fonts to the top of the code hints for the font-family property, but it can have unexpected consequences. This video explains what to look out for.
  
  Adding/Removing Font Favorites
  
  02:38
Many of the big improvements in Dreamweaver CS6 are related to CSS, and in this chapter you'll learn all about them.

CSS Improvements
- This video looks at the new Multiclass Selection panel, which makes it easy to apply multiple classes to an HTML element.
  
  Applying Multiple Classes
  
  03:10
- CSS transitions smooth the transition from one state to another, such as when you hover over an element. This video will introduce you to this useful feature.
  
  CSS Transitions Overview
  
  03:04
- This video looks at the CSS Transitions panel, which lets you create the style rules for a transition and the state to which you want to transition in a single operation.
  
  Using the CSS Transitions Panel
  
  07:00
- In this video you'll learn how to edit a transition by selecting the pseudo-class that triggers the transition in the CSS Transitions panel.
  
  Editing a CSS Transition
  
  03:54
- Removing a transition created with the CSS Transitions panel involves important decisions about which style rules Dreamweaver should delete. This video explains what you need to know.
  
  Removing a CSS Transition
  
  03:55
- The CSS Transitions panel can't handle transitions where the trigger is on a parent or ancestor element. Instead, you need to use the new Transitions category in the CSS Rule Definition dialog box, as this video demonstrates.
  
  Setting Up CSS Transitions Manually
  
  06:07
Dreamweaver CS6 offers two different approaches to responsive web design, one involving site-wide media query files, the other using fluid grid layouts. We'll explore both in this chapter.

Responsive Web Design
- In this video we'll explore two useful new features. The Multiscreen Preview panel lets you preview your page at typical screen resolutions used in mobile phones, tablets, and desktops. Creating a site-wide media query file automatically imports separate style sheets for devices with different screen widths.
  
  The Multiscreen Preview Panel and Site-Wide Media Query Files
  
  09:11
- The new fluid grid layout feature takes a different approach to responsive design, putting all the media queries in the same style sheet and styling for mobile first. This video will give you the lowdown.
  
  Using a Fluid Grid Layout
  
  06:47
- After you have created the basic mobile structure for a fluid grid layout, you can alter the layouts for tablets and desktops by dragging and dropping in Design view, as this video demonstrates.
  
  Snapping Layout Divs to the Grid
  
  06:48
- Styling a fluid grid layout requires a good understanding of CSS, as this video explains. Most styles need to be defined in the mobile layout section so they are inherited by tablets and desktops.
  
  Managing Fluid Grid Layout Styles
  
  09:19
- Dreamweaver omits the width and height attributes of images inserted into a fluid grid layout, and uses the max-width property to prevent images from spilling out of their parent containers. This video shows how to create separate rules to center images on mobile devices while flowing text around them on larger screens.
  
  Inserting Images in a Fluid Grid Layout
  
  07:56
- Using a site-wide media query file or fluid grid layout both have their advantages and drawbacks. In this video we'll consider the relative merits of each.
  
  Evaluating Both Approaches to Responsive Web Design
  
  03:27
This chapter looks at the jQuery Mobile framework integrated in Dreamweaver CS6, which creates a touch-optimized user interface for smartphones and tablets.

jQuery Mobile
- This video will introduce you to the basics of the jQuery Mobile framework.
  
  Introducing jQuery Mobile
  
  03:53
- This video explains how to choose one of the jQuery Mobile starter layouts in Dreamweaver CS6 and describes how jQuery Mobile page blocks are structured.
  
  Using a jQuery Mobile Starter Page
  
  06:44
- In this video you'll see how to add content and jQuery Mobile widgets to page blocks.
  
  Adding Content and Widgets
  
  08:18
- Links in jQuery Mobile headers are automatically converted to buttons. You can add an icon to a button or use the icon on its own, as you'll see in this video.
  
  Adding Navigation Buttons to a Header
  
  05:48
- Links in jQuery Mobile footers are not automatically converted into buttons. This video shows you how to use a layout grid widget to space footer elements evenly and explains why you need to examine the dynamically generated HTML in Live Code view.
  
  Adding Navigation Links to a Footer
  
  06:09
- In this video you'll learn how to use the jQuery Mobile Swatches panel and the jQuery Mobile Themeroller to style your mobile web app.
  
  Styling jQuery Mobile
  
  07:22
In this chapter we'll look at PhoneGap, an open source framework that creates native apps for mobile devices using just HTML, CSS, and JavaScript. You'll also learn about the PhoneGap Build Service panel, which uploads your files to an online service that generates the native app files for different mobile operating systems.

PhoneGap and PhoneGap Build
- PhoneGap is an open source framework that creates native apps for mobile devices using just HTML, CSS, and JavaScript. It was first integrated in Dreamweaver CS5.5, but the workflow has changed completely in CS6, as you'll see in this video.
  
  What Are PhoneGap and PhoneGap Build?
  
  04:23
- This video looks at the PhoneGap Build Service panel in Dreamweaver CS6, which uploads your files to an online service that generates the native app files for different mobile operating systems.
  
  Packaging an App with PhoneGap Build
  
  08:33
- To create an iOS version of an app, PhoneGap Build requires a signing key created in the Xcode iOS development tools on a Mac. This video explains the process of setting up PhoneGap in Xcode.
  
  Setting Up PhoneGap in Xcode on a Mac
  
  05:56
- An Xcode project has two www folders. You need to make sure that you store the app's source files in the correct one, as this video will explain.
  
  Editing the Source Files on a Mac
  
  05:43
- The iOS signing key is created by exporting the iOS Development Certificate and a provisioning profile from your Mac, and then uploading them to the PhoneGap Build website. This video explains the process.
  
  Creating the Signing Key for iOS
  
  07:05
Dreamweaver CS6 includes a new FTP client that supports multichannel transfers and displays more user-friendly error messages. This chapter looks at the new client.

FTP Improvements
- This video looks at Dreamweaver's new FTP client, which not only supports multichannel transfers, but is much faster and even allows you to upload and download files at the same time.
  
  Multichannel FTP Transfer
  
  03:22
- The FTP client tries to display more user-friendly error messages when it can't connect to the remote server, but it can't always work out what's causing the problem, as you'll see in this video.
  
  Improved Error Messages
  
  02:49
This chapter covers changes in Dreamweaver CS6 not discussed elsewhere in the course, including differences in the way Dreamweaver handles lists, Smart Objects, and the resizing of images.

Other Changes
- In this video we'll look at a small but significant change in the way Dreamweaver handles ordered and unordered lists that makes it easy to work with paragraphs inside list items.
  
  Paragraphs in Lists
  
  03:01
- This video describes the new workflow for inserting a Photoshop Smart Object in a web page and explains how it differs from previous versions.
  
  Creating Photoshop Smart Objects
  
  06:32
- This video looks at three new icons in the Property Inspector that control the resizing of images.
  
  Resizing Images
  
  04:47
- The Manage Sites dialog box has been redesigned to integrate Adobe's hosted Business Catalyst service more closely into Dreamweaver, but the main functions remain unchanged, as you'll see in this video.
  
  Site Management
  
  01:54
In this chapter the author shares a few closing thoughts about Dreamweaver CS6.

Closing Thoughts
- In this video we'll take a quick spin through the various new features of Dreamweaver 6 that we've explored in this course. Which was your favorite?
  
  Goodbye
  
  00:54

New Feature Overview

from: Dreamweaver CS6: New Features Workshop

About this lesson

From:

About this lesson

Welcome to video2brain!

Other sites. Andere Seiten. Otros sitios. Autres sites.