Table of Contents
Preface
Chapter 1: Creating HTML5 Pages in Dreamweaver
Chapter 2: Customizing HTML5 Layout–Content and Look
Chapter 3: Customizing HTML5 Layout Elements
Chapter 4: Building HTML5 Pages from Scratch
Chapter 5: Defining and Implementing Multiscreen Previews and Media Queries
Chapter 6: Applying CSS3 Effects and Transforms
Chapter 7: Embedding HTML5 Audio in Dreamweaver
Chapter 8: Embedding HTML5 Video in Dreamweaver
Chapter 9: Creating Mobile Pages with jQuery
Chapter 10: Adding jQuery Mobile Elements
Chapter 11: Generating Apps
Index
- 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 BrowserLab
- 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
Book backreference:
