dreamweaver cs6 mobile and web development with html5, css3, and jquery mobile

www.it-ebooks.info

Dreamweaver CS6 Mobile and

Web Development with HTML5,

CSS3, and jQuery Mobile

Harness the cutting-edge features of Dreamweaver for

mobile and web development

David Karlins

BIRMINGHAM - MUMBAI

www.it-ebooks.info

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

www.it-ebooks.info

Credits

Author

David Karlins

Reviewers

Nelson Therrien

Chris Valleskey

Acquisition Editors

Wilson D'Souza

Rukhsana Khambatta

Lead Technical Editor

Mayur Hule

Technical Editors

Dominic Pereira

Dennis John

Copy Editors

Alfida Paiva

Insiya Morbiwala

Laxmi Subramanian

Sajeev Raghavan

Aditya Nair

Project Coordinator

Abhishek Kori

Proofreader

Mario Cecere

Indexer

Rekha Nair

Production Coordinator

Nilesh R. Mohite

Cover Work

Nilesh R. Mohite

www.it-ebooks.info

About the Author

David Karlins is a web design consultant, teacher, and author of dozens of books

on web design, including Building Websites All-in-One For Dummies, John Wiley & Sons

Inc. (co-author with Doug Sahlin), Adobe Creative Suite 5 Web Premium How-Tos: 100

Essential Techniques, Peachpit, and Dreamweaver CS5.5 Mobile and Web Development with

HTML5, CSS3, and jQuery, Packt Publishing.

Thanks to my agent Margot Hutchinson and everyone at Packt

Publishing for their role in bringing this book to life. And I want to

express special appreciation to Richard Jørgensen who provided

expert input and review for this book.

www.it-ebooks.info

About the Reviewers

Nelson Therrien has computer degrees in both multimedia and programming. He

is an Adobe Certified Expert (ACE) with Dreamweaver and has many Brainbench

certifications (HTML, XHTML, Dreamweaver, Flash, Web design, Photoshop).

Most of his time is spent teaching and developing web applications and dynamic

forms. He is teaching at Eliquo, Canada's biggest Apple- and Adobe-authorized

training center. He's responsible for everything that revolves around the Web at the

Montreal office.

You would see his reference if you were to take a course on Dreamweaver, Flash,

ActionScript, Flex, ColdFusion, HTML5, CSS3, XML, JavaScript, jQuery, PHP,

LiveCycle Designer, or accessibility and standards on the Web. He has also touched

on ASP, .NET, Java, SQL, Photoshop, Fireworks, and Illustrator.

He spoke at the launch of Adobe CS5 and CS5.5 in Canada as an Eliquo

representative.

He is also the father of three young children aged between three and six.

As a way to relax, he's constantly reading and searching to improve his skills and

knowledge, and he does find some time to play Canada's national game: hockey!

He's a goaltender and coaches his two sons.

I'd like to thank Craig Boassaly, Eliquo's president, and the team at

Eliquo for making my teaching job so much fun.

I'd also like to thank my wife who takes care of our three angels

when I'm too busy to help her. And I'd like to thank my three kids

Josué, Isaac, and Kaïla for bringing so much sunshine into my life.

Lastly, I'd like to thank God: nothing that I have in this world or that

I'll have in the next would be without Him.

www.it-ebooks.info

Chris Valleskey is a young and creative thinker who currently lives in Chicago,

IL. He started freelancing at the age of 17 and continued this role throughout college

until graduating in 2011 with a Bachelor of Arts in Graphic Design and Philosophy.

Although he now holds a normal job in the city, he also enjoys spending time with

his close friends as a part owner in their own company. In his free time, he enjoys

playing Halo, drinking Mountain Dew, and hanging out with his awesome wife.

I would like to especially thank my wife Krista for putting up with

me, and for my friends and family for supporting and encouraging

me in everything I do.

www.it-ebooks.info

www.PacktPub.com

Support files, eBooks, discount offers

and more

You might want to visit www.PacktPub.com for support files and downloads related to

your book.

Did you know that Packt offers eBook versions of every book published, with PDF and

ePub files available? You can upgrade to the eBook version at www.PacktPub.com and

as a print book customer, you are entitled to a discount on the eBook copy. Get in touch

with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up

for a range of free newsletters and receive exclusive discounts and offers on Packt books

and eBooks.

TM

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital

book library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe? • Fully searchable across every book published by Packt

• Copy and paste, print and bookmark content

• On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access

PacktLib today and view nine entirely free books. Simply use your login credentials for

immediate access.

www.it-ebooks.info

www.it-ebooks.info

Table of Contents

Preface 1

Chapter 1: Creating Sites and Pages with Dreamweaver CS6 7

Defining a Dreamweaver site 8

Defining a local site 8

Defining a remote site 10

Transferring files between a local and remote site 13

Creating an HTML5 page 15

Creating the text content 18

Applying headings 19

Adding paragraphs, lists, and links 19

Inserting images 21

Linking to a stylesheet 23

Creating and linking to an external stylesheet 24

Linking a stylesheet to an HTML file 25

Define the Body tag's style 25

