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 CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • 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 Educator.com

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 vs a regular web page like those in our website
  • Once a jquery mobile page has been created and saved, you will see some additional files have been added to the root folder of your site within a folder called jquery-mobile
  • Look in the related files toolbar & you will see a jquery file & 2 jquery mobile files, one for css & the other for js
  • 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 7 they will need to 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 area that you can modify

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
  • jQuery Files 0:09
  • Preview Page in Browser 1:26
  • Page Structure 2:42
    • Add Content to Footer Area
    • Preview in Browser
    • Edit Content in Footer Area
  • Summary 7:17

Transcription: jQuery Mobile Pages

Let's take a look at a jQuery Mobile page that was created by Dreamweaver to use as a start for our website.0000

First of all, I want to show you the files that were downloaded by Dreamweaver; and I was very specific about where I wanted Dreamweaver to place these files.0009

Within my Wanderlust Travel website, I have a jQuery Mobile folder; and this would be the area where I will store any files related to the mobile version of my website.0019

I have given that page (or specifically, this page that is open in Dreamweaver) the name of index; that is what we always name the homepage; and I do have an index within my site files here as the homepage for Wanderlust Travel.0032

But within other folders in your website, you can also have index files; that way, I can lead the user to this folder using a URL; and once the Web server gets to this folder, it would automatically show my homepage, just like it does within my root folder, going out to this index file.0051

That is my jQuery Mobile site location; and all images would go within this area for the mobile site, because they are going to be smaller.0077

Now, let's take a look at this page that was created: and the first thing I would like to do is put it into the browser, because you will see something change drastically.0087

Now, let me click on the page so I have my browsers active; and I'll go ahead and put this in Safari.0098

Look at what we have already: it doesn't look like much in Dreamweaver Design View, but we have already created a website.0105

Notice, I can click on page 2 and move into page 2; here is my header area; here is my footer area; and then, I have the content region.0114

I do have to use the Back button; there are quite a few things that you can add to help the user navigate throughout the website; but this is the starter page.0126

We haven't done anything: the jQuery Mobile framework has done all of this for us, including adding the little icons to get to the next page.0136

You can see, they are the perfect size for a finger...for a touch device; mobile devices are all touch-based, and that is automatically built into the jQuery Mobile framework.0147

Now, how do these pages work?--let me show you.0160

Within this page (and let me close this up so we have a little more space), within this single HTML page, I actually have multiple pages.0164

You can see, here is page 1; I have page 2, 3, and 4; so what I am going to do, to give you a taste for this, is: I am going to change these page names.0176

We will change this one to Wanderlust Travel; page 2 I'll change to my Destinations page; the next one--page 3--will be my Specials page (people always like specials, so we'll make sure it's there and prominent, right up front); and the last one will be About Us; so there are my pages.0190

Now notice, I also have this page footer area: let me go out onto my regular pages, and I'll go out specifically to my template page; and what I am going to do is grab the copyright pieces from that page.0217

Now, if I take a look at this particular page, I don't have that on there; so it wasn't a template file that I added that library to--it was actually a library.0236

I'll go over to my Assets; I'm going to go down to the Library area; I'm going to select this and click the pencil, and I'm going to copy this piece of information--no reason to have to re-type it; I'll go ahead and drop it into this footer area.0248

Now, I may need to shorten this up a little bit--you can see, it is fairly large; I'll remove the All Rights Reserved piece and just say Copyright.0268

I am basically building the footer area on every page within my jQuery Mobile site; so I am building them all right here.0278

That one ended up going into my footer area, it looks like--and this one I'll plug into my footer area.0289

Now, it looks like I am actually grabbing too much information here--let me put it into the browser; let's check it out.0299

I'll put this into Chrome (this is on my Destinations page): I'll go ahead and save: so, there is my main page; page 2 is my Destinations page; and you can see, I do have two complete footer areas.0306

It does get a bit interesting, working in jQuery Mobile, because it is very easy to be grabbing extra pieces of code; so what I am going to do is simply use Command/Ctrl+Z to go backwards.0324

What I need to do is make sure I am only getting the text in this area; so, there are some tricks to working in jQuery Mobile that are not quite such a big deal in a regular website.0339

Let me move into Split View...and I know I have that piece just fine right now; so let me do that one more time (oops, I didn't grab the l there) and go ahead and copy it; and if I copy it in Design View correctly, I should be able to just paste it in here.0353

What actually happened with that other one is: I grabbed some of the jQuery Mobile code that was already on the page; and then you are going to begin to have issues.0371

So, jQuery Mobile pages do take a little bit of getting used to; that is why I do have a completely separate course on jQuery Mobile itself, building the website that you just looked at.0381

It looks to me like that is set up correctly; let's save the page and take a look.0396

This time, I'll put it in Firefox: we have our inner pages (notice, this is my homepage); it still says Page 2, 3, and 4; but when I click in those, you can see, I have my information; when I click in this one, that is my Specials page; and when I click in page 4, that is the About Us page.0401

This is how you start to work and build your jQuery Mobile website; now, there is a whole lot of additional customizing I would want to do for this particular site, but that gives you a taste of how to start working in a jQuery Mobile website.0425

This top portion is my homepage; this is my Destinations page, my Specials page...and you can see, as I move in this, the one that says jQuery Mobile header--that tells me I am starting a new page.0444

What we just did was: we started to customize our basic default jQuery Mobile page, which is actually a single HTML file that we have used in order to create multiple pages within the jQuery Mobile framework.0459

That gives you a taste of how to start creating and customizing these pages (a very simple taste for it) within Dreamweaver.0477