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

Designing Mobile Pages with collapsible blocks

jQuery Mobile Pages, as you saw in the previous chapter (Chapter 7, Creating Mobile Pages with jQuery Mobile), essentially create the sense of navigating from page to page while relying on JavaScript to actually display and hide content. That is the technique used in the sample jQuery Mobile pages generated in Dreamweaver.

Expandable blocks operate on a similar principle—they show and hide content depending on a visitor's actions. However, with expandable panels, this takes place through sections of the page appearing to expand or shrink, as shown in the following screenshot:

Building a collapsible block

Like other jQuery Mobile objects, collapsible panels require the framework of a jQuery Mobile page. So, the first step in implementing them is to create a jQuery Mobile page. This is done by navigating to Insert | jQuery Mobile | Page. We explored the options for generating jQuery Mobile pages in Dreamweaver a bit earlier in this chapter.

Once you...

Previous Section
End of Section 3
Next Section