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 9. Customizing Themes with ThemeRoller

At this stage of our journey, we've explored the structuring of basic and more complex jQuery Mobile pages with Dreamweaver CS6. What's missing? Style! We haven't yet customized fonts, font colors, backgrounds, and all the other things that we learned to do with CSS stylesheets in the early chapters of this book.

But normal CSS styling rules apply only in a very limited sense when we are styling jQuery Mobile pages. Why? Because jQuery Mobile pages rely on a centralized, and rather massive CSS stylesheet file. The file includes five sets of color scheme swatches. In this chapter, you'll learn to apply those color swatches in Dreamweaver CS6.

But five sets of color scheme swatches are not many. In order to seriously customize how jQuery Mobile pages look, it is necessary to alter the theme, which is another way of saying you have to customize the centrally distributed CSS stylesheet. In the latter half of this chapter, we'll walk through how to...

Previous Section
End of Section 1
Next Section