How to Simulate Multiple Pages with Tabbed Panels
How to Create a Data Table for Your Website
How to Install jQuery

How to Create a Mobile-Ready Page in Dreamweaver

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:

1

Choose File→New.

The New Document dialog box opens.

2

Select 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.

3

Click 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.

4

To 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.

5

After 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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create a Multiple Selection List Box in JavaScript for HTML5 and CSS3 Programming
New HTML5/CSS3 Tricks for Validation
Create JavaScript Structures and Objects
PHP Template Systems
How to Use the XMLHttpRequest Object in JavaScript
Advertisement

Inside Dummies.com