Generating a Mobile, App-Ready Page
One last note before we plunge ahead on creating a jQuery Mobile page: What if you later want to convert the page to an app? Eminently doable, in Dreamweaver CS5.5. But just keep that in the back of your mind right now, since it will influence your choice of options when generating the page.
Okay, here we go. With your site defined and a jq.css file saved to that site, follow these steps to generate a jQuery Mobilebased page:
- Choose File > New. In the New Document dialog, choose Page from Sample from the categories on the left side of the dialog. Choose Mobile Starters in the Sample Folder column, and jQuery Mobile (PhoneGap) under Sample Page (see Figure 3). This last option uses a local version of the required CSS file and other files, and it creates a page that can be converted easily to an iOS or Android app. The DocType pop-up list defaults to HTML5leave that setting unchanged. Click Create.
- Next, we'll replace the Dreamweaver-supplied CSS file with our recently downloaded official CSS file from the jQuery Mobile developers. Select the default CSS file in the CSS Styles panel and click the Unlink CSS Stylesheet button (see Figure 5) to detach the Dreamweaver-supplied (and easily corrupted) CSS file.
- With the default stylesheet unlinked, click the Attach Stylesheet icon in the CSS Styles panel; then browse to and install the jq.css file from your site's root folder.
- Take a deep breath, smile, and relax a moment. You've just generated a jQuery Mobile page! Of course, you need to customize the content (and the look, to some extent). But the mountaintop is near. Set the Design View window size to 480 pixels wide (see Figure 6), and then select Live View to preview and navigate the page.
Figure 3 Generating a mobile page that can be converted to an app.
Why name the page index.html? Because, in designing for mobile devices (versus other uses), the whole logic of HTML pages is distinctly different. To reduce wait time in navigating from page to page, all "pages" are generally compressed into a single HTML page. Therefore, you generally have only one HTML page per mobile site, and it should be named index.htmltypically the name given to a website's home page.
Figure 5 Unlinking the default CSS file.
Figure 6 Previewing a mobile page.