O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile

Book Description

Harness the cutting edge features of Dreamweaver for mobile and web development

  • A basic, compressed, updated introduction to building advanced web sites with Dreamweaver
  • A focused exploration of employing cutting edge HTML5 techniques such as native media
  • An in-depth explanation of how to build inviting, accessible mobile sites with Dreamweaver CS6, responsive design, and jQuery Mobile

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.

"Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile" is essentially three books in one: an introduction to building websites; Dreamweaver CS6: HTML5, CSS3, Responsive Design; and an in-depth explanation of how to build inviting, accessible mobile sites with Dreamweaver CS6, responsive design, and jQuery Mobile.

This book serves both as the essential reference for Dreamweaver CS6, and a valuable addition to even the most extensive set of resources for modern web design, with or without Dreamweaver.

The book starts off by teaching you to create sites and pages with Dreamweaver CS6 and how to use HTML5 for page structure. Then we will learn some cutting-edge design and animation with CSS3.

The book also shows how to create and enhance mobile sites with jQuery Mobile. You will also learn to customize themes with ThemeRoller.

"Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile Mobile" covers the entire spectrum of web design with Dreamweaver, with an emphasis on multi-media (full screen and mobile) design and jQuery Mobile.

Table of Contents

  1. Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
    1. Table of Contents
    2. Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Errata
        2. Piracy
        3. Questions
    8. 1. Creating Sites and Pages with Dreamweaver CS6
      1. Defining a Dreamweaver site
        1. Defining a local site
        2. Defining a remote site
        3. Transferring files between a local and remote site
      2. Creating an HTML5 page
      3. Creating the text content
        1. Applying headings
        2. Adding paragraphs, lists, and links
        3. Inserting images
      4. Linking to a stylesheet
        1. Creating and linking to an external stylesheet
        2. Linking a stylesheet to an HTML file
          1. Define the Body tag's style
        3. Define a wrapper ID style
      5. Summary
    9. 2. Using HTML5 for Page Structure
      1. Structuring pages with HTML5
        1. HTML5 structural elements
        2. Breaking down HTML5 page code
      2. Using HTML5 structure elements
      3. Using Code Hints
      4. Adding header, nav, and hgroup
      5. Creating articles and sections
      6. Adding aside content
      7. Creating a footer
      8. An HTML5 layout template
      9. Adding metadata
        1. Defining an address
        2. Figures and captions
        3. Indicating date and time
        4. Creating a CSS file for HTML5 page structure
        5. Assigning a block property
        6. Defining styles
      10. Solving HTML5 compatibility challenges
      11. Summary
    10. 3. Collecting Data with Forms
      1. Capturing client-side form management with JavaScript
        1. Creating a jump menu
        2. Editing Jump Menu JavaScript
      2. Defining the form and form action
      3. Generating form fields with Spry validation
        1. Creating a validated text field
        2. Creating a validated e-mail field
        3. Adding other fields
        4. Adding Submit and Reset buttons
      4. Prompting with HTML5
      5. Designing CSS for forms
        1. Creating a stylesheet for form elements
        2. Creating styles for form elements
        3. Creating ID styles for a form
        4. Thoughts on form styles
      6. Real-world form handling
      7. Summary
    11. 4. Applying CSS3 Effects and Transforms
      1. New in CSS3–effects and transforms
        1. Compatibility challenges
        2. CSS3 styles in Dreamweaver CS6
      2. CSS3 effects
        1. Defining opacity
        2. Border radius
        3. Shadows
          1. Box shadow
          2. Text shadow
          3. Creating a text outline
      3. CSS3 transforms
        1. When to use transforms
        2. How to generate transition coding in Dreamweaver CS6
        3. Resizing with scale
        4. Moving with translate
        5. Applying rotation
        6. Creating a skew transition
        7. Other CSS3 transform effects
        8. Compound transforms
      4. Interactive effects and transforms
        1. Limitations of using effects with JavaScript
        2. Interactivity with the :hover pseudo-class
        3. Animating CSS3 transforms in Dreamweaver
      5. Example – create an animated effect and transform
        1. Putting the pieces in place
        2. Using a hover class style to animate effects
      6. Summary
    12. 5. Embedding HTML5 Native Audio and Video
      1. Native media and compatibility
      2. Laying the groundwork
      3. Preparing native audio
        1. Audio compression
        2. Browser support for audio files
      4. Embedding an HTML5 audio element in a Dreamweaver web page
        1. Alternative audio options
        2. Adding play parameters
      5. Embedding HTML5 audio
      6. Embedding native video
        1. HTML5 video and Dreamweaver
          1. Early video formats
          2. Flash video (FLV)
          3. Apple devices and web video
        2. Preparing native video files
          1. Native video formats
          2. Browsers that do NOT support HTML5
          3. Preparing HTML5 video for every scenario
        3. Compressing video for the Web
          1. Video compression – open source and proprietary
          2. Converting video to web formats with open source tools
        4. Dreamweaver site management for HTML5 video
        5. Defining the HTML5 <video> element
          1. Prerequisites
          2. Defining the <video> element
          3. Defining video attributes
          4. Defining video source(s)
          5. Alternate video for non-HTML5 environments
          6. Putting it all together
        6. Testing HTML5 video pages
          1. Previewing a video in Live View
      7. Embedding an HTML5 video
      8. Summary
    13. 6. Responsive Design with Media Queries
      1. Web design for a multimedia web world
        1. How Media Queries work
        2. A short history of Media Queries
        3. HTML5, CSS3, and Media Queries
        4. Styling for mobile devices and tablets
        5. Media Queries versus jQuery Mobile and apps
      2. Previewing with Multiscreen Preview
      3. Generating a Media Query in Dreamweaver CS6
        1. Building alternative stylesheets
        2. Preparing to generate a Media Query
        3. Assigning styles to different media
      4. Formatting CSS files for Media Queries
      5. Adjusting CSS for Mobile
      6. Defining a Media Query for smartphones
      7. Surveying alternative approaches
      8. Summary
    14. 7. Creating Mobile Pages with jQuery Mobile
      1. Mobile pages – an overview
        1. Mobile pages, apps, and jQuery Mobile
        2. What is jQuery Mobile?
      2. Creating mobile pages from Dreamweaver starters
        1. Mobile pages in Split view
        2. Previewing jQuery Mobile pages in Live view
      3. Customizing Mobile page content
        1. The HTML5 data-role property
        2. Data-role pages
        3. Customizing page content
        4. Customizing content for different data roles
      4. Adding new jQuery Mobile pages and objects
      5. Styling with theme swatches
        1. Applying themes
        2. Editing CSS in jQuery Mobile pages
      6. Example – build a mobile web page with jQuery Mobile objects
      7. Summary
    15. 8. Enhancing Mobile Sites
      1. Inserting a layout grid
        1. Tables, div tags, and grids
        2. Generating grids in Dreamweaver
        3. Defining styles for layout grids
      2. Designing Mobile Pages with collapsible blocks
        1. Building a collapsible block
        2. Changing the initial block state
        3. Changing block data-themes and styles
        4. Editing collapsible block HTML
      3. Adding jQuery form objects
        1. Forms in Dreamweaver
        2. Creating a jQuery Mobile form
        3. Special mobile form fields
          1. Inserting a text input field
          2. Inserting a slider
          3. Inserting a toggle switch
      4. Building a page with collapsible blocks and a mobile-friendly form
      5. Summary
    16. 9. Customizing Themes with ThemeRoller
      1. Applying jQuery Mobile theme swatches
        1. Examining the five data-themes
        2. Applying themes to specific elements
      2. Customizing themes with ThemeRoller
        1. The aesthetics of mobile color schemes
        2. Launching ThemeRoller
        3. Defining global theme attributes
        4. Defining custom swatches
        5. Creating additional swatches
      3. Rolling a theme
      4. Applying a custom theme in Dreamweaver
      5. Summary
    17. 10. Building Apps with PhoneGap
      1. Apps and mobile websites
        1. Android and iOS
        2. Understanding PhoneGap
        3. Before building apps
          1. Creating a PhoneGap Build service account
          2. Downloading the Android SDK
        4. PhoneGap and Dreamweaver
        5. Configuring PhoneGap settings
      2. Generating apps with Dreamweaver
      3. Testing and distributing apps
        1. Testing apps with an emulator
        2. Revising your app
        3. Scanning apps into your Android device
        4. Downloading apps
        5. Distributing Apps
      4. Summary
    18. Index