您正在檢視正確的文章嗎？
這篇文章指的是 Digital Publishing Suite。若為 AEM Mobile 文章，請參閱「建立 HTML 文章」。
上次更新時間
2021年4月29日
|
|
您可以將以 HTML 為基礎的文章匯入對開本中，以便在檢視器中顯示為文章。HTML 文章的一項優點是檔案大小更小，更適合用於週刊和簡單且文字密集的文章。HTML 文章也可以包含無法在 Folio Overlays 面板使用的互動功能。
教學課程影片
載入 HTML 文章 (英文)
如需使用 Adobe Edge 為 DPS 建立 HTML 的詳細資訊，請參閱 Raghu Thricovil 的文章「使用 Adobe Edge 強化具有 HTML 動畫的 DPS 對開本」(英文)。
-
建立包含 HTML 檔案的檔案夾。
確定您只在檔案夾中納入要使用的資產。檔案夾中的所有資產都會上傳，即使不會用到。
-
如果您要將 HTML 文章匯入單向檔案夾，請在 .html 檔案加入 _h 或 _v 字尾，例如 index_h.html。
如果未加入字尾，文章可能會以雙向文章的形式匯入。如果您嘗試預覽或發佈單向對開本，就會出現錯誤訊息。
-
在 Folio Builder 面板中，開啟 HTML 文章將納入其中的對開本。
-
在 Folio Builder 面板中的「文章」檢視，選取面板選單上的「匯入文章」。
-
選擇「匯入單一文章」選項、按一下「位置」檔案夾圖示
，然後指定 HTML 檔案夾。您也可以使用「匯入多個文章」選項 (請參閱「建構檔案夾以匯入文章」) 或使用「使用 sidecar.xml 匯入」選項 (請參閱「使用路徑架構的 sidecar.xml 檔案匯入文章」) 來匯入 HTML 文章。
-
指定其他設定，例如「平滑捲動」，並按一下「確定」。
如果您編輯 HTML 檔案，請在 Folio Builder 面板中選取 HTML 文章，然後選擇「更新」。
HTML 文章需求
您可以建立適用於縱向和橫向的單一 HTML 檔案，或者您可以為兩個方向建立個別的 HTML 檔案。若要為縱向和橫向使用個別的 HTML 檔案，請在 HTML 檔名結尾加上 _v 和 _h 字尾，例如「index_h.html」。如果您是建立單一方向的對開本，您只需要一個 HTML 檔案。請為單一方向對開本中的 HTML 檔案加入 _h 或 _v 字尾。
目前尚未完全支援動態 HTML (DHTML) 檔案。
就檔案結構而言，一個方法是在個別的文章檔案夾中置入 HTML 檔案的所有相關圖形和指令碼。另一個選擇是在 HTMLResources.zip 檔案中置入整個對開本的相關圖形和指令碼。您可以從 Folio Builder 面板或網路上的 Folio Producer，將 HTMLResources.zip 檔案匯入對開本。請參閱「匯入 HTMLResources 檔案夾」。
HTMLResources 檔案夾範例請確定您在 HTML 程式碼中使用相對路徑。如果您要連結至與 HTML 檔案位於相同層級的影像，請使用此方法：
<img src="GlobalImage.jpg"/>
如果您要連結至「HTMLResources」檔案夾中的影像，請使用此方法：
<img src="../HTMLResources/GlobalImage.jpg"/>
如需建立連入和連出 HTML 文章的超連結的詳細資訊，請參閱「建立 HTML 文章的 navto 超連結」。
建立適用於 Android 檢視器的 HTML 文章
如需為 Android 檢視器建立 HTML 文章的指引和需求，請參閱「建立適用於 Android 檢視器的 HTML 文章」(英文)。
HTML5 資源
如需使用 HTML5 建立文章的詳細資訊，請參閱 Johannes Henseler 的文章「單一檔案 HTML5 架構」(英文)。
如需透過 Flash Pro 使用 CreateJS 建立 HTML5 的詳細資訊，請參閱「Toolkit for CreateJS」。
如需 iPad 上 HTML 文章和「Web 檢視」覆蓋中可用字體的詳細資訊，請參閱 www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/ (英文)。
Rufus Deuchler 所建立的教學課程影片說明如何使用 Adobe Muse 建立數位出版物的 HTML 內容 (英文)。
允許 HTML 文章中的影片如全螢幕影片覆蓋般運作
當您建立包含影片連結的單一方向的 HTML 文章時，旋轉裝置會導致播放中的影片跟著旋轉。此外，當影片結束播放時，播放影片的應用程式內部瀏覽器會關閉。若要啟用這個行為，請在您的 HTML 影片連結中使用「videofile://」字首。此選項僅適用於 iOS 應用程式。
註解：
如需影片行為的範例，請參閱 DPS Tips 免費應用程式的「HTML 範例」專題 (僅提供英文版)。
標準影片行為
在這個範例中，影片會在應用程式內部瀏覽器內播放，並且不會在單向對開本中旋轉。<a href="Links/video.mp4">播放影片</a>
或<a href="../HTMLResources/videos/video.mp4">播放影片</a>
強化影片行為
在這個範例中，影片會正確地在單向對開本中旋轉，並在影片結束時返回文章。<a href="videfile://Links/video.mp4">播放影片</a>
或<a href="videofile://../HTMLResources/videos/video.mp4">播放影片</a>
JavaScript
您也可以在視窗物件上使用 playFullscreenVideo 函數，透過 JavaScript 觸發此行為。<a onclick="window.playFullscreenVideo('Links/video.mp4');">播放影片</a>
或<a onclick="window.playFullscreenVideo('../HTMLResources/videos/video.mp4');">播放影片</a>
串流影片
這個範例會播放串流影片。<a href="videohttp://www.mysite.com/video.mp4">播放影片</a>
