Table Of ContentTable of Contents
Dreamweaver CS6 Mobile and Web Development with HTML5,
CSS3, and jQuery Mobile
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Errata
Piracy
Questions
1. Creating Sites and Pages with Dreamweaver CS6
Defining a Dreamweaver site
Defining a local site
Defining a remote site
Transferring files between a local and remote site
Creating an HTML5 page
Creating the text content
Applying headings
Adding paragraphs, lists, and links
Inserting images
Linking to a stylesheet
Creating and linking to an external stylesheet
Linking a stylesheet to an HTML file
Define the Body tag's style
Define a wrapper ID style
http://avaxhome.ws/blogs/ChrisRedfield
Summary
2. Using HTML5 for Page Structure
Structuring pages with HTML5
HTML5 structural elements
Breaking down HTML5 page code
Using HTML5 structure elements
Using Code Hints
Adding header, nav, and hgroup
Creating articles and sections
Adding aside content
Creating a footer
An HTML5 layout template
Adding metadata
Defining an address
Figures and captions
Indicating date and time
Creating a CSS file for HTML5 page structure
Assigning a block property
Defining styles
Solving HTML5 compatibility challenges
Summary
3. Collecting Data with Forms
Capturing client-side form management with JavaScript
Creating a jump menu
Editing Jump Menu JavaScript
Defining the form and form action
Generating form fields with Spry validation
Creating a validated text field
Creating a validated e-mail field
Adding other fields
Adding Submit and Reset buttons
Prompting with HTML5
Designing CSS for forms
Creating a stylesheet for form elements
Creating styles for form elements
Creating ID styles for a form
Thoughts on form styles
Real-world form handling
Summary
4. Applying CSS3 Effects and Transforms
New in CSS3–effects and transforms
Compatibility challenges
CSS3 styles in Dreamweaver CS6
CSS3 effects
Defining opacity
Border radius
Shadows
Box shadow
Text shadow
Creating a text outline
CSS3 transforms
When to use transforms
How to generate transition coding in Dreamweaver CS6
Resizing with scale
Moving with translate
Applying rotation
Creating a skew transition
Other CSS3 transform effects
Compound transforms
Interactive effects and transforms
Limitations of using effects with JavaScript
Interactivity with the :hover pseudo-class
Animating CSS3 transforms in Dreamweaver
Example – create an animated effect and transform
Putting the pieces in place
Using a hover class style to animate effects
Summary
5. Embedding HTML5 Native Audio and Video
Native media and compatibility
Laying the groundwork
Preparing native audio
Audio compression
Browser support for audio files
Embedding an HTML5 audio element in a Dreamweaver web
page
Alternative audio options
Adding play parameters
Embedding HTML5 audio
Embedding native video
HTML5 video and Dreamweaver
Early video formats
Flash video (FLV)
Apple devices and web video
Preparing native video files
Native video formats
Browsers that do NOT support HTML5
Preparing HTML5 video for every scenario
Compressing video for the Web
Video compression – open source and proprietary
Converting video to web formats with open source tools
Dreamweaver site management for HTML5 video
Defining the HTML5 <video> element
Prerequisites
Defining the <video> element
Defining video attributes
Defining video source(s)
Alternate video for non-HTML5 environments
Putting it all together
Testing HTML5 video pages
Previewing a video in Live View
Embedding an HTML5 video
Summary
6. Responsive Design with Media Queries
Web design for a multimedia web world
How Media Queries work
A short history of Media Queries
HTML5, CSS3, and Media Queries
Styling for mobile devices and tablets
Media Queries versus jQuery Mobile and apps
Previewing with Multiscreen Preview
Generating a Media Query in Dreamweaver CS6
Building alternative stylesheets
Preparing to generate a Media Query
Assigning styles to different media
Formatting CSS files for Media Queries
Adjusting CSS for Mobile
Defining a Media Query for smartphones
Surveying alternative approaches
Summary
7. Creating Mobile Pages with jQuery Mobile
Mobile pages – an overview
Mobile pages, apps, and jQuery Mobile
What is jQuery Mobile?
Creating mobile pages from Dreamweaver starters
Mobile pages in Split view
Previewing jQuery Mobile pages in Live view
Customizing Mobile page content
The HTML5 data-role property
Data-role pages
Customizing page content
Customizing content for different data roles
Adding new jQuery Mobile pages and objects
Styling with theme swatches
Applying themes
Editing CSS in jQuery Mobile pages
Example – build a mobile web page with jQuery Mobile objects
Summary
8. Enhancing Mobile Sites
Inserting a layout grid
Tables, div tags, and grids
Generating grids in Dreamweaver
Defining styles for layout grids
Designing Mobile Pages with collapsible blocks
Building a collapsible block
Changing the initial block state
Changing block data-themes and styles
Editing collapsible block HTML
Adding jQuery form objects
Forms in Dreamweaver
Creating a jQuery Mobile form
Special mobile form fields
Inserting a text input field
Inserting a slider
Inserting a toggle switch
Building a page with collapsible blocks and a mobile-friendly form
Summary
9. Customizing Themes with ThemeRoller
Applying jQuery Mobile theme swatches
Examining the five data-themes
Applying themes to specific elements
Customizing themes with ThemeRoller
The aesthetics of mobile color schemes
Launching ThemeRoller
Defining global theme attributes
Defining custom swatches
Creating additional swatches
Rolling a theme
Applying a custom theme in Dreamweaver
Summary
10. Building Apps with PhoneGap
Apps and mobile websites
Android and iOS
Understanding PhoneGap
Before building apps
Creating a PhoneGap Build service account
Downloading the Android SDK
PhoneGap and Dreamweaver
Configuring PhoneGap settings
Generating apps with Dreamweaver
Testing and distributing apps
Testing apps with an emulator
Revising your app
Scanning apps into your Android device
Downloading apps
Distributing Apps
Summary
Index
Dreamweaver CS6 Mobile and
Web Development with HTML5,
CSS3, and jQuery Mobile
Dreamweaver CS6 Mobile and
Web Development with HTML5,
CSS3, and jQuery Mobile
Copyright © 2013 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored
in a retrieval system, or transmitted in any form or by any means,
without the prior written permission of the publisher, except in the
case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to
ensure the accuracy of the information presented. However, the
information contained in this book is sold without warranty, either
express or implied. Neither the author, nor Packt Publishing, and its
dealers and distributors will be held liable for any damages caused
or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information
about all of the companies and products mentioned in this book by
the appropriate use of capitals. However, Packt Publishing cannot
guarantee the accuracy of this information.
First published: May 2013
Production Reference: 1150513
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-474-2
www.packtpub.com
Cover Image by Suresh Mogre ( )
<[email protected]>
