Creating jQuery Mobile Websites With Dreamweaver

Creating jQuery Mobile Websites With Dreamweaver

Massachusetts Bay Community College

$119.00 Enroll Now!

Instructor-Led Course
Hours: 24
Duration of Access: 6 weeks
Start Dates: Nov 12, Dec 10, Jan 21, Feb 18
273 Students
have taken this course.

Syllabus

A new session of each course starts monthly. If enrolling in a series of two or more courses, please be sure to space the start date for each course at least two months apart.

Week 1

Wednesday - Lesson 01

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.

Friday - Lesson 02

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

Wednesday - Lesson 03

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.

Friday - Lesson 04

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

Wednesday - Lesson 05

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.

Friday - Lesson 06

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

Wednesday - Lesson 07

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.

Friday - Lesson 08

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

Wednesday - Lesson 09

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!

Friday - Lesson 10

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

Wednesday - Lesson 11

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.

Friday - Lesson 12

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.


Review

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