建立適用於 AEM Mobile 的 HTML 文章

若要為您的文章建立來源 HTML 檔案，您可以使用諸如 Adobe Experience Manager 的 CMS 系統，或使用任何工具 — Dreamweaver、CMS 或 HTML 編輯器。我們建議您使用串接樣式表 (CSS)，以便針對不同尺寸的平板電腦和手機建立可重排的內容。

註解：

在某些情況下，您可以使用 Adobe Muse 來建立初始 HTML 文章。不過，在大部分情況下，您必須有更進階的 HTML 知識才能修改 AEM Mobile 適用的 HTML 文章。

建立 HTML 文章影片

這原本是針對 Adobe Digital Publishing Solution 所錄製的影片。其程序仍然適用於 AEM Mobile。

Adobe

如需更深入的探討，請參閱下列 Adobe MAX 2015 的教學課程錄影：

如何巧妙地運用 HTML

最佳化您的互動式 HTML 內容

使用 HTML Article Packager 為 HTML 內容建立文章檔案。當您將包含 HTML 檔案的檔案夾拖放到 Article Packager 圖示上時，此公用程式會建立必要的 manifest.xml 檔案，並將此檔案壓縮成您可以上傳的文章檔案。

若要下載 HTML Article Packager，請參閱「AEM Mobile 的安裝與設定」。

下載並安裝 HTML Article Packager。

在 Mac OS 中，按兩下 .dmg 檔案，然後將 HTML Article Packager 檔案拖曳到您的「應用程式」檔案夾。

將主要 HTML 檔案和其必要資產新增到檔案夾中。將主要 HTML 檔案命名為 index.html，並在 Finder 或檔案總管中開啟該檔案夾。

只加入您的 HTML 程式碼中參照的檔案。如果您加入非參照的檔案 (例如 PSD 影像)，您會增加檔案大小，但這是不必要的。

在個別的 Finder 或檔案總管視窗中，開啟包含 HTML Article Packager 公用程式的檔案夾 (例如 Mac OS 上的「應用程式」檔案夾)。

將 HTML 檔案夾拖放到 HTML Article Packager 圖示上。

註解：

在 Windows 上，內含文章的檔案夾其所在磁碟路徑必須與 HTML Article Packager 安裝位置的磁碟路徑相同。

文章檔案會建立在與 HTML 檔案夾相同的層級上。

在隨選入口網站 (https://aemmobile.adobe.com) 中，編輯文章並上傳文章檔案。

如需詳細資訊，請參閱「在 AEM Mobile 中管理文章」。

Adobe Experience Manager (AEM) 編寫

設定 AEM 以搭配 AEM Mobile 運作

協力廠商 CMS 系統

與 CMS 整合：Drupal 和 WordPress (影片)
WordPress (由 Studio Mercury 開發)
Drupal (由 DPCI 開發)

網路型編寫

HTML 內容在桌面瀏覽器中的執行效能良好，但是在行動裝置上可能會比較差。在建立 HTML 文章時，請執行下列動作：

針對行動裝置最佳化影像。12000x8000 像素、300 dpi 的影像要比 800x600、72 dpi 的影像處理時間更長。請避免使用不必要的大型影像，以節省空間及提高效能。
最佳化視訊和音訊檔案，以減少檔案大小及提升效能。
簡化行動裝置瀏覽器適用的程式碼，並進行測試。

如需詳細資訊，請參閱「針對 AEM Mobile 應用程式最佳化內容」。

您可以參照從 HTML 文章上傳至應用程式的字體。透過參照在應用程式中上傳的字體，您可以提升文章下載速度和效能。

註解：

HTML 文章中所使用的共用字體只有在行動應用程式中才受支援，在桌面網頁檢視器中則不受支援。若要讓字體可供桌面網頁檢視器使用，您可以在 HTML 文章中包含字體，也可以使用 API 來透過共用內容提供字體。

在隨選入口網站中上傳字體 (「內容與版面 > 字體與應用程式自訂」)。請參閱「自訂 AEM Mobile 應用程式︰使用自訂字體」。

在入口網站的「字體與應用程式自訂」區段中，建立或編輯您想要參照的字體。請確定「字體檔案名稱」欄位已填寫。如有需要，請重新上傳字體檔案。

如果您新增或編輯了字體，請更新並重新提交您的應用程式，如此才能使用字體。

在入口網站的「字體與應用程式自訂」區段中，按一下此圖示以顯示字體檔案，然後按一下「複製」。

在來源 HTML 檔案中，新增已上傳字體的參照。

參照應用程式字體的範例 HTML 文章

建立 HTML 文章，並將它新增至您的專案。

建立包含您所參照之字體的自訂應用程式。測試該文章，以確定字體會正常顯示。

根據預設，點選非互動式區域會在檢視器中顯示導覽列，而滑動則會導覽至下一個或上一個文章或頁面。在 HTML 文章中，檢視器不會針對已知的互動式 HTML 元素顯示導覽列，例如以下元素：<a/>、<video/>、<audio/>、<textarea/>、<input/> 和 <button/>。點選其他元素都會顯示導覽列。

如果要在進階互動式內容 (例如遊戲或投影片) 中更能掌控手勢的處理方式，請使用自訂 HTML Gesture API。

藉由使用 HTML Gesture API，您就可以確保能夠針對更進階的互動式 HTML 元素提供良好的用戶體驗。例如，假設您擁有全螢幕的投影片，您可以自訂使用體驗，讓用戶滑動到最後一張投影片的下一篇文章。如果您有 HTML 拼圖，您可以加以設定，以便在點選畫布時顯示導覽列，而點選一塊拼圖時將不會顯示導覽列。

請注意，Windows 應用程式中不支援 relinquishCurrentGesture()。其他所有手勢在所有平台上都有支援。

如需詳細資訊，請參閱範例檔案 (僅提供英文版)。