Create A New HTML5 File
You can create a new HTML 5 document in Dreamweaver (Page Type: HTML, DocType: HTML5) and set it up as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!----- SETUP JQUERY ----->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" > </script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
</head>
<body>
</body>
</html>
Using Dreamweaver To Create The File
however Dreamweaver has better support by selecting 'File' > 'New' > 'Select Page From Sample' > 'Mobile Starters'
Dreamweaver Tips
Preview of interface
Menu > View > Live View
Code syntax assistant
type "data-*"
The Viewport
The area in which the page fits. A mobile friendly website shouldn't need to be zoomed in or out, at least to start with the visible area equal to the devices screen width.
1:1 scale and with user not allowed to change the scale with gestures or buttons:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
The Page
A page is just a div element with a specific role. One HTML document can host one page or many pages inside the same file.
Roles
Roles define what the framework should do with tags such as div tags that are used. E.g.
<div data-role="page">
Note that roles are not part of HTML5, they are part of the jQuery Mobile framework.