Operation Manual

457
USING DREAMWEAVER
Designing for multiple screens and devices
Last updated 3/28/2012
2. Insert jQuery Mobile components from the Insert panel
Insert jQuery Mobile components from the Insert panel into the HTML page. The jQuery Mobile CSS and JavaScript
files define the style and behavior of the components.
About CDNs and local jQuery Mobile files
CDNs
A CDN (content delivery network) is a computer network containing copies of data placed at various points in the
network. When you create a web application using the URL for a CDN, the CSS and JavaScript files specified in the
URL are used for your application. By default, Dreamweaver uses the jQuery Mobile CDN.
Alternatively, you can use URLs of CDNs from other sites such as Microsoft and Google. In code view, edit the server
location of the CSS and JavaScript files specified in the
<link> and <script src> tags.
The files downloaded from a CDN are read-only.
More Help topics
http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
Local jQuery Mobile files
When you install Dreamweaver, a copy of the jQuery Mobile files is copied to your computer. The HTML page that
opens when you choose the jQuery Mobile (local) starter page is linked to local CSS, JavaScript, and image files.
Starter pages for jQuery Mobile
Dreamweaver provides you with the following starter pages to create your web application:
jQuery Mobile (CDN) Use this starter page if you plan to host the jQuery Mobile library on a CDN.
jQuery Mobile (Local) Use this starter page if you plan to host the assets yourself, or if your application doesn’t rely on
an Internet connection.
jQuery Mobile (PhoneGap) Use this starter page if your web application, when deployed as a mobile application,
accesses features native to mobile devices. For more information, see
“Packaging web applications” on page 459.
Use starter pages to create an application for mobile devices
1 Select File > New.
2 Select one of the following based on your requirement:
• Page From Sample > Mobile Starters > jQuery Mobile (CDN).
• Page From Sample > Mobile Starters > jQuery Mobile (Local).
3 Click Create.
In the page that appears, enable Follow Links Continuously (View > Live View Options), and switch to Live View.
Use the navigation components to test how the application works.
Use the options in the Multiscreen menu to see how the design is displayed in devices with various dimensions.
Disable Live view, and switch back to the Design view.
4 In the Insert panel (Window > Insert), select jQuery Mobile. The components that you can add to the web
application are displayed.