- Dreamweaver Responds to the Need for Mobile-Friendly Pages
- Building a jQuery Mobile Page
- Generating a Mobile, App-Ready Page
- Customizing Content
- Applying jQuery Mobile Themes
- From Here
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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 Mobile–based 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 HTML5—leave that setting unchanged. Click Create.
- Save your new page (File > Save), with the filename index.html. When the system prompts you to save a copy of the dependent files (the CSS and JavaScript files required to make the page work), do that.
- 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.html—typically the name given to a website's home page.
As you save the page, and as Dreamweaver copies dependent files into your Dreamweaver site folder, notice that you're also saving JavaScript files (with .js filename extensions), and one CSS file. The JavaScript files are essential, as is a version of the CSS file. So click Copy in the Copy Dependent Files dialog (see Figure 4) to create a set of these essential files in your site.
)
Figure 4 Copying essential JavaScript and CSS files.
)
Figure 5 Unlinking the default CSS file.
)
Figure 6 Previewing a mobile page.