選取「檔案 > 新增」。
上次更新時間
2021年4月29日
將網路應用程式封裝為原生行動應用程式 (CS5.5)
Dreamweaver 與 jQuery Mobile 和 PhoneGap 的整合可協助您建立並封裝網路應用程式，以便於 Android™ 和 iOS 架構裝置進行部署。Dreamweaver 會使用 PhoneGap SDK 建立封裝 (適用於 Android 的 .apk 檔案，以及適用於 iPhone/iPad 的 .xcodeproj 檔案)。
一旦您使用 Dreamweaver 來封裝行動應用程式之後，就可以在裝置模擬器中檢視它，或將它部署至您自己的裝置。
註解：
您使用 Dreamweaver 所封裝的行動應用程式僅供除錯之用。此應用程式可在 Android 和 iOS 模擬器中執行，也可在您的個人行動裝置上執行 (如果進行傳輸的話)，但是您無法將除錯行動應用程式上傳至 Apple 和 Android 商店。若要上傳 iOS 或 Android 應用程式，您必須進行額外的步驟，也就是在 Dreamweaver 外部簽署它們。如需有關將應用程式上傳至 Apple 和 Android 商店的詳細資訊，請參閱 Android 說明文件或 Apple iOS 佈建入口網站上的「Program User Guide」(計劃使用手冊)。(您必須先註冊 Apple Developer Program (Apple 開發人員計劃) [免費] 並登記 iOS Developer Program (iOS 開發人員計劃) [年費]，才能存取 Apple iOS 佈建入口網站)
使用起始頁面建立網路應用程式
您可以使用任何一種起始頁面開始建立網路應用程式。不過，若您的網路應用程式部署為行動應用程式之後要存取行動裝置的原生功能，請使用 jQuery Mobile (PhoneGap) 頁面。
jQuery Mobile (PhoneGap) 起始頁面除了其他 jQuery Mobile 檔案之外，還含有 phonegap.js 檔案。phonegap.js 檔案含有必要的 API，可以使用 GPS、加速計、攝影機等原生行動裝置功能。
-
-
選取「來自樣本的頁面 > 行動裝置起始 > jQuery Mobile (PhoneGap)」。
-
按一下「建立」。
-
在「插入」面板 (「視窗 > 插入」) 中選取「jQuery Mobile」。隨即顯示您可以新增到網路應用程式中的組件。
-
在「設計」檢視中，將游標放在您要插入組件的地方，然後按一下「插入」面板中的組件。在出現的對話方塊中，使用各種選項自訂組件。
註解：若要編輯 PhoneGap.js 檔案，請設定應用程式架構和應用程式設定。如需詳細資訊，請參閱有關建立應用程式封裝的主題。
在「即時檢視」中預覽頁面。某些 CSS 類別只會在「即時檢視」中套用。
封裝應用程式的系統需求
您必須先確定自己符合下列系統需求，然後才能繼續封裝應用程式。
MAC OS - iOS
Mac OS X Snow Leopard 10.6.x 版或更新版本
Xcode 3.2.x 含 iOS SDK (安裝指示如下)。
MAC OS - Android
Mac OS X 10.5.8 或更新版本 (僅限 x86)
Android SDK (安裝指示如下)。
Windows - iOS
iOS 僅適用於 Apple 電腦的用戶
Windows - Android
Windows XP (32 位元)、Vista (32 或 64 位元) 或 Windows 7 (32 或 64 位元)
Android SDK (安裝指示如下)。
建立應用程式封裝 (Windows)
如需有關建立網路應用程式的詳細資訊 (包括樣本檔案)，請參閱 Dreamweaver 開發人員中心上的這個教學課程。
-
開啟您要轉換為行動應用程式的網路應用程式。確定您的網路應用程式已設定成 Dreamweaver 中的網站，而且網站的大小少於 25 MB。
註解：確定應用程式僅含有 HTML5、CSS 和 JavaScript 檔案。
-
選取「網站 > 行動應用程式 > 設定應用程式架構」。
-
按一下「輕鬆安裝」安裝 Android SDK。
註解：如果「輕鬆安裝」失敗，請參閱技術文件 90408。
-
選取安裝 SDK 檔案的位置，然後按一下「選取」。在完成安裝後，按一下「儲存」。
-
選取「網站 > 行動應用程式 > 應用程式設定」。
-
針對套件 ID，使用對話方塊中的資訊輸入封裝的名稱。
-
輸入應用程式的名稱，以及應用程式設計者的姓名。
-
此外，您也可以選擇指定下列項目：
-
在「應用程式圖示 PNG」中，指定要用來做為應用程式圖示的 PNG 檔案。如果您沒有調整過圖示的大小，Dreamweaver 會將它調整為標準大小。
-
指定封裝的目標路徑。
-
若要從 Google 下載並安裝最新的 SDK 組件，請按一下「管理 AVD」。使用 Android SDK and AVD Manager 更新 Android SDK。如需使用此程式的詳細資訊，請參閱 http://developer.android.com/sdk/adding-components.html。
註解：按一下「儲存」之後，phonegap.js 檔案會複製到網站根目錄。
-
-
請執行下列其中一項作業：
如果您要將應用程式直接部署至裝置，請選取「網站 > 行動應用程式 > 建置」。為組建選取平台/裝置。
如果您想在建置前先查看組建在模擬器上的外觀，請選取「網站 > 行動應用程式 > 建置和模擬」。
建立應用程式封裝 (Mac OS)
如需有關建立網路應用程式的教學課程 (包括樣本檔案)，請參閱 Dreamweaver 開發人員中心上的這篇文章。
-
開啟您要轉換為行動應用程式的網路應用程式。確定您的網路應用程式已設定成 Dreamweaver 中的網站，而且網站的大小小於 25 MB。
註解：確定應用程式僅含有 HTML5、CSS 和 JavaScript 檔案。
-
選取「網站 > 行動應用程式 > 設定應用程式架構」。
-
根據您的需求安裝適用於 iOS 或 Android 的 SDK：
按一下 Apple iOS Dev Center 連結，下載並安裝 xcode 和 iOS SDK。此應用程式預設會安裝至 OS <版本編號>/developer 目錄。
使用您的 Apple ID 登入 Dev Center。註冊是免費的，如果您尚未註冊，請建立一個帳戶。
註解：您可以使用從 Apple Dev Center 下載的 SDK 套件進行測試。不過，若要將您的應用程式上傳至 Apple Store，您需要支付必要的費用以註冊成為 Apple 開發人員。
- 按一下「輕鬆安裝」安裝 Android SDK。
註解：如果「輕鬆安裝」失敗，請參閱技術文件 90408。
-
按一下「儲存」。
-
選取「網站 > 行動應用程式 > 應用程式設定」。
-
在「套件 ID」中，使用對話方塊中的資訊輸入封裝的名稱。
-
輸入應用程式的名稱，以及應用程式設計者的姓名。
-
此外，您也可以執行下列動作：
(Android) 在「應用程式圖示 PNG」中，指定要用來做為 Android 應用程式圖示的 PNG 檔案。如果您沒有調整過圖示的大小，Dreamweaver 會將它調整為標準大小。
(Mac® OS 10.6.x) 在「啟動螢幕 PNG」中，指定要用來做為 iOS 應用程式圖示的 PNG 檔案。如果您沒有調整過圖示的大小，Dreamweaver 會將它調整為標準大小。
(Mac OS 10.6.x) 選取您建立之封裝所適用的 iPhone/iPod Touch/iPad 版本。
為封裝定義不同的目標路徑。
註解：按一下「儲存」之後，phonegap.js 檔案會複製到網站根目錄。
-
請執行下列其中一項作業：
如果您要將應用程式直接部署至裝置，請選取「網站 > 行動應用程式 > 建置」。為組建選取平台/裝置。
如果您想在建置前先查看組建在模擬器上的外觀，請選取「網站 > 行動應用程式 > 建置和模擬」。
