<< 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>

Questions & Answers

what is microbiology
Agebe Reply
What is a cell
Odelana Reply
what is cell
Mohammed
how does Neisseria cause meningitis
Nyibol Reply
what is microbiologist
Muhammad Reply
what is errata
Muhammad
is the branch of biology that deals with the study of microorganisms.
Ntefuni Reply
What is microbiology
Mercy Reply
studies of microbes
Louisiaste
when we takee the specimen which lumbar,spin,
Ziyad Reply
How bacteria create energy to survive?
Muhamad Reply
Bacteria doesn't produce energy they are dependent upon their substrate in case of lack of nutrients they are able to make spores which helps them to sustain in harsh environments
_Adnan
But not all bacteria make spores, l mean Eukaryotic cells have Mitochondria which acts as powerhouse for them, since bacteria don't have it, what is the substitution for it?
Muhamad
they make spores
Louisiaste
what is sporadic nd endemic, epidemic
Aminu Reply
the significance of food webs for disease transmission
Abreham
food webs brings about an infection as an individual depends on number of diseased foods or carriers dully.
Mark
explain assimilatory nitrate reduction
Esinniobiwa Reply
Assimilatory nitrate reduction is a process that occurs in some microorganisms, such as bacteria and archaea, in which nitrate (NO3-) is reduced to nitrite (NO2-), and then further reduced to ammonia (NH3).
Elkana
This process is called assimilatory nitrate reduction because the nitrogen that is produced is incorporated in the cells of microorganisms where it can be used in the synthesis of amino acids and other nitrogen products
Elkana
Examples of thermophilic organisms
Shu Reply
Give Examples of thermophilic organisms
Shu
advantages of normal Flora to the host
Micheal Reply
Prevent foreign microbes to the host
Abubakar
they provide healthier benefits to their hosts
ayesha
They are friends to host only when Host immune system is strong and become enemies when the host immune system is weakened . very bad relationship!
Mark
what is cell
faisal Reply
cell is the smallest unit of life
Fauziya
cell is the smallest unit of life
Akanni
ok
Innocent
cell is the structural and functional unit of life
Hasan
is the fundamental units of Life
Musa
what are emergency diseases
Micheal Reply
There are nothing like emergency disease but there are some common medical emergency which can occur simultaneously like Bleeding,heart attack,Breathing difficulties,severe pain heart stock.Hope you will get my point .Have a nice day ❣️
_Adnan
define infection ,prevention and control
Innocent
I think infection prevention and control is the avoidance of all things we do that gives out break of infections and promotion of health practices that promote life
Lubega
Heyy Lubega hussein where are u from?
_Adnan
en français
Adama
which site have a normal flora
ESTHER Reply
Many sites of the body have it Skin Nasal cavity Oral cavity Gastro intestinal tract
Safaa
skin
Asiina
skin,Oral,Nasal,GIt
Sadik
How can Commensal can Bacteria change into pathogen?
Sadik
How can Commensal Bacteria change into pathogen?
Sadik
all
Tesfaye
by fussion
Asiina
what are the advantages of normal Flora to the host
Micheal
what are the ways of control and prevention of nosocomial infection in the hospital
Micheal
Got questions? Join the online conversation and get instant answers!
Jobilize.com Reply

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