Dreamweaver CS 5.5 Mobile & Web Development with HTML 5,CSS, & JQuery  (English, Paperback, Karlins David)

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.

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.

About the Author
David Karlins is the author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques (Adobe Press, 2010) along with dozens of other books and videos on web, and digital graphic and interactive design. His articles and reviews appear in publications ranging from Macworld to Business Wee, and David’s consulting and design clients have ranged from Hewlett-Packard to the Himalayan Fair. His classes and seminars in New York City and the San Francisco Bay Area explore themes ranging from effective intranet culture to Web strategies for periodicals.

Table of Contents
Preface

Chapter 1: Creating HTML5 Pages in Dreamweaver

• HTML5 and Dreamweaver CS5 in the world of web design
• HTML5—the cutting edge of web design
• HTML4.1, XHTML, and HTML5
• Compatibility issues with HTML5
• HTML5 and Dreamweaver CS5.5
• Dreamweaver generates code
• Dreamweaver—catching up to HTML5
• An introduction to HTML5 layout elements
• The evolution of HTML layout elements
• Phase 1: Tables
• Phase 2: CSS DIV tags
• Phase 3: HTML5 layout elements
• Meet the HTML5 layout elements
• Dreamweaver's HTML5 Pack and design elements
• Detecting or installing the HTML5 Pack in Dreamweaver
• Creating a Dreamweaver site
• Generating new pages from layouts using the HTML5 templates
• Examining the generated HTML5 layout
• Toggling between related files
• Code, Split, and Design views
• Dissecting design elements with the Inspect Mode
• Saving a layout as a web page
• Recipe: Creating and saving a 3-column HTML5 page
• Summary

Chapter 2: Customizing HTML5 Layout–Content and Look

• Customizing layouts – An overview
• Embedding content where it belongs
• Dissecting format
• Editing content in HTML5 page layout elements
• HTML text tags versus HTML5 layout elements
• Organizing content in containers
• Utilizing Split view for editing content
• Adding articles and sections
• Identifying and selecting HTML5 layout elements
• Copying, pasting, and deleting HTML5 Elements
• Identifying style rules
• HTML5 layout elements require styles
• Examining CSS associated with HTML5 layouts
• Customizing HTML tag rules
• Making quick changes to styles in the CSS styles panel
• The CSS rules definition dialog
• Editing type styles
• Editing backgrounds
• Preview with apply
• Saving customized HTML5 layouts
• Recipe: Customize content and look of an HTML5 page
• Summary

Chapter 3: Customizing HTML5 Layout Elements

• HTML5 layout and browser compatibility challenges
• Which browsers support HTML5 layout elements?
• Using CSS to solve browser issues
• The magic of display: block
• Disabling a CSS rule
• Global HTML5 layout element attributes
• Working with backgrounds
• Defining size, margins, and padding
• Assigning a page size
• Margins versus padding
• Element padding versus content margins
• Positioning with float
• Customizing HTML5 elements
• Back to the future: ID and class styles
• Layout with class styles
• The role of ID styles
• Recipe: Customizing the HTML5 page layout
• Recipe: Customizing the size and position for header,
• footer, nav, and aside
• Customizing links in the nav element
• Summary

Chapter 4: Building HTML5 Pages from Scratch

• Dreamweaver CS5 and HTML5
• Building an HTML5 page from the top
• HTML5 structural elements
• Creating a CSS file
• Using HTML5 to make content accessible
• HTML5 layout strategy
• Using code hints
• Adding header, header nav, and hgroup
• Navigation within a header
• Organizing header content with hgroups
• Creating articles and sections
• Adding aside content
• Creating a footer
• Adding metadata
• Defining an address
• Figures and captions
• Indicating date and time
• Recipe Part 1: Build a style sheet for an HTML5 page layout
• Recipe Part 2: Build an HTML5 layout from scratch
• Summary

Chapter 5: Defining and Implementing Multiscreen

