Book Image

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

By : DAVID KARLINS
Book Image

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

By: DAVID KARLINS

Overview of this book

<p>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.<br /><br />"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.<br /><br />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.<br /><br />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. <br /><br />The book also shows how to create and enhance mobile sites with jQuery Mobile. You will also learn to customize themes with ThemeRoller.<br /><br />"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.</p>

Related Content you might be interested in

Current Title:

Small book image
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
DAVID KARLINS
May, 2013 | 268 pages
No titles found
Table of Contents (17 chapters)
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Creating Sites and Pages with Dreamweaver CS6
Creating Sites and Pages with Dreamweaver CS6
Defining a Dreamweaver site
Creating an HTML5 page
Creating the text content
Linking to a stylesheet
Summary
2
Using HTML5 for Page Structure
Using HTML5 for Page Structure
Structuring pages with HTML5
Using HTML5 structure elements
Using Code Hints
Adding header, nav, and hgroup
Creating articles and sections
Adding aside content
Creating a footer
An HTML5 layout template
Adding metadata
Solving HTML5 compatibility challenges
Summary
3
Collecting Data with Forms
Collecting Data with Forms
Capturing client-side form management with JavaScript
Defining the form and form action
Generating form fields with Spry validation
Prompting with HTML5
Designing CSS for forms
Real-world form handling
Summary
4
Applying CSS3 Effects and Transforms
Applying CSS3 Effects and Transforms
New in CSS3–effects and transforms
CSS3 effects
CSS3 transforms
Interactive effects and transforms
Example – create an animated effect and transform
Summary
5
Embedding HTML5 Native Audio and Video
Embedding HTML5 Native Audio and Video
Native media and compatibility
Laying the groundwork
Preparing native audio
Embedding an HTML5 audio element in a Dreamweaver web page
Embedding HTML5 audio
Embedding native video
Embedding an HTML5 video
Summary
6
Responsive Design with Media Queries
Responsive Design with Media Queries
Web design for a multimedia web world
Previewing with Multiscreen Preview
Generating a Media Query in Dreamweaver CS6
Formatting CSS files for Media Queries
Adjusting CSS for Mobile
Defining a Media Query for smartphones
Surveying alternative approaches
Summary
7
Creating Mobile Pages with jQuery Mobile
Creating Mobile Pages with jQuery Mobile
Mobile pages – an overview
Creating mobile pages from Dreamweaver starters
Customizing Mobile page content
Adding new jQuery Mobile pages and objects
Styling with theme swatches
Example – build a mobile web page with jQuery Mobile objects
Summary
8
Enhancing Mobile Sites
Enhancing Mobile Sites
Inserting a layout grid
Designing Mobile Pages with collapsible blocks
Adding jQuery form objects
Building a page with collapsible blocks and a mobile-friendly form
Summary
9
Customizing Themes with ThemeRoller
Customizing Themes with ThemeRoller
Applying jQuery Mobile theme swatches
Customizing themes with ThemeRoller
Rolling a theme
Applying a custom theme in Dreamweaver
Summary
10
Building Apps with PhoneGap
Building Apps with PhoneGap
Apps and mobile websites
Generating apps with Dreamweaver
Testing and distributing apps
Summary
Index
Index

Chapter 2. Using HTML5 for Page Structure

In the first chapter of this book, we saw a compressed overview of the basic and foundational techniques for working in Dreamweaver CS6: working in a defined Dreamweaver site, building HTML5 pages, linking CSS stylesheet files, and constraining page content in a <div> container tag.

In this chapter, we'll learn to build web pages in Dreamweaver using HTML5 container tags. These are the following four things we will accomplish by learning to do that:

  • Building page layouts relying exclusively on HTML5 layouts will hone our skills at using these new tools for page design, and introduce HTML5 Code Hints in Dreamweaver

  • Relying on standardized and defined HTML5 layout elements (as opposed to custom-defined, irregularly-implemented div tags) streamlines the page design

  • There are actual, significant real-world scenarios where building pages relying exclusively on HTML5 layout elements is the best way to design pages (for example, when designing pages for...

Previous Section
End of Section 1
Next Section