Dreamweaver HTML5, jQuery and Mobile Apps (2 days)

This course shows how to use Dreamweaver's rich visual interface to develop sites using HTML 5, CSS3 and JQuery. Delegates will learn how Dreamweaver can be used to create sites that function on a wide range of devices and how to build mobile apps for iOS and Android, using JQuery and the open-source PhoneGap framework. A basic familiarity with Dreamweaver and general web development concepts is assumed.

Creating HTML5 Pages in Dreamweaver

An introduction to HTML5 layout elements
Generating new pages from layouts using the HTML5 templates
Examining the generated HTML5 layout
Saving a layout as a web page

Customizing HTML5 Layout Content and Look

Customizing layouts An overview
Editing content in HTML5 page layout elements
Identifying style rules
Customizing HTML tag rules
Saving customized HTML5 layouts

Customizing HTML5 Layout Elements

HTML5 layout and browser compatibility challenges
Global HTML5 layout element attributes
Customizing HTML5 elements
ID and class styles

Building HTML5 Pages from Scratch

Dreamweaver CS5 and HTML5
Building an HTML5 page from the top
Using HTML5 to make content accessible
HTML5 layout strategy
Using fluid grid layouts
Using code hints
Adding header, header nav, and hgroup
Creating articles and sections
Adding aside content
Creating a footer
Adding metadata

Defining and Implementing Multiscreen Previews and Media Queries

Web design for a multimedia web world
Previewing with the Multiscreen Preview
Generating a Media Query in Dreamweaver
Formatting CSS files for Media Queries

Applying CSS3 Effects and Transforms

Understanding CSS3 Transitions
Using Dreamweaver's CSS3 transition panel
CSS3 effects
CSS3 transforms
Interactive effects and transforms

Embedding HTML5 Audio in Dreamweaver

Audio and compatibility
Laying the groundwork: HTML5 and page-building
Making audio HTML5-ready
Embedding an HTML5 audio element in a Dreamweaver CS6 web page
Alternative media options

Embedding HTML5 Video in Dreamweaver

Preparing an HTML5 video for every scenario
Compressing videos for the Web
Creating an HTML5 video in Adobe Media Encoder
Dreamweaver site management for an HTML5 video
Defining the HTML5 <video> element
Testing HTML5 video pages

Creating Mobile Pages with jQuery

An overview of mobile pages
Customizing mobile page content
Adding new jQuery Mobile pages and objects
Customizing mobile page CSS styles

Adding jQuery Mobile Elements

Using Dreamweaver's starter jQuery Mobile pages
Creating jQuery Mobile pages from scratch
Inserting a Layout Grid
Designing mobile pages into a collapsible block
Adding jQuery form objects

Generating Apps

Generating apps from Dreamweaver—an overview
Configuring application framework(s)
The App toolkits
Defining mobile application settings
Building and emulating apps
Testing mobile apps on your computer

Back to top