Connexions

You are here: Home » Content » Adding Multimedia to Your Connexions Content (中文說明 - Chinese)
Content Actions

Adding Multimedia to Your Connexions Content (中文說明 - Chinese)

Module by: Adan Galvan, Mark Husband, Wei-Cheng Wong Based on: Adding Multimedia to Your Connexions Content by Adan Galvan, Mark Husband

Summary: 解釋如何將各種型式的多媒體物件增加至您的 Connexions 資料裏，包含一些常見的多媒體物件舉例說明。

簡介

Connexions模組可以包含多種不同型式的多媒體，此模組將解釋您如何可以將下列的多媒體物件型式增加至一個模組裏：
任何可以放在網頁裏的多媒體物件型式，都可以藉由使用CNXML的media（媒體）標籤將其放置在Connexions模組裏。請查閱CNXML Language Specification（CNXML語言說明）裏關於媒體標籤的描述，以獲得更多資訊。唯一的要求是該物件必須具有一個可用的MIME (Multipurpose Internet Mail Extension)協定型式。MIME協定是一個可以讓資料傳輸的通訊協定，例如聲音或影片，透過網際網路而不需要轉譯成一個ASCII格式。請查閱MIME Types以獲得更多資訊。此模組包含CNXML輸入的例子，以及它們不同的多媒體物件顯示的結果。

增加多媒體的重要注意事項

當您要將多媒體增加至您的模組時，請注意下列事項：
  • 此模組裏所展示的CNXML例子，是特別指定在此模組所使用的媒體工具，如果您將其複製到您的模組裏，請編輯適合您情況下的CNXML。
  • 您所要放置在模組裏的媒體物件，其type（型式）屬性必須符合MIME型式。例如，如果您所增加的一個圖片檔案是Portable Networks Graphics（.png附屬檔名）格式，type型式屬性必須是image/png，其輸入會像下面的例子： 
    	  	 
	  	    <media type="image/png" src="mypicture.png"/>
  • 您可以使用任何型式的媒體物件，只要它是可用的MIME型式。
  • 如果您在增加一個多媒體物件時需要協助，或者您關於未列在此模組裏的一個物件有相關的問題時，請聯繫Connexions技術支援，techsupport@cnx.rice.edu 。
  • 您可以使用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型式的圖片都可以使用在模組裏。
要把圖片放置在您的模組裏，請在您的模組的index.cnxml檔案裏插入CNXML輸入，類似於下列的例子： 
         
	  <figure id="figure-01">
	    <name>插圖範例</name>
	    <media type="image/png" src="envelope-taller.png"/>
	    <caption>一個圖像的顯示。</caption>
	  </figure>
media媒體標籤裏的src屬性，是給定圖片的位置或來源，將其放置在您想要讓其出現在模組裏的地方。如果您已經將檔案上傳至您的模組裏，屬性可以是一個檔名；或者如果一個圖片檔案儲存在網際網路上的其他地方，屬性可以是一個完整的URL網址。
上方CNXML例子的實際顯示為：
插圖範例
envelope-taller.png
Figure 1: 一個圖像的顯示。
您可以使用subfigure標籤把兩個圖片放置在相同的figure（插圖）裏。當您有兩個相關圖片，而想要將其並列放置或者上下放置時，這個標籤相當有用；要在同一個插圖裏顯示兩個圖片，請在您的模組的index.cnxml檔案裏插入CNXML的輸入，類似於下列的例子： 
         
     <figure id="figure-2" orient="horizontal">
        <subfigure id="subfigure-1">
          <name>較大圖像及信封</name>
          <media type="image/png" src="envelope-taller.png"/>
          <caption>
          子插圖1。
          </caption>
        </subfigure>
        <subfigure id="subfigure-2">
          <name>較小圖像及信封</name>
          <media type="image/png" src="envelope.png"/>
          <caption>
            子插圖2。            
          </caption>
        </subfigure>
 	<caption>在一個插圖裏水平顯示兩個圖片。</caption>
     </figure>
