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!

Building a jQuery Mobile Page

  • I want to give you a taste of how to work with jQuery mobile since Dreamweaver can give you a jump start
  • We will not be creating a full-fledged website as that is an entirely different course
  • To create a new jQuery mobile page using dreamweaver, go to File->New->Page from Sample & select the Mobile Starters folder
  • In order to use jQuery mobile pages there are jQuery and jQuery mobile libraries that are needed
  • 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 from the internet, MIcrosoft, Google & jQuery all offer links so you do not need to install these files on your web server
  • We will choose the 2nd option, the jQuery Mobile (Local) version
  • The last version allows you to pull in your own custom these files if you want to create and reference those instead of using the prebuilt versions
  • Note the HTML5 doctype is being used from your page
  • Create a new folder in our site called jqm
  • Click the create button and save the page as jquery-mobile.html into the jqm folder in your site
  • Notice the various files that Dreamweaver is pulling in for us in order to create this page

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.

  • Intro 0:00
  • jQuery Website Page 0:10
  • New jQuery Page Options 1:06
    • jQuery Mobile CDN
    • jQuery Mobile Local
    • jQuery Mobile with Theme Local
  • Save jQuery Mobile Page in own Folder 4:15
    • Copy Dependent Files
  • Summary 7:34

Transcription: Building a jQuery Mobile Page

How do I create a jQuery Mobile website?--an excellent question.0000

What we are going to do is let Dreamweaver help us get it started; the idea is: this is my jQuery page, but it is also my entire website.0006

It is kind of a strange concept: you are working on a single page, but that single page actually creates multiple pages within your mobile website.0018

We are going to let Dreamweaver do that; but there are a couple of different ways we can do it.0029

First of all, the jQuery Mobile framework here uses the jQuery Mobile Javascript and CSS libraries; it also uses the main jQuery library; so, there are some additional files that need to be downloaded by your browser in order for the jQuery Mobile website to work correctly.0035

What we need to do is tell Dreamweaver where we want those files stored.0058

I'll show you what I mean: I'll close out of this, and I am going to go up to the File, New menu within Dreamweaver; and I am going to go to the Page from Sample area.0064

This is within Dreamweaver CS6; it is down in the Page from Sample; and we will select the Mobile Starters area.0079

Now, you have some options as to how to download the files, or if you want to download the files; so let me go through these three options.0088

First of all, this jQuery Mobile with the CDN--what that would do is allow you to not have the jQuery framework and jQuery Mobile libraries on your Web server; so, they would not be within your website.0098

As your page loads in the browser for the user, the browser would be sent out to other websites; and there are three main ones where these files and libraries are stored.0114

Microsoft has a version; Google has a version; and the jQuery framework itself has a version available to you.0126

If I choose this one, I am not storing any jQuery library files on my local machine or, once I upload it, onto my Web server.0135

Some people are not comfortable with that, so it is really up to you; when I work with businesses, they like to be in control of all the files for their websites, or at least as much as possible.0145

So, they don't want to rely on somebody else to provide those files--whereas it may be easier for you, within your website, to just go out, grab those files, and bring them back in.0158

There was a thought that you used to be able to use this version, and it saved your users some download time; but that doesn't appear to be the actual case, so we don't worry too much about that anymore.0172

Now, the local version means what Dreamweaver is going to do is grab all the files needed to create that website and pull them down onto your system: that is the one I am going to use.0185

The last one--what it does is...notice, it says "with theme"--what that does is: it actually segregates out the jQuery CSS that is needed from the theme portion of the CSS that you can use within jQuery Mobile.0201

It sounds like a great feature; if you first start working in it, it would make sure you wouldn't be changing anything in the jQuery CSS file itself.0219

However, it is adding another file to your website; so I am not sure if it is a good thing or not.0229

What I am going to do is show you this middle version; I don't want that many files on my system, so I am going to put them all together.0238

I'll click the Create button, and there is my web page; now, it's a strange-looking web page.0247

What I am going to do now is save this page into its own folder; I want to keep this information and all of these libraries I need separated from the rest of my website, because this is my mobile version of the website.0255

I am going to do a File, Save As, and create a separate folder within my website called jquery-mobile.0272

What I am going to do is put all of these jQuery Mobile files within that folder, so that they are all separated.0285

I know which ones go with the jQuery Mobile website, and I know the rest of them go with my main website.0293

I'll save this; and I am going to save it as index, because it is going to be the homepage for my jQuery Mobile website.0300

It just also happens to be all of the pages for my jQuery Mobile website.0310

When I click Save, take a look at what Dreamweaver is going to add for you: you don't have to go out and grab all of these files to make sure you have the correct ones.0315

Let's go through this: first of all, there is a jQuery Mobile CSS file--that is going to contain all of the information to make it look like a jQuery Mobile website.0327

Now, you also have two Javascript files: the first one is for the main jQuery library; the second one is for the jQuery Mobile library; you are required to have both.0340

The next four pieces--you can see, it says Images; what these are, are the different icons for the themes within jQuery.0355

And then, the last one helps the browser understand how to load the different pages within your mobile website.0365

So, you do need all of this information inside your website; that is why I like to put it in its own folder.0373

Now, these are versions of jQuery and jQuery Mobile; so it's something you want to pay attention to when you download and install these.0381

There, more than likely, will be updated versions of both of these; and you may want to specifically go out and grab these individual files in an updated version before you start building your website.0392

jQuery and jQuery Mobile are evolving frameworks, so they are being changed quite often, and Dreamweaver can't necessarily keep up with which framework is being released when.0407

That is something to watch for: you will more than likely want to go out and get updated versions of these two, but you can certainly get started working in jQuery Mobile websites right now, using these versions.0420

I'm going to go ahead and click Copy; Dreamweaver is going to copy all of those files for me; let me take a look--and you can see, here are the images (we'll open this up a little bit) that we just looked at; here is my homepage; and here are those other three files.0436

You can see how convenient it is to be able to let Dreamweaver do all of that work for you; now, it's just a matter of getting started creating your website.0455

That is how you can use Dreamweaver to create your jQuery Mobile page that you are going to use to build your website.0468

This section of this course does not completely cover jQuery Mobile--that is another whole course--but I wanted to introduce you to the jQuery Mobile piece--how to get started--and give you a few details, so you can begin to explore the fact that Dreamweaver can assist you in working with these.0478

And you can start exploring the different pages and how to work within jQuery Mobile on your own.0500

That is using Dreamweaver to create a jQuery Mobile website, including all of the files that are needed in order to work with it.0508

I'll take a look at the page itself in another lesson.0518

But we just used Dreamweaver to take care of creating all the files for us that we need for this website.0521