圖像與多媒體圖像與多媒體_第1頁
圖像與多媒體圖像與多媒體_第2頁
圖像與多媒體圖像與多媒體_第3頁
圖像與多媒體圖像與多媒體_第4頁
圖像與多媒體圖像與多媒體_第5頁
已閱讀5頁，還剩29頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第4章圖像與多媒體多媒體元素包括圖像元素、視頻元素和音頻元素。在第2章中我們使用了圖像作背景對盒子模型進(jìn)行美化。本章將繼續(xù)探討與圖像相關(guān)的內(nèi)容，學(xué)習(xí)插入圖像、圖像熱區(qū)等圖像基本應(yīng)用以及圖像相關(guān)的樣式；并在圖像背景的基礎(chǔ)上，進(jìn)一步學(xué)習(xí)CSS雪碧圖的原理和用法；最后介紹網(wǎng)頁視頻、音頻等多媒體元素了解圖像元素、視頻元素、音頻元素的基本標(biāo)簽和基本屬性理解CSS圖像熱區(qū)的基本原理和用法掌握CSS雪碧圖的的基本應(yīng)用方法能熟練使用圖像元素進(jìn)行頁面美化內(nèi)容安排網(wǎng)頁圖像4.1CSS雪碧圖（Sprite）4.2多媒體網(wǎng)頁4.3小試牛刀4.44.1網(wǎng)頁圖像文字與圖像是構(gòu)成一個(gè)網(wǎng)頁的兩個(gè)最基本的元素。如果說文字是負(fù)責(zé)網(wǎng)頁的內(nèi)容，那么圖像就負(fù)責(zé)網(wǎng)頁的美觀。對于網(wǎng)頁圖像，一般需要考慮以下幾個(gè)因素，包括圖像的格式、圖像的尺寸、圖像的透明性等。網(wǎng)頁圖像4.14.1.1網(wǎng)頁圖像標(biāo)簽<img>格式：<imgsrc="image-URL"/>4.1.2圖像熱區(qū)

格式：<img

src=”圖像文件”

usemap="#MAP-Name">

<map

name="MAP-Name">

<areashade=”形狀”coords=“坐標(biāo)”href=“URL”>

</map>

