Table Of Content

Table 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]>