Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and JQuery : With This Book and Your Knowledge of Dreamweaver You’ll Be Able to Confidently Enter the Brave New World of HTML5, CSS3, and JQuery. Learning Is Easy Thanks to a Hands-on, Step-

In Detail Dreamweaver is the most powerful and industry-leading web design software that utilizes cutting edge web technologies such as HTML5, CSS3, and jQuery for web and mobile development. These technologies have radically reconfigured the process of designing Web content and function in the widest possible range of browsing environments ranging from desktops to mobile devices. For experienced Dreamweaver designers and for designers new to Dreamweaver, this book explains in detail how to take advantage of the new features available in the latest releases of Dreamweaver that add support for HTML5, CSS3, and jQuery. In addition to this, the book also contains detailed step-by-step directions for building mobile apps in Dreamweaver CS5.5. This book starts off by teaching you to create web pages in Dreamweaver using the latest technology and approaches - HTML5, CSS3, and JavaScript. It demonstrates how to create or customize pages with HTML5 layouts and add multimedia to these pages with HTML5 elements. Then you will learn to add various CSS3 effects to web pages. The book also covers different techniques of adding interactivity to web pages. The later chapters show how to optimize web pages with Dreamweaver for display in various browsing environments. You will also learn to build jQuery-based mobile apps from scratch in the later chapters. By the time you're finished, you'll have learned several techniques to use the latest features of Dreamweaver for web and mobile development. Approach This book combines accessible, clear, engaging and candid reference material, advice and shortcuts with substantial step-by-step instructions for creating a wide range of HTML5 and CSS3 designs and page content in Dreamweaver. Who this book is for This book is geared towards experienced Dreamweaver web designers migrating to HTML5 and jQuery. It also targets web designers new to Dreamweaver who want to jump with two feet into the most current Web design tools and features. While focused primarily on Dreamweaver CS5.5, the book includes content of value to readers using older versions of Dreamweaver with directions on installing a version of Adobe's HTML5 Pack that updates those packages. Cover 1 Copyright 3 Credits 4 About the Author 5 About the Reviewers 6 www.PacktPub.com 8 Table of Contents 10 Preface 18 Chapter 1: Creating HTML5 Pages in Dreamweaver 22 HTML5 and Dreamweaver CS5 in the world of web design 23 HTML5—the cutting edge of web design 23 HTML4.1, XHTML, and HTML5 24 Compatibility issues with HTML5 25 HTML5 and Dreamweaver CS5.5 26 Dreamweaver generates code 26 Dreamweaver—catching up to HTML5 28 An introduction to HTML5 layout elements 28 The evolution of HTML layout elements 29 Phase 1: Tables 29 Phase 2: CSS DIV tags 30 Phase 3: HTML5 layout elements 32 Meet the HTML5 layout elements 32 Dreamweaver's HTML5 Pack and design elements 33 Detecting or installing the HTML5 Pack in Dreamweaver 34 Creating a Dreamweaver site 36 Generating new pages from layouts using the HTML5 templates 38 Examining the generated HTML5 layout 40 Toggling between related files 40 Code, Split, and Design views 41 Dissecting design elements with the Inspect Mode 42 Saving a layout as a web page 43 Recipe: Creating and saving a 3-column HTML5 page 44 Summary 46 Chapter 2: Customizing HTML5 Layout–Content and Look 48 Customizing layouts – An overview 49 Embedding content where it belongs 49 Dissecting format 49 Editing content in HTML5 page layout elements 51 HTML text tags versus HTML5 layout elements 51 Organizing content in containers 52 Utilizing Split view for editing content 53 Adding articles and sections 54 Identifying and selecting HTML5 layout elements 55 Copying, pasting, and deleting HTML5 Elements 56 Identifying style rules 57 HTML5 layout elements require styles 57 Examining CSS associated with HTML5 layouts 59 Customizing HTML tag rules 60 Making quick changes to styles in the CSS styles panel 61 The CSS rules definition dialog 62 Editing type styles 62 Editing backgrounds 63 Preview with apply 63 Saving customized HTML5 layouts 64 Recipe: Customize content and look of an HTML5 page 65 Summary 67 Chapter 3: Customizing HTML5 Layout Elements 68 HTML5 layout and browser compatibility challenges 70 Which browsers support HTML5 layout elements? 70 Using CSS to solve browser issues 70 The magic of display:block 71 Disabling a CSS rule 72 Global HTML5 layout element attributes 75 Working with backgrounds 75 Defining size, margins, and padding 77 Assigning a page size 78 Margins versus padding 78 Element padding versus content margins 79 Positioning with float 79 Customizing HTML5 elements 80 Back to the future: ID and class styles 81 Layout with class styles 81 The role of ID styles 82 Recipes: Customizing the HTML5 page layout 82 Recipe: Customizing the size and position for header, footer, nav, and aside 83 Customizing links in the nav element 86 Summary 91 Chapter 4: Building HTML5 Pages from Scratch 92 Dreamweaver CS5 and HTML5 93 Building an HTML5 page from the top 94 HTML5 structural elements 94 Creating a CSS file 96 Using HTML5 to make content accessible 100 HTML5 layout strategy 102 Using code hints 103 Adding header, header nav, and hgroup 104 Navigation within a header 104 Organizing header content with hgroups 104 Creating articles and sections 105 Adding aside content 107 Creating a footer 108 Adding metadata 109 Defining an address 109 Figures and captions 110 Indicating date and time 110 Recipe Part 1: Build a stylesheet for an HTML5 page layout 111 Recipe Part 2: Build an HTML5 layout from scratch 114 Summary 118 Chapter 5: Defining and Implementing Multiscreen Previews and Media Queries 120 Web design for a multimedia web world 121 CSS3 and Media Queries 122 Styling for mobile devices and tablets 123 Previewing with the Multiscreen Preview 124 Generating a Media Query in Dreamweaver 126 Building alternative style sheets 127 A 3-step protocol for preparing to generate a Media Query 127 Assigning styles to different media 128 Formatting CSS files for Media Queries 130 Caution: Don't delete style rules 132 Styling for mobile devices 132 Troubleshooting for Apple i-Gadgets 134 Exercise: Defining a Media Query for a cell phone 136 Summary 139 Chapter 6: Applying CSS3 Effects and Transforms 140 New in CSS3: Effects and transforms 141 Compatibility challenges 142 CSS3 styles in Dreamweaver's HTML5 Pack 145 CSS3 effects 147 Opacity 148 Border radius 150 Shadows 153 Box shadow 153 Text shadow 154 Text outline 155 CSS3 transforms 156 When to use transforms 157 How to generate transition coding in Dreamweaver 157 Resizing with scale 158 Moving with translate 159 Applying rotation 160 Creating a skew transition 161 Other CS3 transform effects 162 Compound transforms 162 Interactive effects and transforms 162 Effects and JavaScript 163 Interactivity with the :hover pseudo-class 163 Animating CSS3 transforms in Dreamweaver 164 Recipe: Create an animated effect and transform 165 Putting the pieces in place 165 Summary 171 Chapter 7: Embedding HTML5 Audio in Dreamweaver 172 Audio and compatibility 173 Laying the groundwork: HTML5 and page-building 174 Making audio HTML5-ready 174 Audio compression 174 Browser support for audio files 175 Embedding an HTML5 audio element in a Dreamweaver CS5 web page 176 Alternative media options 178 Providing alternative HTML5 audio formats 178 Audio for non-HTML5 browsers 179 Adding play parameters 179 Recipe: Embedding HTML5 audio 181 Summary 183 Chapter 8: Embedding HTML5 Video in Dreamweaver 184 HTML5 video and Dreamweaver CS5.5 184 Early formats 185 Flash Video (FLV) 186 Apple devices and the web video 187 The wild world of native videos 189 Native video formats 189 Browsers that do NOT support HTML5 189 Preparing an HTML5 video for every scenario 190 Compressing videos for the Web 190 Video compression—open source and proprietary 191 Converting a video to web formats with open source tools 191 Creating an HTML5 video in Adobe Media Encoder CS5. 5 193 Dreamweaver site management for an HTML5 video 195 Defining the HTML5 element 196 Prerequisites 196 Creating the element 197 Defining video attributes 197 Defining video source(s) 198 Alternate video for non-HTML5 environments 199 Putting it all together 199 Testing HTML5 video pages 199 Previewing a video in the Live View 200 Previewing a video in BrowserLab 200 Recipe: Embedding an HTML5 video 201 Summary 204 Chapter 9: Creating Mobile Pages with jQuery 206 Mobile pages – An overview 207 Mobile pages, apps, and jQuery Mobile 209 The status of jQuery Mobile 210 Using jQuery Mobile starter pages 210 Creating mobile pages from Dreamweaver CS5.5 starters 211 Mobile pages in Split view 212 Previewing jQuery Mobile pages in Live view 214 Customizing mobile page content 216 The HTML5 data-role property 216 Data-role pages 216 Customizing page content 218 Customizing content for different data roles 219 Adding new jQuery Mobile pages and objects 220 Creating new data-role pages by copying code 220 Creating new data-role pages from the menu 222 Customizing mobile page CSS styles 222 Default jQuery Mobile CSS 224 Editing jQuery Mobile CSS 224 Applying and customizing themes 225 Looking ahead: Generating mobile apps 227 Recipe: Build a mobile web page with jQuery Mobile objects 227 Summary 233 Chapter 10: Adding jQuery Mobile Elements 234 Creating jQuery Mobile pages from scratch 235 Interface options 235 Step 1 – Creating an HTML5 page 236 Step 2 – Inserting a jQuery Mobile "page" 237 Inserting a Layout Grid 240 Defining styles for Layout Grids 242 Designing mobile pages into a collapsible block 243 Building a collapsible block 243 Changing initial block state 244 Changing block data-themes and styles 245 Editing Collapsible Block HTML 246 Adding jQuery form objects 247 Forms in Dreamweaver 248 Creating a jQuery Mobile form 249 Special mobile form fields 251 Inserting a text input field 252 Inserting a slider 252 Inserting a toggle switch 253 Formatting jQuery Mobile Form Fields 253 Recipe: Build a page with collapsible blocks and a form 254 Summary 260 Chapter 11: Generating Apps 262 Generating apps from Dreamweaver—an overview 262 Advantage: App vs web page 263 PhoneGap and Dreamweaver CS5.5 264 Configuring application framework(s) 264 The App toolkits 265 Installing the frameworks 265 Defining mobile application settings 266 Building and emulating apps 268 Testing mobile apps on your computer 269 Recipe: Building and emulating a mobile app 271 Summary 273 Index 274 With this book and your knowledge of Dreamweaver you'll be able to confidently enter the brave new world of HTML5, CSS3, and jQuery. Learning is easy thanks to a hands-on, step-by-step approach. Overview Create web pages in Dreamweaver using the latest technology and approach Add multimedia and interactivity to your websites Optimize your websites for a wide range of platforms and build mobile apps with Dreamweaver A practical guide filled with many examples for making the best use of Dreamweaver's latest features What you will learn from this book Use and customize the content of Dreamweaver's HTML5 layouts Dissect and customize the CSS styles that control HTML5 layouts Create sites that use the styling and content tools in Dreamweaver to their full potential Implement multiscreen previews and media queries to create sites for desktops, mobiles, and tablets Apply new CSS3 effects with Dreamweaver code hints and enhanced CSS Styles panel Add multimedia to web pages with HTML5 elements Create jQuery Mobile-based web pages from scratch Build and emulate mobile apps with Dreamweaver Approach This book combines accessible, clear, engaging and candid reference material, advice and shortcuts with substantial step-by-step instructions for creating a wide range of HTML5 and CSS3 designs and page content in Dreamweaver. Who this book is written for This book is geared towards experienced Dreamweaver web designers migrating to HTML5 and jQuery. It also targets web designers new to Dreamweaver who want to jump with two feet into the most current Web design tools and features. While focused primarily on Dreamweaver CS5.5, the book includes content of value to readers using older versions of Dreamweaver with directions on installing a version of Adobe's HTML5 Pack that updates those packages. In Detail Microsoft Forefront Unified Access Gateway (UAG) is the latest in a line of Application Publishing (Reverse Proxy) and Remote Dreamweaver is the most powerful and industry-leading web design software that utilizes cutting edge web technologies such as HTML5, CSS3, and jQuery for web and mobile development. These technologies have radically reconfigured the process of designing Web content and function in the widest possible range of browsing environments ranging from desktops to mobile devices.For experienced Dreamweaver designers and for designers new to Dreamweaver, this book explains in detail how to take advantage of the new features available in the latest releases of Dreamweaver that add support for HTML5, CSS3, and jQuery. In addition to this, the book also contains detailed step-by-step directions for building mobile apps in Dreamweaver CS5.5.This book starts off by teaching you to create web pages in Dreamweaver using the latest technology and approaches ‚Äî HTML5, CSS3, and JavaScript. It demonstrates how to create or customize pages with HTML5 layouts and add multimedia to these pages with HTML5 elements. Then you will learn to add various CSS3 effects to web pages. The book also covers different techniques of adding interactivity to web pages. The later chapters show how to optimize web pages with Dreamweaver for display in various browsing environments. You will also learn to build jQuery-based mobile apps from scratch in the later chapters. By the time you're finished, you'll have learned several techniques to use the latest features of Dreamweaver for web and mobile development.