形狀shape屬性coords屬性coords屬性取值含義矩形shape="rect"coords="x1,y1,x2,y2"coords表示矩形左上(x1,y1)及右下(x2,y2)的坐標(biāo)圓形shape="circle"coords="x,y,r"coords表示圓中心點(diǎn)坐標(biāo)(x,y)及半徑多邊形shape="poly"coords="x1,y1,x2,y2,x3,y3..."coords表示多邊形所有頂點(diǎn)的坐標(biāo)(x1,y1),(x2,y2),(x3,y3)...網(wǎng)頁圖像4.14.1.3圖像相關(guān)樣式 與圖像相關(guān)的CSS樣式屬性有：寬度屬性width；高度屬性height；邊框?qū)傩詁order，使用border屬性可以創(chuàng)建縮略圖；圓角屬性border-radius，通過使用border-radius屬性可以創(chuàng)建圓形圖像；不透明度屬性opacity，該屬性設(shè)置一個(gè)圖像的不透明度，屬性值從0.0（完全不透明）到1.0（完全透明），默認(rèn)值為1。4.1.4Bootstrap圖片類Bootstrap提供了三個(gè)可對圖片應(yīng)用簡單樣式的預(yù)定義類“.rounded”、“.rounded-circle”和“.img-thumbnail”。這三個(gè)類的功能與效果見表4-2所示。類功能應(yīng)用效果.rounded添加border-radius:6px來獲得圖片圓角<imgsrc="t1.jpg"class="rounded">.rounded-circle添加border-radius:50%來讓整個(gè)圖片變成圓形<imgsrc="t1.jpg"class="rounded-circle">img-thumbnail添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框<imgsrc="t1.jpg"class="img-thumbnail">4.1.5圖像應(yīng)用案例4.1案例4-1：在網(wǎng)頁中插入三個(gè)圖像，分別定義其替代文字和鼠標(biāo)經(jīng)過時(shí)的文字。三個(gè)圖像分別使用Bootstrap預(yù)定義類.img-thumbnail、.rounded-circle和.rounded，使之分別呈現(xiàn)縮略圖效果、橢圓邊框效果和圓角邊框效果。三個(gè)圖像分別加上超級鏈接<a>標(biāo)簽，在網(wǎng)頁中點(diǎn)擊圖像會在新窗口打開相應(yīng)的圖像文件。設(shè)置三個(gè)圖像的不透明度為0.5，使之模糊；鼠標(biāo)經(jīng)過時(shí)將不透明度改為1，使之變?yōu)榍逦?lt;!doctypehtml><html><head><metacharset="utf-8"><title>案例4-1</title><linkhref="css/bootstrap.min.css"rel="stylesheet"><style> a:link,a:visited{opacity:0.5;} a:hover{opacity:1;}</style></head><body><ahref="images/t1.jpg"target="_blank"><imgsrc="images/t1.jpg"width="190"height="361"class="img-thumbnail"alt="衣服1"title="紅色風(fēng)衣399元"></a><ahref="images/t2.jpg"target="_blank"><imgsrc="images/t2.jpg"width="190"height="361"class="rounded-circle"alt="衣服2"title="羊毛大衣439元"></a><ahref="images/t3.jpg"target="_blank"><imgsrc="images/t3.jpg"width="190"height="361"class="rounded"alt="衣服3"title="杏色經(jīng)典大衣180元"/></a></body></html>4.1.6任務(wù)4-1：運(yùn)用圖像熱區(qū)制作地圖鏈接頁面4.11.任務(wù)描述本任務(wù)制作4個(gè)網(wǎng)頁，其中yts.html為陽臺山森林公園網(wǎng)頁；dpz.html為大屏障森林公園網(wǎng)頁、nms.html為南門山森林公園網(wǎng)頁。主網(wǎng)頁為一張地圖，如圖4-2所示。點(diǎn)擊地圖中陽臺山森林公園、大屏障森林公園、南門山森林公園所在位置，在新窗口打開相應(yīng)的網(wǎng)頁。2.任務(wù)要求通過地圖鏈接頁面的制作，掌握并鞏固<img>標(biāo)簽的用法；要熟練使用Bootstrap圖片類；能運(yùn)用圖像熱區(qū)創(chuàng)建網(wǎng)頁。3.任務(wù)分析使用Bootstrap圖片類對三個(gè)森林公園的網(wǎng)頁圖片進(jìn)行美化，分別呈現(xiàn)橢圓、圓角、縮略圖三種效果；主網(wǎng)頁插入圖像地圖pic.jpg，分別在陽臺山森林公園、大屏障森林公園、南門山森林公園所在位置定義三種不同形狀（矩形、圓形、多邊形）的熱區(qū)，點(diǎn)擊圖像熱區(qū)，在新窗口打開相應(yīng)的網(wǎng)頁。定義熱區(qū)形狀時(shí)需使用Dreamweaver設(shè)計(jì)視圖的地圖熱點(diǎn)工具，自動生成坐標(biāo)代碼。4.1.6任務(wù)4-1：運(yùn)用圖像熱區(qū)制作地圖鏈接頁面4.14.工作過程步驟1站點(diǎn)規(guī)劃新建文件夾作為站點(diǎn)；站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；步驟2新建陽臺山森林公園網(wǎng)頁（1）新建網(wǎng)頁，設(shè)置<title>為“陽臺山森林公園”；網(wǎng)頁命名為yts.html保存在站點(diǎn)所在的目錄；（2）網(wǎng)頁yts.html在頭元素引入Bootstrap內(nèi)核文件，最外層用div.container包裹，里面的內(nèi)容包含標(biāo)題欄div.h1元素和img圖像元素。img圖像元素使用rounded類，作圓角處理，設(shè)置其替代文字和鼠標(biāo)經(jīng)過時(shí)的文字為“陽臺山森林公園”，效果如圖4-3所示4.1.6任務(wù)4-1：運(yùn)用圖像熱區(qū)制作地圖鏈接頁面4.1步驟3新建南門山森林公園網(wǎng)頁（1）新建網(wǎng)頁，設(shè)置<title>為“南門山森林公園”；網(wǎng)頁命名為nms.html保存在站點(diǎn)所在的目錄；（2）網(wǎng)頁nms.html的結(jié)構(gòu)與yts.html相同。img圖像元素使用rounded-circle類，作橢圓狀，設(shè)置其替代文字和鼠標(biāo)經(jīng)過時(shí)的文字為“南門山森林公園”，效果如圖4-4所示步驟4新建大屏障森林公園網(wǎng)頁（1）新建網(wǎng)頁，設(shè)置<title>為“大屏障森林公園”；將網(wǎng)頁命名為dpz.html保存在站點(diǎn)所在的目錄；（2）網(wǎng)頁dpz.html的結(jié)構(gòu)與yts.html相同。img圖像元素使用img-thumbnail類，作縮略圖狀，設(shè)置其替代文字和鼠標(biāo)經(jīng)過時(shí)的文字為“大屏障森林公園”，效果如圖4-5所示4.1.6任務(wù)4-1：運(yùn)用圖像熱區(qū)制作地圖鏈接頁面4.1步驟5創(chuàng)建主網(wǎng)頁文件（1）新建網(wǎng)頁，設(shè)置<title>為“任務(wù)4-1”，將網(wǎng)頁命名為task4-1.html保存在站點(diǎn)所在的目錄；（2）在網(wǎng)頁task4-1.html中插入圖像pic.jpg，并輸入替代文字"地圖"；（3）在DW設(shè)計(jì)視圖打開屬性窗口，點(diǎn)擊左下角的地圖工具的矩形按鈕，如圖4-6所示，在陽臺山森林公園所在位置定義矩形熱區(qū)，設(shè)置熱點(diǎn)鏈接為“yts.html”；設(shè)置目標(biāo)為“_blank”，即點(diǎn)擊矩形圖像熱區(qū)會在新窗口打開yts.html網(wǎng)頁。（4）DW設(shè)計(jì)視圖點(diǎn)擊左下角的地圖工具的圓形按鈕，在大屏障森林公園所在位置定義圓形熱區(qū)，設(shè)置熱點(diǎn)鏈接為“dpz.html”；設(shè)置目標(biāo)為“_blank”，即點(diǎn)擊圓形圖像熱區(qū)會在新窗口打開dpz.html網(wǎng)頁。（5）DW設(shè)計(jì)視圖點(diǎn)擊左下角的地圖工具的多邊形按鈕，在南門山森林公園所在位置勾勒出多邊形，定義多邊形熱區(qū)，設(shè)置熱點(diǎn)鏈接為“nms.html”；設(shè)置目標(biāo)為“_blank”，即點(diǎn)擊多邊形圖像熱區(qū)會在新窗口打開nms.html網(wǎng)頁。步驟6保存文件task4-1.html，完成制作。4.2CSS雪碧圖（Sprite）雪碧圖又叫精靈圖，是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用CSS的背景定位來顯示需要顯示的圖片部分。CSS雪碧圖（Sprite）4.24.2.1雪碧圖技術(shù)概述CSS雪碧圖片使用background-image和background-position屬性進(jìn)行渲染。圖片是在CSS中定義的背景圖，而非<img>標(biāo)簽。如果要使用圖4-7所示的第一個(gè)“笑臉”表情，需在頁面上設(shè)置一個(gè)寬為150px；高為150px的盒子。盒子使用圖4-7的雪碧圖作為背景圖，并將背景圖的位置background-position設(shè)置為（0，0）即可。雪碧圖位置示意如圖4-8所示，圖片中有標(biāo)記部分即“笑臉”表情的位置為（0，0）。如果想顯示其他表情，例如要顯示第2行第3個(gè)表情，即“哭臉”表情。這時(shí)需要將背景圖的位置在水平方向左移300px，在垂直方向上移150px。反映在background-position屬性上是一個(gè)負(fù)值，即（-300，-150）。4.2.2雪碧圖（Sprite）技術(shù)應(yīng)用案例4.2案例4-2：把一個(gè)超級鏈接用CSS做成按鈕的樣式。按鈕使用如圖4-10所示的雪碧圖作背景。按鈕的三個(gè)狀態(tài)，即a:link，a:hover，a:active分別取雪碧圖上、中、下三個(gè)部分。<!doctypehtml><html><head><metacharset="utf-8"><title>案例4-2</title><style>a{display:block;width:200px;height:65px;line-height:65px;/*定義按鈕基本樣式*/text-indent:-2015px;/*隱藏文字*/background-image:url(images/button.png);/*定義背景圖片*/}a:link{background-position:00;/*定義鏈接的普通狀態(tài)，此時(shí)圖像顯示的是頂上的部分*/}a:hover{background-position:0-66px;/*定義鏈接的滑過狀態(tài)，此時(shí)顯示中間部分，向下取負(fù)值*/}a:active{background-position:0-132px;/*定義鏈接的按下狀態(tài)，此時(shí)顯示下面部分，向下取負(fù)值*/}</style></head><body><ahref="#">鏈接</a></body></html>4.2.3任務(wù)4-2：使用雪碧圖技術(shù)制作頁面4.21.任務(wù)描述使用如圖4-12所示的雪碧圖制作網(wǎng)頁。頁面效果如圖4-11所示。頁面從上到下分為標(biāo)題、導(dǎo)航、最新文章、前端商城和頁腳五部分。導(dǎo)航在鼠標(biāo)經(jīng)過時(shí)呈現(xiàn)出高光效果。2.任務(wù)要求本任務(wù)所有圖像要求使用一張雪碧圖（如圖4-12所示）。通過本任務(wù)的練習(xí)，要熟練掌握雪碧圖的基本應(yīng)用，尤其是在超級鏈接的背景中使用雪碧圖的技巧和方法。4.2.3任務(wù)4-2：使用雪碧圖技術(shù)制作頁面4.23.任務(wù)分析本任務(wù)的關(guān)鍵是確定雪碧圖中圖標(biāo)的大小和位置。用Photoshop打開雪碧圖，首先將默認(rèn)的尺寸單位改為像素，方法如下：（1）點(diǎn)擊菜單欄“編輯-首選項(xiàng)”，打開首選項(xiàng)對話框；（2）在首選項(xiàng)對話框中，點(diǎn)擊“單位與標(biāo)尺”，如圖4-13所示，將標(biāo)尺單位改為像素。（3）用矩形選框選中圖標(biāo)，在菜單欄點(diǎn)擊“窗口-信息”，打開信息窗口，在W和H值可見圖標(biāo)的尺寸，如圖4-14所示。（4）把鼠標(biāo)放在矩形選框的左上角，在信息窗口的X和Y可見圖標(biāo)的位置，如圖4-14所示。4.2.3任務(wù)4-2：使用雪碧圖技術(shù)制作頁面4.24.工作過程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁，設(shè)置<title>為“任務(wù)4-2”；將網(wǎng)頁命名為task4-2.html保存在站點(diǎn)所在的目錄。步驟2建立網(wǎng)頁的基本結(jié)構(gòu)（1）網(wǎng)頁task4-2.html最外層為div#container，里面從上到下包含div#banner、div#nav、“最新文章”標(biāo)題、“最新文章”內(nèi)容、“前端商城”標(biāo)題、“前端商城”內(nèi)容、div#footer；（2）設(shè)置最外層div#container寬度720px，高度1280px，加框線。4.2.3任務(wù)4-2：使用雪碧圖技術(shù)制作頁面4.2步驟3制作橫幅（1）輸入div#banner的內(nèi)容：在文字前面加入i元素用于顯示圖標(biāo)；（2）設(shè)置i元素的樣式：i元素用于在網(wǎng)頁中呈現(xiàn)圖標(biāo)，設(shè)置為行內(nèi)塊，與同一行文字的對齊方式為中間對齊；采用雪碧圖為背景；（3）設(shè)置div#banner的樣式：高度為96px，設(shè)置文字大小、顏色和垂直居中，底部加上一條框線；（4）設(shè)置div#banner中i元素的背景雪碧圖的大小和位置：參照本節(jié)任務(wù)分析中介紹的方法，如圖4-14框線所示，div#banner中i元素的尺寸為寬度80px高度為80px，雪碧圖背景位置為（-100px-500px）。完成設(shè)置后的效果如圖4-15所示。4.2.3任務(wù)4-2：使用雪碧圖技術(shù)制作頁面4.2步驟4制作導(dǎo)航（1）建立導(dǎo)航的基本結(jié)構(gòu)；（2）設(shè)置導(dǎo)航的基本樣式：ul元素去掉項(xiàng)目符號和默認(rèn)的內(nèi)外邊距；（3）設(shè)置導(dǎo)航div#nav高度為350px，底部加框線；（4）設(shè)置li元素為行內(nèi)塊，并且頂端對齊，使各個(gè)鏈接水平排列；設(shè)置#nav下的ul元素字符間隔為-5px，以消除行內(nèi)塊之間的距離；（5）設(shè)置a元素為塊狀元素，寬度為40px，高度為350px。該尺寸為雪碧圖背景通過PS測出的導(dǎo)航圖標(biāo)的尺寸（參照本節(jié)任務(wù)分析介紹的方法）；（6）設(shè)置導(dǎo)航中5個(gè)超級鏈接的樣式：每個(gè)鏈接都使用雪碧圖作背景，雪碧圖位置通過PS測得在水平方向間隔為80px，垂直方向無變化；鼠標(biāo)經(jīng)過時(shí)，各個(gè)鏈接的背景圖位置左移40px，為高光背景圖；（7）設(shè)置導(dǎo)航右側(cè)的行內(nèi)塊li.item6的樣式：參照本節(jié)任務(wù)分析介紹的方法使用雪碧圖背景，并且設(shè)置margin-left:120px;與導(dǎo)航保持120px的距離。導(dǎo)航效果如圖4-16所示。4.2.3任務(wù)4-2：使用雪碧圖技術(shù)制作頁面4.2步驟5制作“最新文章”的內(nèi)容（1）輸入“最新文章”的內(nèi)容；（2）設(shè)置“最新文章”標(biāo)題的樣式：在標(biāo)題處使用i元素顯示雪碧圖圖標(biāo)，參照本節(jié)任務(wù)分析中介紹的方法，確定圖標(biāo)尺寸和位置；（3）設(shè)置“最新文章”內(nèi)容的樣式：在內(nèi)容處li元素使用i元素顯示雪碧圖圖標(biāo)，參照本節(jié)任務(wù)分析中介紹的方法，確定圖標(biāo)尺寸和位置；（4）設(shè)置超級鏈接a元素的樣式，完成設(shè)置之后的效果如圖4-17所示。4.2.3任務(wù)4-2：使用雪碧圖技術(shù)制作頁面4.2步驟6制作“前端商城”的內(nèi)容（1）輸入“前端商城”的內(nèi)容；（2）設(shè)置“前端商城”標(biāo)題的樣式；（3）設(shè)置“前端商城”內(nèi)容的樣式，完成設(shè)置之后的效果如圖4-18所示。步驟7制作頁腳（1）輸入頁腳內(nèi)容；（2）設(shè)置頁腳樣式步驟8保存文件，完成制作。4.3多媒體網(wǎng)頁在網(wǎng)頁中，多媒體元素扮演重要的角色。多媒體元素主要是指聲音和視像。由于聲音和視像從采集、制作到發(fā)布，每一個(gè)環(huán)節(jié)都涉及不同的公司，采用不同的軟件，使用不同的硬件設(shè)備，因而音視頻的格式眾多。多媒體網(wǎng)頁4.3

