Dreamweaver CS5.5: Build Mobile Apps based on jQuery Mobile

This tutorial guides the reader to build Mobile Apps using Dreamweaver CSS5.5 based on jQuery Mobile.

PRE-REQUISITE
1) Pre-installed Dreamweaver CS5.5 (It must be CS5.5 because this version supports Mobile Development) (download Dreamweaver CS5.5)
2) Pre-installed usbwebserver (to test web server environment) (download usbwebserver)
3) Chrome with Ripple extension (to emulate mobile look) (install Ripper)

STEPS
1) Identify a storage location in your PC for localhost web files.
e.g., C:\DevPackDWMobile\usbw\root


2) Test that web server environment is ok by double-clicking usbwebserver icon. Bypass Firewall blocks for Apache and MySQL if you are prompted. Green light indicates that the Apache and MySQL is running well.


3) Run Dreamweaver CS5.5
If this is your first time running of Dreamweaver CS5.5, go to menu Site\New Site... to define your Website location.



4) Set Site Name and Local Site Folder.
Point your Local Site Folder to your usbwebserver root folder (in Step 1).
Click Save.


5) Select Create New\More...


6) In the new document dialog window, choose Page from Sample\ Mobile Starters\ jQuery Mobile (Local)
Make sure Doc Type is HTML5.
Click Create.



7) A new page is created.
Using the Split Window display, the codes and design page are displayed side by side.
Notice the Live Code and Multiscreen button.


8) Click Live Code button.
Ignore Flash Plugin warning. We are not using Flash element here. No need to worry about that.


9) Click on Multiscreen\ 320 x 480 (Smart Phone).


9.1) The page adjusts itself into the selected dimension.


10) Save the page as index.html in the folder specified in Step 4 above.


10.1) Dreamweaver CS5.5 may prompt you to confirm copying dependent files to which you respond by clicking Copy.


11) Make sure that your usbwebserver is running.
Browse your project, i.e http://localhost:8081/mobileproject1


12) Click Ripple Button. Click Enable.


12.1) Ripple may ask you further to select test platform.
Choose Mobile Web (default)


12.2) Go to Device selection. Choose iPhone 4.


12.3) Ripple will emulate the display based on the device that you have selected.



13) Click on Page Two.
Notice that Back button gives you the feeling of mobile look.