Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

jQuery Mobile Pages

  • We will take a look at a jQuery Mobile html page to get an understanding of how a jQuery Mobile page is set up which is very different than a standard web page
  • Once a jQuery Mobile page has been created and saved, you will see additional files have been added to the root folder of your site within a folder called jquery-mobile
  • Look in the related files toolbar and you will see a jQuery file and 2 jQuery Mobile files, one for .css files and the other for .js files
  • These libraries are updated often, so you may want to go out to the jQuery website to update these files once you become more familiar with jQuery Mobile to get a more recent version of these files
  • Those are the files that this page needs in order to work correctly and those files need to be uploaded to the web server
  • Take a look at the new jQuery Mobile page, it is structured unlike any other web page you have probably worked with, this one page contains all the information for the entire mobile site
  • That concept does take some getting used to! Each page contains a header, a content area, and a footer
  • We will change the headers on all the pages:
    • Page one to Tranquil Travel
    • Page two to Destinations
    • Page three to Specials
    • Page four to About Us
  • Click on Live view and view the page
  • Go ahead and add information within the four pages and view it in Live View or the browser to see the changes
  • Be sure to make the browser window narrow to get a better idea of how it would look on a mobile device

jQuery Mobile Pages

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.

  • Intro 0:00
  • Renaming Pages, Sections 0:30
    • Footer
    • Preview in Browser
    • Navigating Through the Mobile Website
    • Dreamweaver Tabs in jQuery Mobile
  • Code View 5:33
    • CSS Files
    • JavaScript Files
  • Internet Explore Compatibility 7:18