格式描述mp3ISO音頻格式，在低至64kbps的比特率下提供接近CD音質(zhì)的音頻質(zhì)量。mp4MPEG4文件使用H264視頻編解碼器和AAC音頻編解碼器mid電子樂器的演奏控制格式，通常不帶有音頻采樣wav支持的編碼技術(shù)大部分只能在Windows平臺下使用，用于音頻原始素材保存。avi音頻視頻交錯(cuò)(AudioVideoInterleaved)的英文縮寫，由微軟公司發(fā)表的視頻格式，在視頻領(lǐng)域可以說是最悠久的格式之一。wma在Windows平臺下使用的音頻格式。wmv一種獨(dú)立于編碼方式的在Internet上實(shí)時(shí)傳播多媒體的技術(shù)標(biāo)準(zhǔn)，Microsoft公司希望用其取代QuickTime之類的技術(shù)標(biāo)準(zhǔn)以及WAV、AVI之類的文件擴(kuò)展名movQuickTime的視頻格式，QuickTime是Apple公司的一種圖像視頻處理軟件flvFLV是FLASHVIDEO的簡稱，F(xiàn)LV流媒體格式解決了視頻文件導(dǎo)入Flash后，使導(dǎo)出的SWF文件體積龐大，不能在網(wǎng)絡(luò)上很好的使用等缺點(diǎn)WebM由Google提出，是一個(gè)開放、免費(fèi)的媒體文件格式,使用VP8視頻編解碼器和Vorbis音頻編解碼器oggHTML5通用音視頻格式,使用Theora視頻編解碼器和Vorbis音頻編解碼器多媒體網(wǎng)頁4.3

