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

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!

Working with jQuery Mobile Themes

  • View
  • Open jquery-mobile-themes.html from the course files
  • jQuery mobile has 5 built in themes that are available for your jQuery mobile site
  • Each of these themes has a letter assigned to it, with the various sections of the pages assigned specific default themes
  • Open jquery-mobile-themes.html & look at it in the browser
  • This is a 5 page site and each page is showing a different theme
  • The various pieces of the page can all be set up with their own themes
  • Show the code for the themes piece
  • Feel free to play around with the different themes using this page
  • That is a brief introduction to jQuery mobile, and creating jQuery Mobile Starter pages within Dreamweaver and the variety of themes that are built into the framework for you to use

Working with jQuery Mobile Themes

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
  • Overview of Themes 0:06
  • Live View of jQuery Page 2:47
  • Example Page 3:43
    • Preview In Browser
  • Summary 4:51

Transcription: Working with jQuery Mobile Themes

We are now going to take a look at the concept of themes built into jQuery Mobile.0000

What a theme does is allow you to not only work with the 5 default themes built into jQuery, but it allows you to create your own custom themes and work with those, as well.0006

Now, we are getting way beyond the scope of a Dreamweaver course, so I just want to give you a brief overview to theming, so you can understand where the color schemes are coming from that are on the page that Dreamweaver created for us.0018

Let me give you a brief overview here: I am on the website, and within this area, I am in the Theme Framework piece; and basically, built into jQuery Mobile are 5 default themes.0035

And you can mix them up however you like, and this gives you a good visual idea of those specific themes.0051

Basically, there are five different color schemes: one is yellow; two are gray; one is blue; and the other is black.0060

By default, this black version is what Dreamweaver created when it created your starter page, right within the program, in the Mobile Starters area.0069

Now, what does that mean?--well, basically, within each theme, there are additional pre-built colors; so you will see five colors listed, and what this is doing is showing the different colors for default.0081

In other words, if you are working in Bar A up here as your header, that does not mean that your content area has to be black; I could add a yellow content area.0096

So, you can mix and match these as you like within the framework: you are the one who controls which themes happen.0110

That is content blocks: you can see, here are some additional features--if you make sliders...there is so much built into the jQuery Mobile framework, it's amazing.0118

Here are different types of lists; and it shows you those are the five default themes for list items.0130

And you can see, these themes have their own hover effects; the yellow one isn't quite so strong--if you look at the very top of it, you can see just a little bit.0139

Those are links; these are buttons; these are bars; there are Back buttons...on and on: these are all built into the framework.0150

So, you can see, you do have a lot of variety in working within this framework--and these are just default: you can create your own.0159

Let's go back to that Dreamweaver page and put it into Live View (so go ahead and click on that), and you can see, the Live View button allows you to preview it; and there are those hover states to our site here.0168

Now, what we are looking at is the basic default; but using those various themes, we can modify this to customize it however we want.0185

Now, needless to say, the jQuery Mobile piece is an entire course in and of its own; I just wanted to explain to you what Dreamweaver can do for you, in terms of creating a page.0197

It pre-builds it with a specific theme; you can customize that theme with the 5 pre-built themes and mix and match as you like, or you can do your own.0211

I do have an example page here within your site files called jQuery Mobile themes; and what I have done was taken an individual theme and put it on each individual page.0223

Let me put this in the browser and show it to you.0237

I'll go out to Safari, just as an example: this initial homepage (which is this top one here) is using the darker theme; when I click on Destinations, I get Theme #2; Specials is another theme; so, what this allows you to do is see what these default themes look like.0240

You can see, Destinations is in blue; I didn't add the Back button--this is the default page that Dreamweaver created that we modified just a little bit.0261

If I go to Specials, you can see it's all gray; if I go out to About Us, this one is a lighter shade of gray; so there are two pre-built gray themes; and Contact Us is the last one, and it's yellow.0271

And you can combine and merge these exactly how you like.0286

But that is what is giving your page (that looks not-very-nice in Dreamweaver)--that is what is pulling in the different color schemes for our web page.0291

So, feel free to explore the jQuery Mobile Themes page; and you can take a look at the 5 different themes on your own.0303

Also, you now have a pre-built page within your site files in case you want to move into exploring a little bit further in jQuery Mobile.0312

I wanted to at least give you enough information (since Dreamweaver can give you that starter page) for you to begin to explore the concept of a jQuery Mobile website, using the jQuery framework.0323

That is what Dreamweaver can do for you in getting you started creating that mobile website.0340

That is a brief overview of the jQuery Mobile framework and how you can use Dreamweaver to get you started.0346

This is a completely separate course, so we just touched the surface, as you could see once we got into the Themes piece.0354

But I think you will find that a very interesting avenue to explore, and I do have another course specifically on building a jQuery framework website.0362

That is an overview of jQuery Mobile using Dreamweaver.0373

Thank you for watching