主 題 文 章
網頁嵌入PDF、影音、聲音、Flash、youtube的Html語法運用

網頁嵌入PDF、影音、聲音、Flash、youtube的Html語法運用

embed:
video, mp3, flash, pdf
<embed src="檔案位置網址" width="寬度" height="高度"></embed>


聲音
影音
pdf
flash
youtube


要把影音、聲音、Flash以及PDF檔嵌入網頁中,embed語法是通用的語法。如下:

<embed src="檔案位置網址" width="寬度" height="高度"></embed>

再來,因為不同的寫作元素,如影音、聲音、Flash,都有各自表現上的特色。所以會在
上面的基本語法中再加入不同的控制項。我們先以聲音的嵌入語法為例,讓同學有一個
基本印象。


聲音檔嵌入語法:
<embed src="影片網址.mp3" width="200" height="40" type="audio/mpeg" autostart="false" loop="false" ></embed>

語法效果:


說明:
src="http://xxx" 就是聲音檔在網路空間位置網址。
autostart="true" 要自動播放;autostart="false" 不要自動播放。
loop="false" 不要重覆音樂;loop="true" 要重覆音樂;loop="2" 重覆2次。
type="xx" 指定播放的音樂檔案類型,本例為mp3。

我們可以看到,這是在embed基本語法中再加入更多控制項。上述的三個都是和控制聲音
檔的播放有關。


影音的嵌入,目前通用的作法是把youtube影音,直接嵌入到網頁。請看教案最下方的影音教學。
影音檔嵌入語法(改用iframe):

<iframe style="width:寬度px; height:高度px;"
src="影片網址">
</iframe>

下列語法實例:

<iframe style="width: 520px; height: 340px;"
src="影片網址">
</iframe>


語法效果:


說明:
1. 使用 iframe 格式,是受不同瀏覽器功能之差異影響最小之語法。

2. 使用style=" " 來設定寬、長時,長度要記得設。

這些效果有時也會因電腦內部設定及軟體選擇及版本新舊,會有影響。
基本上在此我們並不要求同學去細究這些參數選項的功能。同學只要大致理解這些嵌入
語法基本的樣態就可以了。


嵌入Pdf檔
Pdf很常用,尤其功能愈來愈強。嵌入Pdf檔的語法和上面是相同的。語法:
<embed src="影片網址.pdf" height="400" width="560">
語法效果:

語法說明:
嵌入Pdf檔的語法簡單,沒有太多控制變項。src="xxx"中把檔案網址位置填入xxx中。寬度和高度要注意一下。


再來是flash的嵌入語法。
<embed base="." height="400" loop="true" menu="true" play="true" src="影片網址.swf" type="application/x-shockwave-flash" width="580" wmode="transparent"></embed>

語法效果:(請click照片)


flash語法說明:
我們看到,和音樂播放的語法比較起來,又有一些不同控制參數。
同時可以看到控制參數的前後順序並不會對語法的執行有影響。再來,
base="." 是要求當flash檔案和html檔案不在同一目錄下,可以去尋找外部的flash檔案。
wmode="transparent" 是指將flash的背景變為透明。

embed語法學習總說明:
在這一部分,同學主要是能大概掌握各式多媒體寫作元素的嵌入語法形態即可以了,換言之在看html原始碼時,能看得出這是嵌入的語法即成。
不管是聲音、影音或是flash,在控制參數上都還有各自更多的參數選項。在此無法一一列舉。有興趣進一步研究的同學,可以在網路上找到更多參考資料。在這裡選用的參數是在做數位內容時常用的參數選項。
各種控制參數常常因為使用者電腦軟、硬體的配備和設置,或是使用的軟體不同(如用IE或Chrome等)以及版本的新舊,有時會有失效的狀況。
本書的教學內容所著重的在於使不同寫作元素來寫作數位多媒體文本,整體而言的教學訓練重心在於運用多媒體來表達想法,換言之,如何把想法以「多媒介」的形式來呈現。因之,並不會特別用力於各種控制參數的介紹。
在往下的教學過程,我們儘可能的運用一些能主動提供嵌入語法的使用工具,例如用Youtube影片所提供分享/嵌入功能項下所提供的影音嵌入語法,以及提供聲音檔嵌入的語法產生器,儘可能減少同學在「語法」方面所可能碰到困難,將更多心力投注在數位多媒體文本寫作上的思考。
在往下的教學中,如無法找到適當的html語法自動產生模式,我們亦會提供通用型的語法給同學,同學只要跟著抄進去就成了。