4.3.1音頻視頻相關(guān)標(biāo)簽與音頻視頻相關(guān)的標(biāo)簽有音頻標(biāo)簽<audio>標(biāo)簽、視頻標(biāo)簽<video>、媒體嵌入標(biāo)簽<embed>、對象標(biāo)簽<object>、圖形標(biāo)簽<figure>和圖形標(biāo)題標(biāo)簽<figcaption>。1.音頻標(biāo)簽<audio> 格式：<audiocontrols> <sourcesrc="多媒體文件url"> …

</audio>功能：audio元素用于定義聲音，比如音樂或其他音頻流。audio元素支持三種文件格式：mp3、Wav、Ogg?？梢栽?lt;audio>和</audio>之間放置文本內(nèi)容，這些文本信息將會被顯示在那些不支持<audio>標(biāo)簽的瀏覽器中。controls屬性供添加播放、暫停和音量控件。由于HTML5取消了自動播放，所有的媒體都需要用戶驅(qū)動，所以controls是必須要有的屬性。audio元素允許使用多個(gè)source元素。source元素可以鏈接不同的音頻文件，瀏覽器將使用第一個(gè)支持的音頻文件。多媒體網(wǎng)頁4.3

2.視頻標(biāo)簽<video> 格式：<videocontrols> <sourcesrc="多媒體文件url"> …

