<< Chapter < Page Chapter >> Page >
本部分讲述如何添加多媒体

如何添加多媒体

Connexions模块可以包含多种不同型式的多媒体。任何可以放在网页里的多媒体对象型式,都可以通过使用CNXML的media(媒体)标签将其放置在Connexions模块里。此模块将介绍如何将不同型式的多媒体对象增加至一个模块里。

多媒体对象的型式大致包括图片、Flash、影片和声音文件等等。由于不同型式多媒体对象的添加方式基本相同,因此此模块以图片文件的添加说明为主,其他型式的多媒体对象只作简要介绍。

增加多媒体的重要注意事项

  • 此模块里所展示的CNXML例子,是特别指定在此模块所使用的媒体工具,如果您将其复制到您的模块里,请对代码做适当修改以适合您情况下的CNXML。
  • 您所要放置在模块里的媒体对象必须具有一个可用的MIME (Multipurpose Internet Mail Extension)协议型式。MIME协议是一个可以让数据传输的通讯协议,例如声音或影片,通过网络,而不需要转为ASCII码。
  • 您可以使用任何型式的媒体对象,只要它是可用的MIME型式。
  • 您可以使用param(参数)标签以控制多媒体对象的选项或参数。

图片

使用在Connexions模块里符合MIME型式的图片文件型式包括:

  • eps - media type="application/postscript"
  • png - media type="image/png"
  • jpeg - media type="image/jpeg"
  • gif - media type="image/gif"

以上所列并不包含所有的型式,任何可用的 MIME type 型式的图片都可以使用在模块里。

需要添加至模块的图片,可以直接是网络上的图片,或者是已经上传至您的workplace的图片,具体上传操作如下:

点击“Create New Item”:

进入左图所示的界面后点击“浏览”上传您的图片。

在线应用 Edit In Place 进行模块编辑时,无法直接添加多媒体,因此需要使用 full-source XML editing ,并且在模块的index.cnxml文件里手动填写所需的CNXML代码。所插入代码应填写在<content>与</content>之间。具体的代码属性和编写方式请查阅 CNXML Language Specification(CNXML语言说明) 里关于 媒体 标签的描述,以获得更多信息。

full-source XML editing运行环境

插入单张图片的代码类似于下列的例子:

<figure id="cute-girl">

<title>a girl</title>

<media id="girlpic" alt="A girl">

<image mime-type="image/jpeg" src="girl.jpg"/>

</media>

<caption>

Notice a girl.

</caption>

</figure>

media媒体标签里的src属性,是给定图片的位置或来源。例子中的图片是已经事先上传至workplace里了,所以属性是一个文件名;如果一个图片文件储存在因特网上的其它地方,属性可以是一个完整的URL网址。

上方CNXML例子的实际显示为:

Figure 1: Notice a girl.

您可以使用subfigure标签把两个图片放置在相同的figure(插图)里。当您有两个相关图片,而想要将其并列放置或者上下放置时,这个标签相当有用;要在同一个插图里显示两个图片,代码类似于下列的例子:

<figure id="figure-2" orient="horizontal">

<subfigure id="subfigure-1">

<title>较小的图</title>

<media id="babypic" alt="A girl">

<image mime-type="image/jpeg" src="girl.jpg"/>

</media>

<caption>

子插图1

</caption>

</subfigure>

<subfigure id="subfigure-2">

<title>较大的图</title>

<media id="boypic" alt="A boy">

<image mime-type="image/jpeg" src="boy.jpg"/>

</media>

<caption>

子插图2

</caption>

</subfigure>

<caption>

在一个插图里水平显示两个图片

</caption>

</figure>

上方CNXML例子的实际显示为:

较小的图较大的图 (a) 子插图 (b) 子插图2
Figure 2: 在一个插图里水平显示两个图片。

orient(方向)属性值可以是horizontal(水平)或vertical(垂直),以及定义图片如何安排在插图(figure)里。

模块的在线版本及打印版本所包含的图片

如果您模块里面图片的大小,符合您在线观看时的大小,但当您打印此模块时却显得太大时;Connexions让您可以在模块里插入一个附加的图片文件,让其格式及大小符合打印版本所需。eps格式的图片文件,是使用在Connexions模块打印版本里较佳的格式。如果您的模块包含相同图片的eps文件及png文件;当Connexions产生一个打印版本的PDF档时,Connexions会使用eps文件;而如果在在线显示模块时,会使用png文件。