• Previews and Media Queries
• Web design for a multimedia web world
• CSS3 and Media Queries
• Styling for mobile devices and tablets
• Previewing with the Multiscreen Preview
• Generating a Media Query in Dreamweaver
• Building alternative style sheets
• A 3-step protocol for preparing to generate a Media Query
• Assigning styles to different media
• Formatting CSS files for Media Queries
• Caution: Don't delete style rules
• Styling for mobile devices
• Troubleshooting for Apple i-Gadgets
• Exercise: Defining a Media Query for a cell phone
• Summary

Chapter 6: Applying CSS3 Effects and Transforms

• New in CSS3: Effects and transforms
• Compatibility challenges
• CSS3 styles in Dreamweaver's HTML5 Pack
• CSS3 effects
• Opacity
• Border radius
• Shadows
• Box shadow
• Text shadow
• Text outline
• CSS3 transforms
• When to use transforms
• How to generate transition coding in Dreamweaver
• Resizing with scale
• Moving with translate
• Applying rotation
• Creating a skew transition
• Other CS3 transform effects
• Compound transforms
• Interactive effects and transforms
• Effects and JavaScript
• Interactivity with the :hover pseudo-class
• Animating CSS3 transforms in Dreamweaver
• Recipe: Create an animated effect and transform
• Putting the pieces in place
• Summary

Chapter 7: Embedding HTML5 Audio in Dreamweaver

• Audio and compatibility
• Laying the groundwork: HTML5 and page-building
• Making audio HTML5-ready
• Audio compression
• Browser support for audio files
• Embedding an HTML5 audio element in a Dreamweaver CS5 web page
• Alternative media options
• Providing alternative HTML5 audio formats
• Audio for non-HTML5 browsers
• Adding play parameters
• Recipe: Embedding HTML5 audio
• Summary

Chapter 8: Embedding HTML5 Video in Dreamweaver

• HTML5 video and Dreamweaver CS5.5
• Early formats
• Flash Video (FLV)
• Apple devices and the web video
• The wild world of native videos
• Native video formats
• Browsers that do NOT support HTML5
• Preparing an HTML5 video for every scenario
• Compressing videos for the Web
• Video compression—open source and proprietary
• Converting a video to web formats with open source tools
• Creating an HTML5 video in Adobe Media Encoder CS5. 5
• Dreamweaver site management for an HTML5 video
• Defining the HTML5 <Video> element
• Prerequisites
• Creating 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 the Live View
• Previewing a video in Browser Lab
• Recipe: Embedding an HTML5 video
• Summary

Chapter 9: Creating Mobile Pages with jQuery

• Mobile pages – An overview
• Mobile pages, apps, and jQuery Mobile
• The status of jQuery Mobile
• Using jQuery Mobile starter pages
• Creating mobile pages from Dreamweaver CS5.5 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
• Creating new data-role pages by copying code
• Creating new data-role pages from the menu
• Customizing mobile page CSS styles
• Default jQuery Mobile CSS
• Editing jQuery Mobile CSS
• Applying and customizing themes
• Looking ahead: Generating mobile apps
• Recipe: Build a mobile web page with jQuery Mobile objects
• Summary

Chapter 10: Adding jQuery Mobile Elements

• Creating jQuery Mobile pages from scratch
• Interface options
• Step 1 – Creating an HTML5 page
• Step 2 – Inserting a jQuery Mobile "page"
• Inserting a Layout Grid
• Defining styles for Layout Grids
• Designing mobile pages into a collapsible block
• Building a collapsible block
• Changing 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
• Formatting jQuery Mobile Form Fields
• Recipe: Build a page with collapsible blocks and a form
• Summary

Chapter 11: Generating Apps

• Generating apps from Dreamweaver—an overview
• Advantage: App vs web page
• PhoneGap and Dreamweaver CS5.5
• Configuring application framework(s)
• The App toolkits
• Installing the frameworks
• Defining mobile application settings
• Building and emulating apps
• Testing mobile apps on your computer
• Recipe: Building and emulating a mobile app
• Summary

Index