</video>功能：video元素用于定義視頻，比如電影片段或其他視頻流。video元素支持三種視頻格式：mp4、WebM、Ogg?？梢栽?lt;video>和</video>之間放置文本內(nèi)容，這些文本信息將會被顯示在那些不支持<video>標(biāo)簽的瀏覽器中。controls屬性供添加播放、暫停、全屏控件和音量控件。由于HTML5取消了自動播放，所有的媒體都需要用戶驅(qū)動，所以controls是必須要有的屬性。多媒體網(wǎng)頁4.3

3.媒體嵌入標(biāo)簽<embed>格式：<embedsrc="多媒體文件url">4.對象標(biāo)簽<object> 格式：<objectdata="多媒體文件url"></object>功能：object元素用于定義一個(gè)嵌入的對象。比如圖像、音頻、視頻等，支持wav、ogg、mp3等音頻格式，mp4、WebM、Ogg等視頻格式以及pdf、jpg、png等圖像格式，還可以直接嵌入HTML文檔。5.圖形標(biāo)簽<figure>圖形標(biāo)簽<figure></figure>用于包裹媒體內(nèi)容。多媒體元素包括img、audio、video、embed、object都是行內(nèi)塊元素，而figure元素是塊元素，其內(nèi)容是文檔中的一個(gè)圖像、圖表、照片、代碼等多媒體元素。6.圖形標(biāo)題標(biāo)簽<figcaption>圖形標(biāo)題標(biāo)簽<figcaption></figcaption>用于定義figure元素的標(biāo)題。figcaption元素應(yīng)該被置于figure元素的第一個(gè)或最后一個(gè)子元素的位置。4.3.2多媒體元素應(yīng)用案例4.3

