How to Create a Mobile-Ready Page in Dreamweaver - dummies

How to Create a Mobile-Ready Page in Dreamweaver

By David Karlins, Doug Sahlin

Dreamweaver’s jQuery Mobile Starter pages are a good way to quickly generate a mobile-friendly site. The Mobile Starter page creates an HTML5 page with five prebuilt jQuery Mobile data-pages, or sections of the HTML page that look and act like “pages” as they appear or disappear within a mobile device. And those starter pages provide a fine starting place for both mobile pages and apps.

Follow these steps to generate and customize a jQuery Mobile page in Dreamweaver:

1Choose File→New.

The New Document dialog box opens.

2Select Page from Sample in the left column, Mobile Starters in the Sample Folder column, and jQuery Mobile (CDN) in the Sample Page column.

Choose the first option, jQuery Mobile (CDN).

DOCTYPE is set by default to HTML5, which is required for jQuery Mobile–based pages. The New Document dialog box, with settings for a jQuery Mobile page, is shown.

3Click the Create button.

An HTML page appears with four jQuery Mobile “pages.”

Because the generated page relies on JavaScript, you can’t see anything close to the actual appearance without turning on Live view.

To get a feel for how the page will look and work in a mobile device, click the Live view button and navigate in the generated jQuery Mobile pages, using the Forward and Back buttons on the Document window toolbar. Use the Window Size option on the toolbar at the bottom to resize the Document window viewport to a mobile device size.

4To edit the pages, deselect Live View, and edit in the Document window.

Each jQuery Mobile “page” (within the single HTML file) has three DIV tags within it: a jQuery Mobile Header, a jQuery Mobile Content element, and a jQuery Mobile Footer.

5After you edit the placeholder content, replacing it with your own content, toggle back to Live view to see how pages will look in mobile device browsers.

You can edit the contents of any of the elements in Design view the same way you edit any HTML page in Dreamweaver.