上方CNXML例子的實際顯示為：
較大圖像及信封較小圖像及信封
envelope-taller.pngenvelope.png
Subfigure 2.1: 子插圖1。
Subfigure 2.2: 子插圖2。
Figure 2: 在一個插圖裏水平顯示兩個圖片。
orient（方向）屬性值可以是horizontal（水平）或vertical（垂直），以及定義圖片如何安排在插圖（figure）裏。

模組的線上版本及列印版本所包含的圖片

如果您模組裏面圖片的大小，符合您線上觀看時的大小，但當您列印此模組時卻顯得太大時；Connexions讓您可以在模組裏插入一個附加的圖片檔案，讓其格式及大小符合列印版本所需。eps格式的圖片檔案，是使用在Connexions模組列印版本裏較佳的格式。如果您的模組包含相同圖片的eps檔案及png檔案；當Connexions產生一個列印版本的PDF檔時，Connexions會使用eps檔案；而如果在線上顯示模組時，會使用png檔案。
底下是說明如何在您的模組裏為列印版本插入附加的圖片檔案：
  1. 請建立您的圖片檔案的一個eps格式版本，這個圖片應調整成適合的大小。
  2. 請在index.cnxml檔案裏插入這個eps檔案的一個media type（媒體型式）輸入，位在線上顯示的圖片檔案輸入上方。此圖片檔案應該有相同的名稱，而副檔名應該指定其檔案型式。例如，image1.png是給線上使用的，而image1.eps是給列印使用的。
  3. 請增加eps圖片檔案至此模組。
底下是需要包含附加圖片所需的CNXML編碼的一個例子： 
	   
	    <figure id='printimage'>
	     <media type='application/postscript' src='image.eps'>
	      <media type='image/png' src='image.png'/>
             </media>
            </figure>
注意: 在index.cnxml檔案裏，列印圖片（eps）的輸入必須出現在線上圖片（png）的輸入上方；線上圖片的輸入應該縮排，以及被嵌入在另一個圖片輸入裏面。

建立一個圖片連結至一個較大的版本

您也可以顯示一個圖片，讓它被點擊後顯示成一個較大版本的圖片。底下是其處理的方法：
  1. 請建立您的圖片檔案的一個縮圖版本。
  2. 請將原圖大小及縮圖大小的圖片插入至一個media type（媒體型式）輸入，如下列例子所示。
  3. 請增加原圖大小及縮圖的圖片檔案至模組裏。
底下是含有一個縮圖圖片連結至一個原圖版本所需的CNXML編碼例子： 
	   
	    <figure id='thumbnail'>
	     <media type='image/png' src='TajMahal_medium.jpg'>
	      <param name='thumbnail' value='TajMahal_Thumb.jpg'/>
             </media>
            </figure>
上方CNXML例子的實際顯示為：
TajMahal_medium.jpg
Figure 3: Steve Evans所攝泰姬瑪哈陵的照片。在Creative Commons Attribution License授權許可之下刊載。

Flash 物件

您可以在您的模組裏插入一個Flash物件，底下是包含一個Flash物件所需的CNXML編碼例子： 
         <figure id='flashfig'>
	  <media type="application/x-shockwave-flash" src="flash.swf">
	    <param name='height' value='250'/>
            <param name='width'  value='250'/>
          </media>
	  <caption>Flash物件範例："Welcome to Connexions"。</caption>
         </figure>
出現在您模組裏的Flash物件，類似於一個影片或一個圖片所出現的方式。
Figure 4: Flash物件範例："Welcome to Connexions"。
注意: 上方例子是鑲嵌在figure標籤裏面，可以使用圖片說明解釋Falsh物件的意義，此figure標籤並不需要在模組裏包含這些媒體物件。

影片

底下是您可以包含在您模組裏的一些影片型式，您可以插入這些型式，以及其他任何可以插入至一個網頁的影片型式。
  • quicktime
  • mpeg
可以藉由如同下列的編碼方式將影片增加至您的模組： 
        
	<figure id='moviefig2'>
	  <media type="video/mpeg" src="Building_on_the_Past.mpg">
	    <param name="width" value="450"/>
	    <param name="height" value="400"/>
	    <param name="autoplay" value="false"/>
	  </media>
	  <caption>Creative Commons 影片："Building on the Past"，請點擊Play（播放）按鍵以開始觀看。</caption>
	</figure>