案例4-3：在網(wǎng)頁中使用超級鏈接下載播放音視頻，然后分別用<audio>標(biāo)簽、<video>標(biāo)簽、<embed>標(biāo)簽和<object>標(biāo)簽制作多媒體頁面。mid音頻格式和avi視頻格式已不能被瀏覽器直接打開，使用超級鏈接下載后通過第三方軟件打開播放。a元素用figure塊元素進(jìn)行包裹，并設(shè)置figcaption標(biāo)題；插入<audio>標(biāo)簽來播放音頻。音頻素材分別使用wav、mp3、ogg格式，瀏覽器按此順序找到可播放的第一個(gè)素材資源進(jìn)行播放；插入<video>標(biāo)簽來播放視頻。視頻素材分別使用mp4、ogg、webm格式，瀏覽器按此順序找到可播放的第一個(gè)素材資源進(jìn)行播放；用<embed>標(biāo)簽插入pdf文件，可設(shè)置其尺寸；用<object>標(biāo)簽插入一個(gè)gif圖像對象。<!DOCTYPEHTML><html><body><figure> <figcaption>音視頻下載播放：</figcaption> <ahref="media/midi.mid">音樂</a> <ahref="media/clock.avi">視頻</a></figure><audiocontrols> <sourcesrc="media/01.wav"> <sourcesrc="media/01.mp3"> <sourcesrc="media/01.ogg"> Yourbrowserdoesnotsupporttheaudioelement.</audio><videocontrols="controls"><sourcesrc="media/movie.mp4"><sourcesrc="media/movie.ogg"><sourcesrc="media/movie.webm"></video><embedsrc="media/Princess.pdf"height="360px"><objectdata="media/4041.GIF"></object></body></html>4.3.3任務(wù)4-3：制作音視頻多媒體網(wǎng)頁4.3

