In this course, our instructor Candyce Mairs discusses building a jQuery Mobile page. This lesson demonstrates how to create a jQuery mobile site and provides an overview of all of the various versions of one.
Dreamweaver can give you a jump start for building jQuery Mobile websites
We will not be creating a full-fledged website as that is beyond the scope of this course, there is a longer course on jQuery Mobile available on Educator.com
To create a new jQuery mobile page using Dreamweaver, go to File->New->Starter Templates
Select the Mobile Starters folder and you will see 3 different versions you can create
jQuery mobile pages require both the jQuery and jQuery mobile libraries in order to build the pages
These libraries can either be downloaded from a website on the internet, or you can store the files on your local drive
The CDN version will add a link to the library files residing on the internet
Microsoft, Google and jQuery all offer links to jQuery libraries if you do not want to install these files on your web server
The recommendation in the past was to always use the link on the internet because users may have already downloaded the library so it was said to speed up the page load time
That idea does not appear to actually be the case in the browser, so it is best to install a local version of these files that you can control, and you can test fully before updating
We will choose the last option, the jQuery Mobile with Theme (Local) version
This version contains 2 different CSS files, one that contains everything that jQuery Mobile needs and another that contains all the CSS for the built-in themes
These jQuery pages use the HTML5 Doctype
Create a new folder in the chapter files website site called jqm
Click the create button and save the page as index.html in the jqm folder in your site
Notice the various files that Dreamweaver is pulling in to create this page
You can use Dreamweaver to create a jQuery mobile web page to use as a starting point for building your jQuery mobile website
Building a jQuery Mobile Page
Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.
Educator.com recommends Adobe Dreamweaver CC to use with our Dreamweaver CC course. Adobe Dreamweaver CC is the leading all-in-one visual development tool used by web designers and developers worldwide to create, publish, and manage their websites and mobile content. Membership includes the full version of Dreamweaver CC to download, install, and run on your computer. You will get immediate access to all the latest updates and new features as soon as they're released.