Certificate in Creating jQuery Mobile Websites With Dreamweaver Online Course

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.

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!

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.

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.

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.

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.

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.

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!

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!

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!

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.

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.