如何在网站或博客中将文档嵌入为自动播放幻灯片
阅读本白皮书,了解如何为任何网站或博客添加自动播放的幻灯片。包括自定义用户体验的技巧,以及为 WordPress、Joomla!、Drupal 和其他平台安装插件,让自动播放幻灯片变得轻而易举。
引言
自动播放的幻灯片为网站增添了活力。演示文稿自动翻页不仅以动态吸引注意力,而且还可以让您呈现更密集的内容,而无需将访问者发送到另一个页面,也无需增加混乱。研究表明,幻灯片可以在在线捕获注意力方面提供优势,一些 SEO 专家将幻灯片吹捧为一种提升流量的策略。正如报刊亭中循环播放的幻灯片在繁忙的商场或机场吸引注意力一样,网站中的幻灯片也会让人驻足关注。
创建自动播放幻灯片有多种方法。但许多方法对于开发人员或设计师来说难以执行,要求访问者安装插件或拥有正确的本机应用程序,仅支持少数源媒体文件格式,或需要其他妥协。
本文介绍了一种嵌入自动播放幻灯片的方法,该幻灯片几乎可以使用任何文档作为其来源:PowerPoint 文件、PDF、Microsoft Word 文件或几乎任何其他多页文件。该幻灯片在大多数浏览器中原生运行,易于设计和部署,并提供多种方式来定制用户体验。
此方法的中心是基于云的文档查看器 Prizm Cloud。当您使用基于云的文档查看器时,您会在源代码中的 <iframe>
或 <href>
元素中嵌入一个链接,该链接调用云服务器上的查看器程序并在其中打开文档。文档本身仍可能驻留在您自己的服务器上,或者可能已首先上传到云端,具体取决于您选择的基于云的文档查看器。
调用文档到幻灯片查看器中的语法
无论您选择哪种方式在 HTML 内容中呈现幻灯片查看器,关键步骤是措辞指向查看器程序和文档文件的 URL。
每个注册的 Prizm Cloud 用户都会收到一个唯一的密钥。显示文档的 URL 包括 Prizm Cloud 查看器地址 (http://connect.ajaxdocumentviewer.com)、密钥、完整文档地址(包括文件名)以及任何可选参数,所有这些都采用以下语法
http://connect.ajaxdocumentviewer.com?key=value&document=URL_of_document&optional_parameter_name=value
例如,假设
- 您的密钥是 12345
- 您的文档的直接地址是 http://www.mydoc.com/presentation.pdf
带有以下 URL 的文本或图像链接将在新的浏览器选项卡/窗口中打开您的文档,对所有可选参数使用默认值。
http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/presentation.pdf
注意:对于 Prizm Cloud 幻灯片,您可以使用 Prizm Cloud 支持的 300 多种文件类型中的任何多页文档文件。PowerPoint 文件可以使用,多页 PDF、Word 文件、XML 文件、EPS、多页 JPEG 和更多类型也可以。由于基于云的文档查看器本身播放幻灯片,因此您的访问者不需要文件类型的本机程序或任何插件或其他播放器。文档必须存储在可公开访问的位置;如果您没有足够的服务器访问权限,则可以直接链接到 Dropbox 文件夹中的文档。
要措辞播放幻灯片的 URL,您需要包含一个可选参数:viewertype。要应用可选参数,只需在文档文件名后添加一个和号 (&),后跟参数名称、等号 (=) 和您要应用的设置。要将上一个示例中的 URL 配置为幻灯片,您将添加一个 slideshow 的 viewertype 值,如下所示
http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/presentation.pdf&viewertype=slideshow
请注意,有 许多其他参数 可用于自定义用户体验;例如,有定义查看器框和工具栏大小的参数,显示或隐藏某些工具栏按钮或更改工具栏颜色,应用加密等。对于每个参数,当您完全省略该参数时,都会使用默认设置。
还有一些幻灯片特有的参数,例如
参数 | 描述 | 值 |
|
幻灯片之间的动画效果 |
slide, fade |
|
动画效果的持续时间(以毫秒为单位)(即,页面过渡到下一页所需的时间) |
任何正整数 |
|
幻灯片在开始过渡到下一张幻灯片之前保持可见的时间(以毫秒为单位) |
任何正整数 |
|
显示或隐藏幻灯片控制:上一个、下一个、暂停、播放 |
yes, no |
要应用多个参数,请在文件名后将它们串联起来。例如,下面的 URL 指定上一个示例中的幻灯片应显示在一个高 600 像素、宽 800 像素的框中,并隐藏控制,以便用户无法手动控制幻灯片
viewertype=slideshow&viewerheight=600&viewerwidth=800&showcontrol=no
将幻灯片嵌入为布局元素
使用 <iframe>
元素,您可以将幻灯片合并到网页(或基于 HTML 的博客文章、电子邮件或其它 HTML 出版物)的布局中。当您呈现指向您想要在同一框中交换的多个文档的链接时,或者当您希望访问者一到达您的页面就呈现单个文档时,这是一种特别有用的方法——对于自动播放幻灯片来说,这是一种理想的格式选择。
下图显示了 Prizm Cloud 查看器中的幻灯片在一个 <iframe>
中,位于布局中的横幅下方。
<iframe>
元素的 URL (src) 部分的语法与前面所示的相同。
<iframe seamless width=600" height="650" allowtransparency="true" src="http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/presentation.pdf&viewertype=slideshow&showcontrol=no"> <p>您的浏览器不支持 iframes。</p> </iframe>
通过第三方内容管理平台进行编码
Prizm Cloud 提供不断增长的插件和扩展系列,用于与 WordPress、Joomla!、Drupal、Magento 和 Umbraco 等第三方内容管理平台集成。实施方式因平台而异,但本质上,插件将 Prizm Cloud 与平台的编辑器或其他工具集成,以方便插入 PowerPoint 幻灯片或其他文档。
例如,安装 Prizm Cloud WordPress 插件会在 WordPress 内容编辑器的工具栏中添加一个 Prizm Cloud 按钮,如下所示。
点击该按钮会打开一个对话框,收集诸如您要显示的文档的 URL 和查看器类型(HTML5、Flash 或幻灯片)等信息。选择幻灯片后,会出现用于自定义幻灯片的选项。从这些选项中做出的选择将添加和修改结果代码中的参数。
对话框关闭后,插件会将以下 WordPress 短代码插入 WordPress 编辑器中,将幻灯片嵌入 WordPress 页面中。如您所见,您可以轻松地为 WordPress 配置与在纯 HTML 中使用的相同参数,只是语法略有不同。
[prizmcloud key="12345" type="slideshow" document="http://www.mydoc.com/presentation.pdf"]
其他平台(如 Joomla! 和 Drupal)的插件也支持类似的功能。完整的平台列表可在 http://www.prizmcloud.com/plugins-and-extensions.html 获得。
结论
由于 PowerPoint 的流行和长久性,幻灯片是一种成熟且完善的内容交付机制,每个人都非常了解。但这种媒体在线上的适用性一直受到低效、专有工具和对多种文件类型有限的浏览器支持的阻碍。随着像 Prizm Cloud 这样的新一代云服务扎根,网页设计师和开发人员将更好地利用大量可用的幻灯片内容,以及现在可以轻松创建和部署它们。
关于作者
Ned Averill-Snell 是一位计算机记者和作家。他曾是 DATAMATION 和 Inside Technology Training 杂志的特约编辑,著有 Macromedia Contribute 3 in a Snap 和 Sams Teach Yourself to Create Web Pages in 24 Hours 等书籍。