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 CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

Book Description

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.

  • 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

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.

Table of Contents

  1. Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
  2. Credits
  3. About the Author
  4. About the Reviewers
  5. www.PacktPub.com
    1. Support files, eBooks, discount offers and more
      1. Why Subscribe?
      2. Free Access for Packt account holders
  6. 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
  7. 1. Creating HTML5 Pages in Dreamweaver
    1. HTML5 and Dreamweaver CS5 in the world of web design
      1. HTML5—the cutting edge of web design
        1. HTML4.1, XHTML, and HTML5
        2. Compatibility issues with HTML5
    2. HTML5 and Dreamweaver CS5.5
      1. Dreamweaver generates code
      2. Dreamweaver—catching up to HTML5
    3. An introduction to HTML5 layout elements
      1. The evolution of HTML layout elements
        1. Phase 1: Tables
        2. Phase 2: CSS DIV tags
        3. Phase 3: HTML5 layout elements
      2. Meet the HTML5 layout elements
    4. Dreamweaver's HTML5 Pack and design elements
    5. Detecting or installing the HTML5 Pack in Dreamweaver
    6. Creating a Dreamweaver site
    7. Generating new pages from layouts using the HTML5 templates
    8. Examining the generated HTML5 layout
      1. Toggling between related files
      2. Code, Split, and Design views
      3. Dissecting design elements with the Inspect Mode
    9. Saving a layout as a web page
    10. Recipe: Creating and saving a 3-column HTML5 page
    11. Summary
  8. 2. Customizing HTML5 Layout–Content and Look
    1. Customizing layouts – An overview
      1. Embedding content where it belongs
      2. Dissecting format
    2. Editing content in HTML5 page layout elements
      1. HTML text tags versus HTML5 layout elements
      2. Organizing content in containers
      3. Utilizing Split view for editing content
      4. Adding articles and sections
        1. Identifying and selecting HTML5 layout elements
        2. Copying, pasting, and deleting HTML5 Elements
    3. Identifying style rules
      1. HTML5 layout elements require styles
      2. Examining CSS associated with HTML5 layouts
    4. Customizing HTML tag rules
      1. Making quick changes to styles in the CSS styles panel
      2. The CSS rules definition dialog
        1. Editing type styles
        2. Editing backgrounds
        3. Preview with apply
    5. Saving customized HTML5 layouts
    6. Recipe: Customize content and look of an HTML5 page
    7. Summary
  9. 3. Customizing HTML5 Layout Elements
    1. HTML5 layout and browser compatibility challenges
      1. Which browsers support HTML5 layout elements?
      2. Using CSS to solve browser issues
        1. The magic of display:block
        2. Disabling a CSS rule
    2. Global HTML5 layout element attributes
      1. Working with backgrounds
      2. Defining size, margins, and padding
        1. Assigning a page size
        2. Margins versus padding
        3. Element padding versus content margins
      3. Positioning with float
    3. Customizing HTML5 elements
    4. Back to the future: ID and class styles
      1. Layout with class styles
      2. The role of ID styles
    5. Recipe: Customizing the HTML5 page layout
      1. Recipe: Customizing the size and position for header, footer, nav, and aside
      2. Customizing links in the nav element
    6. Summary
  10. 4. Building HTML5 Pages from Scratch
    1. Dreamweaver CS5 and HTML5
    2. Building an HTML5 page from the top
      1. HTML5 structural elements
      2. Creating a CSS file
    3. Using HTML5 to make content accessible
    4. HTML5 layout strategy
    5. Using code hints
    6. Adding header, header nav, and hgroup
      1. Navigation within a header
      2. Organizing header content with hgroups
    7. Creating articles and sections
    8. Adding aside content
    9. Creating a footer
    10. Adding metadata
      1. Defining an address
      2. Figures and captions
      3. Indicating date and time
    11. Recipe Part 1: Build a style sheet for an HTML5 page layout
    12. Recipe Part 2: Build an HTML5 layout from scratch
    13. Summary
  11. 5. Defining and Implementing Multiscreen Previews and Media Queries
    1. Web design for a multimedia web world
      1. CSS3 and Media Queries
      2. Styling for mobile devices and tablets
    2. Previewing with the Multiscreen Preview
    3. Generating a Media Query in Dreamweaver
      1. Building alternative style sheets
      2. A 3-step protocol for preparing to generate a Media Query
      3. Assigning styles to different media
    4. Formatting CSS files for Media Queries
      1. Caution: Don't delete style rules
      2. Styling for mobile devices
    5. Troubleshooting for Apple i-Gadgets
    6. Exercise: Defining a Media Query for a cell phone
    7. Summary
  12. 6. Applying CSS3 Effects and Transforms
    1. New in CSS3: Effects and transforms
      1. Compatibility challenges
      2. CSS3 styles in Dreamweaver's HTML5 Pack
    2. CSS3 effects
      1. Opacity
      2. Border radius
      3. Shadows
        1. Box shadow
        2. Text shadow
        3. Text outline
    3. CSS3 transforms
      1. When to use transforms
      2. How to generate transition coding in Dreamweaver
      3. Resizing with scale
      4. Moving with translate
      5. Applying rotation
      6. Creating a skew transition
      7. Other CS3 transform effects
      8. Compound transforms
    4. Interactive effects and transforms
      1. Effects and JavaScript
      2. Interactivity with the :hover pseudo-class
      3. Animating CSS3 transforms in Dreamweaver
    5. Recipe: Create an animated effect and transform
      1. Putting the pieces in place
    6. Summary
  13. 7. Embedding HTML5 Audio in Dreamweaver
    1. Audio and compatibility
    2. Laying the groundwork: HTML5 and page-building
    3. Making audio HTML5-ready
      1. Audio compression
      2. Browser support for audio files
    4. Embedding an HTML5 audio element in a Dreamweaver CS5 web page
    5. Alternative media options
      1. Providing alternative HTML5 audio formats
      2. Audio for non-HTML5 browsers
      3. Adding play parameters
    6. Recipe: Embedding HTML5 audio
    7. Summary
  14. 8. Embedding HTML5 Video in Dreamweaver
    1. HTML5 video and Dreamweaver CS5.5
      1. Early formats
      2. Flash Video (FLV)
      3. Apple devices and the web video
    2. The wild world of native videos
      1. Native video formats
      2. Browsers that do NOT support HTML5
    3. Preparing an HTML5 video for every scenario
    4. Compressing videos for the Web
      1. Video compression—open source and proprietary
      2. Converting a video to web formats with open source tools
      3. Creating an HTML5 video in Adobe Media Encoder CS5. 5
      4. Dreamweaver site management for an HTML5 video
      5. Defining the HTML5 <video> element
        1. Prerequisites
        2. Creating 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 the Live View
        2. Previewing a video in BrowserLab
      7. Recipe: Embedding an HTML5 video
      8. Summary
  15. 9. Creating Mobile Pages with jQuery
    1. Mobile pages – An overview
      1. Mobile pages, apps, and jQuery Mobile
      2. The status of jQuery Mobile
      3. Using jQuery Mobile starter pages
    2. Creating mobile pages from Dreamweaver CS5.5 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
        1. Data-role pages
        2. Customizing page content
        3. Customizing content for different data roles
    4. Adding new jQuery Mobile pages and objects
      1. Creating new data-role pages by copying code
      2. Creating new data-role pages from the menu
    5. Customizing mobile page CSS styles
      1. Default jQuery Mobile CSS
      2. Editing jQuery Mobile CSS
      3. Applying and customizing themes
    6. Looking ahead: Generating mobile apps
    7. Recipe: Build a mobile web page with jQuery Mobile objects
    8. Summary
  16. 10. Adding jQuery Mobile Elements
    1. Creating jQuery Mobile pages from scratch
      1. Interface options
      2. Step 1 – Creating an HTML5 page
      3. Step 2 – Inserting a jQuery Mobile "page"
    2. Inserting a Layout Grid
      1. Defining styles for Layout Grids
    3. Designing mobile pages into a collapsible block
      1. Building a collapsible block
        1. Changing initial block state
        2. Changing block data-themes and styles
        3. Editing Collapsible Block HTML
    4. 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. Formatting jQuery Mobile Form Fields
    5. Recipe: Build a page with collapsible blocks and a form
    6. Summary
  17. 11. Generating Apps
    1. Generating apps from Dreamweaver—an overview
      1. Advantage: App vs web page
      2. PhoneGap and Dreamweaver CS5.5
    2. Configuring application framework(s)
    3. The App toolkits
      1. Installing the frameworks
    4. Defining mobile application settings
    5. Building and emulating apps
    6. Testing mobile apps on your computer
    7. Recipe: Building and emulating a mobile app
    8. Summary