底下是说明如何在您的模块里为打印版本插入附加的图片文件:

  1. 请建立您的图片文件的一个eps格式版本,这个图片应调整成适合的大小。
  2. 请在index.cnxml文件里插入这个eps文件的代码,位于在线显示的图片代码的上方。此图片文件应该有相同的名称,而扩展名应该指定其文件型式。例如,image1.png是给在线使用的,而image1.eps是给打印使用的。
  3. 请增加eps图片文件至此模块。

底下是需要包含附加图片所需的CNXML代码的一个例子:

<figure id=" printimage">

<title>a boy</title>

<media id="boypic" alt="A boy">

<image mime-type=" application/postscript" src=" boy.eps "/>

<media type='image/png' src='boy.png'/>

</media>

<caption>

Notice a boy.

</caption>

</figure>

注意:

在index.cnxml文件里,打印图片(eps)的输入必须出现在在线图片(png)的输入上方;在线图片的输入应该写在一个标签里,以及被嵌入在另一个打印图片输入里面。

建立一个图片连结至一个较大的版本

您也可以显示一个图片,让它被点击后显示成一个较大版本的图片。底下是其处理的方法:

  1. 请建立您的图片文件的一个缩图版本。
  2. 请将原图大小及缩图大小的图片插入至一个media type(媒体型式)输入,如下列例子所示。
  3. 请增加原图大小及缩图的图片文件至模块里。

底下是含有一个缩图图片连结至一个原图版本所需的CNXML代码例子:

<figure id="thumbnail">

<title>thumbnail</title>

<media id="thumbnail" alt="thumbnail">

<image mime-type="image/jpeg" src="boy_med.jpg"/>

<param name="thumbnail" value="boy_thumb.jpg"/></media>

<caption>

Notice a boy.

</caption>

</figure>

其他型式的媒体对象

对于其他型式的媒体对象来说,所插入的代码基本相同,需要改变的代码是如下划线的部分:

< image mime-type=" image/jpeg " src="boy. jpg "/>

不同型式的媒体对象代码如下例所示:

  • flash-<flash mime-type="application/x-shockwave-flash" src="flash. swf"/>
  • audio-<audio mime-type ="audio/mpeg" src="down.mp3"/>
  • video-<video mime-type="video/mov" src="howto.mov"/>

以上所列并不包含所有的型式。

媒体型式参数

一些多媒体对象需要一些选项或参数以适当地显示出来,您可以通过param(参数)标签传递信息至多媒体对象,此标签在media(媒体)标签里,而不需要变更media(媒体)标签。请查阅 CNXML Language Specification(CNXML语言说明书) 里有关 param 标签的描述,以获得更多信息。

底下是一个影片(mpg)对象的param(参数)标签输入的例子:

<media id="video" alt="video">

<video mime-type type="video/mpeg" src="testmovie.mpg"/>

<param name="width" value="300"/>

<param name="height" value="300"/>

</media>

注意:

您应该对任何影片、Flash对象设定高度(height)及宽度(width)参数,使它们在在线以适合的大小显示;预设使用的高度及宽度单位为像素,在上方例子中,影片显示成300 pixel乘以300 pixel的方格。

不同的多媒体对象型式,支持及对应于不同的参数,一些相异的多媒体对象型式所使用到的一些参数例子如下:

  • Images (image/*): height, width, title, alt
  • Flash (application/x-shockwave-flash): height, width, base
  • Video (video/*): height, width, classid, codebase, autostart
  • Audio (audio/*): title, volume

注意:

param(参数)标签,允许您指定插入至XHMTL文件的一个对象在计算机运作时的设定。

Param(参数)及替换图片

如果您使用嵌入式的media(媒体)标签以提供一个替换图片显示,例如一个照片出现在模块的打印版本,以取代出现在在线版本的一个影片;请在替换图片的被嵌入的media媒体输入之前,插入原本影片的param(参数)输入,如同下列例子所示:

<media id="video" alt="video">

<video mime-type type="video/mov" src="howto.mov"/>

<param name="height" value="250" />

<param name="width" value="250" />

<media type="image/png" src="novideo.png />

</media>

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, 使用connexions制作课程. OpenStax CNX. Jun 24, 2009 Download for free at http://cnx.org/content/col10715/1.3
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the '使用connexions制作课程' conversation and receive update notifications?

Ask