上方CNXML例子的實際顯示為：
Figure 5: Creative Commons 影片："Building on the Past"，請點擊Play（播放）按鍵以開始觀看。
注意: 上方例子是鑲嵌在figure標籤裏面，可以使用圖片說明解釋影片的意義，此figure標籤並不需要在模組裏包含這些媒體物件。

Java 程式

可以藉由如同下列的編碼方式將Java（爪哇）程式增加至您的模組： 
        
	<figure id="javafig">
          <media type="application/x-java-applet" src="PhasorDemo.class">
            <param name="width" value="430"/>
            <param name="height" value="500"/>
	  </media>
          <caption>一個複變數正弦曲線的3D動畫，請點擊Run（執行）按鍵以開啟動畫。</caption>
        </figure>
上方CNXML例子的實際顯示為：
Figure 6: 一個複變數正弦曲線的3D動畫，請點擊Run（執行）按鍵以開啟動畫。
如果上方動畫並沒有出現，您可能需要安裝或更新Java外掛程式在您的電腦上，請至java.com下載Java外掛程式的最新版本。
注意: 上方例子是鑲嵌在figure標籤裏面，可以使用圖片說明解釋Java Applet的意義，此figure標籤並不需要在模組裏包含這些媒體物件。

聲音檔案

聲音檔案例如mp3、real audio、及wav檔案，可以快速及容易地插入至您的模組裏。要在您的文件裡包含聲音檔案，請在您的index.cnxml文件裏上傳對應的聲音檔案及類似下方的編碼： 
         
      	 <figure id='musicscale'>
      	  <media type="audio/x-wav" src="chromatic_slurred.wav"/>
      	  <caption>由Michael Lawrence所吹奏單簧管的半音音階。</caption>
         </figure>
上方CNXML例子的實際顯示為：
Audio File: chromatic_slurred.wav
Figure 7: 由Michael Lawrence所吹奏單簧管的半音音階。
注意: 上方例子是鑲嵌在figure標籤裏面，可以使用圖片說明解釋聲音檔案的意義，此figure標籤並不需要在模組裏包含這些媒體物件。

LabVIEW 圖形化程式示範

有關於在您的模組裏包含LabVIEW圖形化程式示範的相關資訊，請查閱Creating LabVIEW demonstrations for Connexions。

媒體型式參數

一些多媒體物件需要一些選項或參數以適當地顯示出來，您可以藉由param（參數）標籤傳遞資訊至多媒體物件，此標籤在media（媒體）標籤裏，而不需要變更media（媒體）標籤。請查閱CNXML Language Specification（CNXML語言說明書）裏有關param標籤的描述，以獲得更多資訊。
底下是一個影片（mpg）物件的param（參數）標籤輸入的例子： 
      	 
      	 <media type="video/mpeg" src="testmovie.mpg">
       	   <param name="width" value="300"/>
      	   <param name="height" value="300"/>
      	 </media>
注意: 您應該對任何影片、Flash物件、或Java程式設定高度（height）及寬度（width）參數，使它們在線上以適合的大小顯示；預設使用的高度及寬度單位為pixels畫素，在上方例子中，影片顯示成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
  • Java Applets (application/x-java-applet): height, width, code, codebase, archive
  • Audio (audio/*): title, volume
  • LabVIEW (application/x-labview): viinfo (See Creating LabVIEW demonstrations for Connexions for more information.)
注意: param（參數）標籤，允許您指定插入至XHMTL文件的一個物件在電腦運作時的設定。

param（參數）及替換圖片

如果您使用嵌入式的media（媒體）標籤以提供一個替換圖片顯示，例如一個照片出現在模組的列印版本，以取代出現在線上版本的一個影片；請在替換圖片的被嵌入的media媒體輸入之前，插入原本圖片的param（參數）輸入，如同下列例子所示： 
      	 
         <media type="video/mov" src="howto.mov">
           <param name="height" value="250" />
           <param name="width" value="250" />
           <media type="image/png" src="novideo.png />
         </media>

Comments, questions, feedback, criticisms?

Send feedback