Define a wrapper ID style 27

Summary 29

Chapter 2: Using HTML5 for Page Structure 31

HTML5 structural elements 33

Breaking down HTML5 page code 35

Defining an address 43

Figures and captions 44

Indicating date and time 44

Creating a CSS file for HTML5 page structure 45

Assigning a block property 48

Defining styles 50

www.it-ebooks.info

Table of Contents

[ ii ]

Chapter 3: Collecting Data with Forms 53

Creating a jump menu 54

Editing Jump Menu JavaScript 57

Creating a validated text field 61

Creating a validated e-mail field 64

Adding other fields 64

Adding Submit and Reset buttons 65

Creating a stylesheet for form elements 67

Creating styles for form elements 70

Creating ID Styles for a Form 71

Thoughts on form styles 72

Chapter 4: Applying CSS3 Effects and Transforms 77

Compatibility challenges 79

CSS3 styles in Dreamweaver CS6 81

Defining opacity 85

Border radius 88

Shadows 89

Box shadow 90

Text shadow 91

Creating a text outline 92

When to use transforms 94

How to generate transition coding in Dreamweaver CS6 94

Resizing with scale 96

Moving with translate 97

Applying rotation 98

Creating a skew transition 99

Other CSS3 transform effects 100

Compound transforms 101

Limitations of using effects with JavaScript 102

Interactivity with the :hover pseudo-class 102

Animating CSS3 transforms in Dreamweaver 103

Putting the pieces in place 104

Using a hover class style to animate effects 108

Chapter 5: Embedding HTML5 Native Audio and Video 111

Native media and compatibility 111

Laying the groundwork 112

Preparing native audio 112

Audio compression 113

Browser support for audio files 113

Embedding an HTML5 audio element in a Dreamweaver web page 114

Alternative audio options 115

www.it-ebooks.info

Table of Contents

[ iii ]

Adding play parameters 117

Embedding HTML5 audio 118

Embedding native video 119

HTML5 video and Dreamweaver 120

Early video formats 120

Flash video (FLV) 121

Apple devices and web video 123

Preparing native video files 124

Native video formats 124

Browsers that do NOT support HTML5 125

Preparing HTML5 video for every scenario 125

Compressing video for the Web 125

Video compression – open source and proprietary 126

Converting video to web formats with open source tools 127

Dreamweaver site management for HTML5 video 128

Defining the HTML5 <video> element 129

Prerequisites 129

Defining the <video> element 130

Defining video attributes 130

Defining video source(s) 131

Alternate video for non-HTML5 environments 131

Putting it all together 132

Testing HTML5 video pages 132

Previewing a video in Live View 132

Embedding an HTML5 video 133

Summary 136

Chapter 6: Responsive Design with Media Queries 137

How Media Queries work 138

A short history of Media Queries 139

HTML5, CSS3, and Media Queries 141

Styling for mobile devices and tablets 141

Media Queries versus jQuery Mobile and apps 142

Building alternative stylesheets 145

Preparing to generate a Media Query 145

Assigning styles to different media 146

Chapter 7: Creating Mobile Sites with jQuery Mobile 159

Mobile pages, apps, and jQuery Mobile 162

What is jQuery Mobile? 162

Mobile pages in Split view 165

Previewing jQuery Mobile pages in Live view 166

The HTML5 data-role property 167

Data-role pages 167

Customizing page content 169

Customizing content for different data roles 170

www.it-ebooks.info

Table of Contents

[ iv ]

Applying themes 172

Editing CSS in jQuery Mobile pages 173

Chapter 8: Enhancing Mobile Sites 181

Tables, div tags, and grids 184

Generating grids in Dreamweaver 185

Defining styles for layout grids 185

Building a collapsible block 188

Changing the initial block state 189

Changing block data-themes and styles 190

Editing collapsible block HTML 191

Forms in Dreamweaver 194

Creating a jQuery Mobile form 195

Special mobile form fields 197

Inserting a text input field 198

Inserting a slider 198

Inserting a toggle switch 199

Chapter 9: Customizing Themes with ThemeRoller 207

Applying jQuery Mobile theme swatches 208

Examining the five data-themes 208

Applying themes to specific elements 210

Customizing themes with ThemeRoller 211

The aesthetics of mobile color schemes 211

Launching ThemeRoller 212

Defining global theme attributes 214

Defining custom swatches 216

Creating additional swatches 218

Rolling a theme 218

Applying a custom theme in Dreamweaver 219

Summary 221

Chapter 10: Building Apps with PhoneGap 223

Apps and mobile websites 224

Android and iOS 224

Understanding PhoneGap 225

Before building apps 226

Creating a PhoneGap Build service account 227

Downloading the Android SDK 227

PhoneGap and Dreamweaver 229

Configuring PhoneGap settings 229

Generating apps with Dreamweaver 231

Testing and distributing apps 235

Testing apps with an emulator 235

www.it-ebooks.info

Table of Contents

[ v ]

Revising your app 237

Scanning apps into your Android device 238

Downloading apps 240

Distributing Apps 241

Summary 242

Index 245

www.it-ebooks.info

www.it-ebooks.info