Book Image

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

By : DAVID KARLINS
Book Image

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

By: DAVID KARLINS

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
DAVID KARLINS
Sep, 2011 | 284 pages
No titles found
Table of Contents (13 chapters)
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Creating HTML5 Pages in Dreamweaver
1. Creating HTML5 Pages in Dreamweaver
HTML5 and Dreamweaver CS5 in the world of web design
HTML5 and Dreamweaver CS5.5
An introduction to 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
Saving a layout as a web page
Recipe: Creating and saving a 3-column HTML5 page
Summary
2
2. Customizing HTML5 Layout–Content and Look
2. Customizing HTML5 Layout–Content and Look
Customizing layouts – An overview
Editing content in HTML5 page layout elements
Identifying style rules
Customizing HTML tag rules
Saving customized HTML5 layouts
Recipe: Customize content and look of an HTML5 page
Summary
3
3. Customizing HTML5 Layout Elements
3. Customizing HTML5 Layout Elements
HTML5 layout and browser compatibility challenges
Global HTML5 layout element attributes
Customizing HTML5 elements
Back to the future: ID and class styles
Recipe: Customizing the HTML5 page layout
Summary
4
4. Building HTML5 Pages from Scratch
4. Building HTML5 Pages from Scratch
Dreamweaver CS5 and HTML5
Building an HTML5 page from the top
Using HTML5 to make content accessible
HTML5 layout strategy
Using code hints
Adding header, header nav, and hgroup
Creating articles and sections
Adding aside content
Creating a footer
Adding metadata
Recipe Part 1: Build a style sheet for an HTML5 page layout
Recipe Part 2: Build an HTML5 layout from scratch
Summary
5
5. Defining and Implementing Multiscreen Previews and Media Queries
5. Defining and Implementing Multiscreen Previews and Media Queries
Web design for a multimedia web world
Previewing with the Multiscreen Preview
Generating a Media Query in Dreamweaver
Formatting CSS files for Media Queries
Troubleshooting for Apple i-Gadgets
Exercise: Defining a Media Query for a cell phone
Summary
6
6. Applying CSS3 Effects and Transforms
6. Applying CSS3 Effects and Transforms
New in CSS3: Effects and transforms
CSS3 effects
CSS3 transforms
Interactive effects and transforms
Recipe: Create an animated effect and transform
Summary
7
7. Embedding HTML5 Audio in Dreamweaver
7. Embedding HTML5 Audio in Dreamweaver
Audio and compatibility
Laying the groundwork: HTML5 and page-building
Making audio HTML5-ready
Embedding an HTML5 audio element in a Dreamweaver CS5 web page
Alternative media options
Recipe: Embedding HTML5 audio
Summary
8
8. Embedding HTML5 Video in Dreamweaver
8. Embedding HTML5 Video in Dreamweaver
HTML5 video and Dreamweaver CS5.5
The wild world of native videos
Preparing an HTML5 video for every scenario
Compressing videos for the Web
9
9. Creating Mobile Pages with jQuery
9. Creating Mobile Pages with jQuery
Mobile pages – An overview
Creating mobile pages from Dreamweaver CS5.5 starters
Customizing mobile page content
Adding new jQuery Mobile pages and objects
Customizing mobile page CSS styles
Looking ahead: Generating mobile apps
Recipe: Build a mobile web page with jQuery Mobile objects
Summary
10
10. Adding jQuery Mobile Elements
10. Adding jQuery Mobile Elements
Creating jQuery Mobile pages from scratch
Inserting a Layout Grid
Designing mobile pages into a collapsible block
Adding jQuery form objects
Recipe: Build a page with collapsible blocks and a form
Summary
11
11. Generating Apps
11. Generating Apps
Generating apps from Dreamweaver—an overview
Configuring application framework(s)
The App toolkits
Defining mobile application settings
Building and emulating apps
Testing mobile apps on your computer
Recipe: Building and emulating a mobile app
Summary
12
Index
Index

HTML5 layout strategy

Having surveyed the emerging value of organizing content into HTML5 layout elements, we turn to the more dramatically impactful aspect of using HTML5 layout elements: design. However, keep in mind; design and content are linked in HTML5. Unlike previous generations of web page markup language, HTML5 organizes content both to facilitate displaying that content, and to facilitate accessing that content.

A basic HTML5 page layout is illustrated in the following screenshot, with self-explanatory placeholder text:

The visible borders in the preceding screenshot, by the way, are a product of Dreamweaver CS5's CSS Layout Outlines (if they are not functioning, choose View | Visual Aids | CSS Layout Outlines).

Again, before diving into an exploration of the specific elements in HTML5 layouts, and how they are implemented, keep in mind they both define design components of the page, and organize content.

Previous Section
End of Section 8
Next Section