使用dreamweaver5.5 開啟jQuery Mobile

Dreamweaver5.5與之前的版本就差在於多了行動裝置的設計與開發。(cs6都出來了...)

5.5的誕生並不是為了修正之前的錯誤而改版，而是多了很多關於行動裝置開發的工具，還有javascript程式庫.jquery等等.CSS可以設定圓角.陰影，支援HTML5.內嵌自字形。

最重要的是可以藉由5.5開發jquery mobile，它會自動幫你匯入javascript與css架構。

假如要學習使用5.5來開發手機網頁，又不想要看程式碼，可能會有點吃力，因為手機網頁已經不同於我們一般在PC看的網頁，這點是所有網頁設計師都會有點困惑的地方，要記住，不是只設計給PC的人看，所謂行動裝置的設計，不只是指手機，還有平板，牽涉的功能很多，已經不是過去用div切一下就可以解決的問題。 你有css是否符合螢幕的問題.你也有檔案大小的問題。

怎麼使用dw5.5開啟jquery Mobile頁面 :1.請先去adobe下載試用版。但是是英文版。http://www.adobe.com/tw/downloads/

2.開啟後會有一個歡迎介面，這個介面可以選擇你要開啟舊檔，還是開新頁面，由於jquery是範本，所以我們必須點選中間那一欄下面的more....

3.按下more之後，請點選"page from sample"-->"Mobile starters"-->"jquery Mobile (CDN)"

這裡的jquery Mobile (CDN)是指從CDN載入jQuery Mobile程式庫 。(CDN就是content distribution nerwork，內容傳遞網路) 請google。

這裡的這三個 CDN.local phonegap 的差別在最後面介紹 。

4.按下create後就可以看到這個畫面，會產生一個頁面，然後有一些原生的內容，這個畫面總共有四個div(#page~#page4)，每個div都有屬於自己的header跟content還有footer，這其中的關係跟瀏覽出來的結果有什麼關聯，多多嘗試就知道了。
會發現雖然都寫在同一頁，但是實際瀏覽出來的結果卻是分別獨立開來的頁面。

5.接下來請試著去修改頁面的資訊

6.然後我們來瀏覽一下實際狀況是如何，請切換成live view

7.切換後可以看到整個頁面的結果，為什麼可以看到顏色跟css樣式，那是因為產生這個jquery頁面的時候就已經匯入javascript跟css樣式檔了。可以試著點按裡面的連結，在按back回上一頁，只是會有點卡卡的，因為是使用dw的liveview ，如果事實即丟到瀏覽器觀看，應該是不會卡卡的。

8. 怎麼開新jquery檔案就先介紹到這裡，存起來吧，點選file->save as 

9.存檔的時候請放在一個自己知道的資料夾，或是開新資料夾來放資料。檔名取index.html

10. 存好之後你會發現只有一個index.html，是不是怪怪的呢？那些匯入的css跟javascript在哪了?這個問題非常簡單，看了一下index.html的原始碼，你會發現這些匯入的css或是js 都是匯入自http://的連結。

為什麼匯入來自網路的原始碼跟樣板
這是因為在前面我們開新檔案的時候選擇了CDN
CDN就是匯入來自網路所提供的檔案，優點是減少頻寬，降低負擔。
但是要哪天這個網路所提供的檔案停用或者無法上網時，那就會看不到js跟css匯入的效果。

所以如果再存檔的時候你希望連js跟css也一併存在本機的話(這也是我覺得比較保險的作法)，就要選擇第二個 jQuery Mobile(local) (就是本機)的選項，如此一來在存檔的時候就會詢問你是否一併儲存這些相關的檔案到跟目錄。
個人比較建議這種方法，因為比較保險。

先介紹到這裡..。