创建适用于 DPS 的 HTML 文章

搜索

上次更新日期： 2021年4月29日

您是否在查看正确的文章？

本文介绍的是 Digital Publishing Suite。有关 AEM Mobile 的文章，请参阅创建 HTML 文章。

可向作品集导入基于 HTML 的文章，以使其可在查看器中显示为文章。HTML 文章的一个优点是文件大小相比之下要小得多，更适合周刊出版物和结构简单、文字量大的文章。HTML 文章也可以包括 Folio Overlays 面板中不可用的交互性。

视频教程

加载 HTML 文章（英文）

Colin Fleming

http://blog.colingrayfive.com/

有关使用 Adobe Edge 为 DPS 创建 HTML 的信息，请参阅 Raghu Thricovil 的文章使用 Adobe Edge 以 HTML 动画增强 DPS 作品集（英文）。

创建包含 HTML 文件的文件夹。

确保在文件夹中仅包括您正在使用的资源。文件夹中的所有资源都将上传，即使是未使用的资源。
如果要将 HTML 文章导入单向文件夹，请将 _h 或 _v 后缀添加到 .html 文件（如 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 文件中。您将 HTMLResources.zip 导入 Folio Builder 面板的作品集中或 Web 上的 Folio Producer 中。请参阅导入 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 框架（英文）。
有关使用 CreateJS 创建使用 Flash Pro 的 HTML5 的信息，请参阅 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>

新用户？