使用html嵌入影音語法影音教學:


影音教學內容補充說明:
把影音檔案上傳到網路空間並找出檔案的網址,請按這裡。
影音檔案要轉換格式,例如將聲音檔轉成mp3,請按這裡。
mp3嵌入語法產生器網址,請按這裡。




*新版* 直接把youtube 嵌入到網頁的Html語法使用:




語法:

<iframe width="560" height="315" src="影片網址" frameborder="0" allowfullscreen></iframe>

★★如何從寬度計算出高度?

目前影片一般而言都是16:9的比例,所以寬度x(9/16)=高度。
例如,寬度400px,400x9/16=225,高度即225px。


★請 問,<iframe xxx>和<img xxx>有什麼不同呢?

<iframe xxx>可以用來置放影音(video),而<img xxx>則是用來置放照片。
這兩者都是inlne-block編輯物件元素,不是區塊。也就是要當 成「大字元」來看。如果沒有在後面加上 <br> 來斷行,文字(或編輯物件)會跟在後面。

例如:
<iframe width="560" height="315" src="影片網址" frameborder="0" allowfullscreen></iframe><br>後 面的文字才斷行。



★請 問,如何將影音居中?

<div style="text-align: center;">
<iframe width="560" height="315" src="影片網址" frameborder="0" allowfullscreen></iframe><br>
</div>

說明:

<iframe xxx>是一般編輯物件,所以就可以利用<div>的內文對齊功能,將video物件,居中對齊。



★請 問,影音的文繞圖版型要如何來做?

文繞圖的文本表現形態,圖像(img)和影音(iframe)都是相同的,都要加入 align="left" 這個標記,// left, right,靠左、靠右。文繞圖呈現樣態,請看此。


語法:

<iframe width="560" height="315" align="left" src="影片網址" frameborder="0" allowfullscreen></iframe>這是文繞圖的文字。<br>





姓 名: ☆☆☆☆☆ ☆☆☆☆ ☆☆☆ ☆☆
標 題:
內 容:


4C快修-台北維修電腦,三重維修電腦,台北組裝電腦,三重組裝電腦,維修電腦台北,維修電腦三重,台北維修手機,三重維修手機,維修手機台北,維修手機三重,組裝電腦台北,組裝電腦三重,台北維修平板,三重維修平板,維修平板台北,維修平板三重,台北維修筆電,三重維修筆電,維修筆電台北,維修筆電三重.

 友站連結 : 4C快修連鎖 | 三重店 | 蘆洲店 | 林口店 | 維修加盟 | 修手機修平板 | 修電腦修筆電 | 買賣手機平板買賣 | 買賣電腦筆電買賣
        台北修手機維修三重   三重修電腦修理新莊   新莊修筆電維修蘆洲   蘆洲修平板修理板橋
        板橋修iphone維修台北   台北修htc修理士林   士林修sony維修林口   林口修ipad修理台北
        新北三重店   新北蘆洲店   台北修三星修理三重   新北林口店
        (02)2973-7288   (02)2288-8819   三重修samsung修理台北   (02)2609-2187
        新北市林口區重新路三段86號   新北市蘆洲區和平路22號   蘆洲修電腦修理林口   新北市林口區文化三路一段617巷183號

 加盟專區  |  本站公告  |  站內資訊  |  主題新聞  |  購物首頁  |  申請開店  |  連絡我們
 客服電話:(02)2973-7288   |   客服信箱:fixs3c@gmail.com   |    郵遞區號:241
 公司地址:新北市三重區重新路三段86號1樓    |    營業時間:每日上午11點~晚上9點
  版權所有 © 4C快修連鎖       |    修手機修電腦修筆電修平板 維修買賣門市