1.任務(wù)描述本任務(wù)頁面從上到下分為標(biāo)題、音樂、三段視頻共五部分。標(biāo)題前面插入logo圖標(biāo)；音樂有兩首，歌名后面與播放條并排；三段視頻前面分別有文字作簡單說明，整體效果如圖4-20所示。2.任務(wù)要求本任務(wù)制作帶音頻、視頻的多媒體頁面，要靈活運(yùn)用audio元素、video元素、embed元素和object元素等多媒體元素，掌握其基本使用方法和技巧。3.任務(wù)分析本任務(wù)使用img元素、audio元素、video元素、embed元素和object元素制作多媒體頁面。每部分都用figure元素進(jìn)行包裹。音樂用audio元素，audio元素前面的歌名用行內(nèi)塊定義其統(tǒng)一的寬度。三段視頻分別使用video元素、embed元素和object元素，用figcaption元素制作每一段視頻的文字說明。video元素、embed元素和object元素都可以用來插入視頻，只有video元素可以實(shí)現(xiàn)最大化播放，object元素和embed元素不能進(jìn)行最大化播放。4.24.工作過程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立media文件夾，將本節(jié)素材存放在media文件夾中；（2）新建網(wǎng)頁，設(shè)置<title>為“任務(wù)4-3”；將網(wǎng)頁命名為task4-3.html保存在站點(diǎn)所在的目錄。步驟2建立網(wǎng)頁基本結(jié)構(gòu)（1）網(wǎng)頁task4-3.html最外層為div#container（2）最外層#container寬度設(shè)置為640px，加上邊框。4.3.3任務(wù)4-3：

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論