Creating jQuery Mobile Websites With Dreamweaver

Creating jQuery Mobile Websites With Dreamweaver

Los Angeles Valley College

$97.00 Enroll Now!

Instructor-Led Course
Hours: 24
Duration of Access: 6 weeks
Start Dates: Sep 14
449 Students
have taken this course.


A new session of each course opens each month, allowing you to enroll whenever your busy schedule permits!

How does it work? Once a session starts, two lessons will be released each week, for the six-week duration of your course. You will have access to all previously released lessons until the course ends.

Keep in mind that the interactive discussion area for each lesson automatically closes 2 weeks after each lesson is released, so you’re encouraged to complete each lesson within two weeks of its release.

The Final Exam will be released on the same day as the last lesson. Once the Final Exam has been released, you will have 2 weeks plus 10 days to complete the Final and finish any remaining lessons in your course. No further extensions can be provided beyond these 10 days.

Week 1

Lesson 01 - Introduction


Mobile websites are one of the fastest-growing and most exciting dimensions of Web design, but there are quite a few challenges in designing sites for mobile devices. In this first lesson, we'll examine some of those challenges, and we'll take a look at how Dreamweaver can help us. Dreamweaver is the most widely used and powerful application for designing Web pages, and Dreamweaver CS6 includes a great set of tools for creating mobile sites. We'll also explore why mobile sites are so important, and we'll cover the basics of working with jQuery Mobile.

Lesson 02 - Create and Upload a Dreamweaver Site


The foundation for creating jQuery Mobile pages in Dreamweaver CS6 is a Dreamweaver site. A Dreamweaver site manages all of your website's files. It maintains the links between those files and ensures that the files work together on your computer and after you upload them to a remote website. You'll learn how to define a Dreamweaver site in this lesson, and we'll also walk through the steps of signing up for a remote site!

Week 2

Lesson 03 - Create a jQuery Mobile Page


In this lesson, we'll use Dreamweaver's Mobile starter page to generate a working jQuery Mobile site. Then, we'll deconstruct the jQuery Mobile page to see how it works. And finally, we'll customize the content with our own text and HTML tags.

Lesson 04 - Create and Link Multiple jQuery Mobile Pages


In the previous lesson, we learned how to build a basic four-page jQuery Mobile site from a Dreamweaver sample page. But in "real life," mobile sites include links to many pages, not just four. In this lesson, you'll add additional pages and create link structures to tie your site together.

Week 3

Lesson 05 - Customize Listviews


Listviews, those ubiquitous sets of mobile-friendly links, are the most defining element of a mobile site. In this lesson, you'll learn to enhance the appearance of listviews with preformatted elements like insets and text descriptions. You'll make listviews more accessible and powerful with search boxes and submenus. And you'll learn how to create custom listviews by combining Dreamweaver's standard HTML tools with jQuery Mobile features.

Lesson 06 - jQuery Mobile Themes


What's the technique for formatting jQuery Mobile sites? jQuery Mobile Themes. These themes are essentially an extensive set of color combinations that you can apply to any jQuery Mobile element. By mixing and matching themes—that is, by applying different theme color sets to different elements—you can create a highly customized look and feel for your site.

Week 4

Lesson 07 - Create Custom Themes With ThemeRoller


In the previous lesson, we explored options for pushing the envelope to customize design using the standard set of five jQuery Mobile Themes. In this lesson, we'll take a look at ThemeRoller, an online tool acquired by Adobe. ThemeRoller meshes with Dreamweaver to create completely new, custom themes.

Lesson 08 - Create jQuery Mobile Pages With Collapsible Blocks


In Lesson 5, you learned how to create listviews. This was your first introduction to providing access to content in jQuery Mobile. Another way to provide access is with collapsible blocks. Collapsible blocks are content elements that expand and collapse to reveal (or hide) content—a powerful way to pack a lot of content into a small space. That's what we'll explore in this lesson, and you'll also learn how to combine collapsible blocks with listviews to offer a set of dynamic navigation options!

Week 5

Lesson 09 - Design Columns for Mobile Devices With Grids and Blocks


Grids and blocks are the jQuery Mobile element that defines multi-column layouts. In this lesson, we'll explore the role of multi-column mobile page design, and you'll learn how to build multi-column layouts. How is this relevant to designing sites for mobile devices? You'll find out!

Lesson 10 - Build Mobile-friendly Forms


Collecting data through forms (like search boxes, order forms, or sign-up forms) is one of the most important elements in a website. But the small size of mobile device viewports, their lack of keyboards, and mouse-free environments make it a hassle for users to enter data into forms in mobile devices. jQuery Mobile and Dreamweaver have solutions to those challenges, and that's exactly what we'll talk about in this lesson. By the end of this lesson, you'll be well on your way to designing and building your own mobile-friendly forms!

Week 6

Lesson 11 - Embed Video in jQuery Mobile Sites


Today's mobile-fixated demographic (in other words, young folks!) demands video content. And mobile sites, from YouTube to the New York Times, provide plenty of video content. In this lesson, you'll master the techniques involved with providing video that works in every mobile environment. You'll learn about Flash Video (FLV), iOS (Apple)-friendly h.264 video, and options for more complex video streaming.

Lesson 12 - Integrate Full-screen and Mobile Sites


As you know, there's a wide range in viewports within the mobile browsing community. A design that works great in a 320-pixel wide smartphone isn't necessarily optimal for a wider tablet. So in this final lesson, we'll explore tools in Dreamweaver, and beyond, to create a multi-environment presence.


Great instructor! He really makes an effort to connect with the students and mentor them through the course. This is my fourth ed2go course and so far they are all winners! Hope to take more soon.

Follow Us