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

下載本文檔

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

文檔簡(jiǎn)介

圖像和多媒體第一頁(yè)，共二十九頁(yè)，編輯于2023年，星期五1.添加圖像萬維網(wǎng)與其他網(wǎng)絡(luò)類型（如FTP）最大的不同就在于它在網(wǎng)頁(yè)上可以呈現(xiàn)豐富的色彩及圖像。第二頁(yè)，共二十九頁(yè)，編輯于2023年，星期五1.1圖像格式GIF格式GIF格式適合于商標(biāo)、新聞式的標(biāo)題或其他小于256色的圖像。它采用的LZW壓縮不會(huì)造成任何品質(zhì)上的損失，而且壓縮率高，適合在互聯(lián)網(wǎng)上使用。JPEG格式JPEG格式通常用來保存超過256色的圖像格式。PNG格式PNG格式提供了將圖像文件以最小的方式壓縮又不造成圖像失真的技術(shù)。第三頁(yè)，共二十九頁(yè)，編輯于2023年，星期五1.2添加圖像——img語法：<imgsrc=“圖像文件的地址”/>在該語法中，src參數(shù)用來設(shè)置圖像文件所在的地址，可以是相對(duì)路徑，也可以是絕對(duì)路徑。實(shí)例：4-1img.html<body>

<!--在頁(yè)面中居中插入一張圖片--> <center> <imgsrc="pic.jpg"/> </center></body>第四頁(yè)，共二十九頁(yè)，編輯于2023年，星期五1.3圖像高度和寬度——height、width語法：

<imgsrc=“圖像文件的地址”height=“圖像的高度”width=“圖像的高度”/>在該語法中，高度和寬度的單位是像素。如果只設(shè)置了高度或?qū)挾?，則另一個(gè)參數(shù)會(huì)等比例變化。如果同時(shí)設(shè)置兩個(gè)屬性，且縮放比例不同的情況下，圖像很可能會(huì)變形。實(shí)例：4-2height.html、4-3width.html

<!--在頁(yè)面中居中插入兩張圖片--> <center> <!--設(shè)置圖片的寬度為160像素--> <imgsrc="pic.jpg"width="260"/> <!--同時(shí)設(shè)置圖片的高度和寬度--> <imgsrc="pic.jpg"width="260"height="140"/> </center>第五頁(yè)，共二十九頁(yè)，編輯于2023年，星期五1.4圖像邊框——border默認(rèn)情況下，頁(yè)面中插入的圖像時(shí)沒有邊框的，可以通過border屬性為圖像添加邊框。語法：<imgsrc=“圖像地址”border=“圖像邊框的寬度”/>在該語法中，寬度的單位是像素。實(shí)例：4-4border.html

<!--在頁(yè)面中居中插入兩張圖片--> <center> <!--不設(shè)置圖片的邊框--> <imgsrc="pic.jpg“/> <!--設(shè)置圖片的邊框?yàn)?像素--> <imgsrc="pic.jpg"border="5"/> </center>第六頁(yè)，共二十九頁(yè)，編輯于2023年，星期五1.5圖像水平和垂直間距——hspace、vspace如果不使用<br/>或者<p>標(biāo)記進(jìn)行換行顯示，那么添加的圖像會(huì)緊跟在文字之后，圖像和文字之間的間距是可以調(diào)整的。語法：<imgsrc=“圖像地址”hspace=“水平間距”vspace=“垂直間距”/>在該語法中，間距的單位是像素。實(shí)例：4-5hspace.html、4-6vspace.html<!--設(shè)置圖片的水平間距為20像素、垂直間距為100--><imgsrc="pic11.jpg"border="2"hspace="20"vspace="100"/><imgsrc="pic12.jpg"border="2"hspace="20"/>第七頁(yè)，共二十九頁(yè)，編輯于2023年，星期五1.6圖像相對(duì)于文字基準(zhǔn)線的對(duì)齊方式圖像的絕對(duì)對(duì)齊方式包括左對(duì)齊、右對(duì)齊和居中對(duì)齊3種，而相對(duì)于文字的對(duì)齊方式則是指圖像與文字的相對(duì)位置。語法：<imgsrc=“圖像地址”align=“相對(duì)文字的對(duì)齊方式”/>align的取值表示的含義top圖像的頂部和同行的最高部分對(duì)齊middle圖像的中部和行的中部對(duì)齊bottom圖像的底部和同行文本的底部對(duì)齊texttop圖像的頂部和同行中最高的文本頂部對(duì)齊（Netscape）absmiddle圖像的中部和同行中最大項(xiàng)的中部對(duì)齊（Netscape）baseline圖像的底部和文本的基線對(duì)齊（Netscape）absbottom圖像的底部和同行中的最低項(xiàng)對(duì)齊（Netscape）left圖像和左邊界對(duì)齊（文本環(huán)繞圖像）right圖像和右邊界對(duì)齊（文本環(huán)繞圖像）第八頁(yè)，共二十九頁(yè)，編輯于2023年，星期五1.6圖像相對(duì)于文字基準(zhǔn)線的對(duì)齊方式實(shí)例：4-7align.html<body>

圖像的底端與文字的底端對(duì)齊

<imgsrc="pic.gif"width="85"align="bottom"/>

圖像的中間與文字的中間線對(duì)齊

<imgsrc="pic.gif"width="85"align="middle"/><br/>

圖像的頂端與文字的頂端對(duì)齊

<imgsrc="pic.gif"width="85"align="texttop"/>

圖像的中間線與文字的中間線對(duì)齊

<imgsrc="pic.gif"width="85"align="absmiddle"/><br/>

圖像的底端與文字的底端對(duì)齊

<imgsrc="pic.gif"width="85"align="baseline"/><br/></body>第九頁(yè)，共二十九頁(yè)，編輯于2023年，星期五1.7圖像的提示文字——alt當(dāng)圖像沒有裝載到瀏覽器上時(shí)，圖像的位置會(huì)顯示提示文字，而下載圖像以后，當(dāng)鼠標(biāo)停留在圖像上方時(shí)也會(huì)顯示出提示文字。語法：<imgsrc=“圖像地址”alt=“提示文字”/>實(shí)例：4-8alt.html<body><h3>史密斯夫婦——Mr.andMrs.Smith</h3> <imgsrc=“pic.jpg”hspace="20"align="left"alt=“影片——史密斯夫婦"/></body>第十頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.動(dòng)態(tài)文字網(wǎng)頁(yè)多媒體元素一般包括動(dòng)態(tài)文字、動(dòng)態(tài)圖像、聲音以及動(dòng)畫等。其中最簡(jiǎn)單的就是添加一些滾動(dòng)文字。第十一頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.1滾動(dòng)文字——marquee語法：<marquee>滾動(dòng)的文字</marquee>只要在標(biāo)記之間添加要進(jìn)行滾動(dòng)的文字即可，而且可以在標(biāo)記之間設(shè)置這些文字的字體、顏色等。實(shí)例：4-9marquee.html<body> <marquee> <fontface="隸書"color="#CC0000"size=“4”>你好，歡迎光臨夢(mèng)幻小屋!這里有歡樂的歌聲，這里有美好的景色</font> </marquee></body>第十二頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.2滾動(dòng)方向——direction默認(rèn)情況下文字是從右向左滾動(dòng)，可以自定義滾動(dòng)方向。語法：<marqueedirection=“滾動(dòng)方向”>滾動(dòng)文字</marquee>其中，滾動(dòng)方向可以取up、down、left和right，分別表示文字向上、向下、向左和向右滾動(dòng)。實(shí)例：4-10direction.html、4-11direction1.html <marqueedirection="up"> <fontcolor="#3300FF"face="楷體_GB2312">

你好，歡迎您的光臨<br/>

這里是夢(mèng)想小屋<br/>

讓我們與您分享您的點(diǎn)點(diǎn)快樂<br/>

讓我們與您分擔(dān)您的片片憂傷<br/> </font> </marquee>第十三頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.3文字的滾動(dòng)方式——behavior語法：<marqueebehavior=“滾動(dòng)方式”>滾動(dòng)文字</marquee>滾動(dòng)方式共有3種，具體如下：Behavior的取值滾動(dòng)效果scroll循環(huán)滾動(dòng)，默認(rèn)效果slide只滾動(dòng)一次就停止alternate來回交替進(jìn)行滾動(dòng)第十四頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.3文字的滾動(dòng)方式——behavior實(shí)例：4-12behavior.html<body> <marqueebehavior="scroll">你好，歡迎您的光臨</marquee> <br/><br/> <marqueebehavior="slide">讓我們與您分享您的點(diǎn)點(diǎn)快樂</marquee> <br/><br/> <marqueebehavior="alternate">讓我們與您分擔(dān)您的片片憂傷</marquee></body>第十五頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.4循環(huán)設(shè)置——loop如果希望文字滾動(dòng)幾次就停止，可以使用loop參數(shù)來進(jìn)行設(shè)置。語法：<marqueeloop=“循環(huán)次數(shù)”>滾動(dòng)文字</marquee>實(shí)例：4-13loop.html、4-14loop1.html <marqueedirection="up"loop="3"> <fontcolor="#3300FF"face="楷體_GB2312">

你好，歡迎您的光臨<br/>

這里是夢(mèng)想小屋<br/>

讓我們與您分享您的點(diǎn)點(diǎn)快樂<br/>

讓我們與您分擔(dān)您的片片憂傷<br/> </font> </marquee>第十六頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.5滾動(dòng)速度——scrollamount語法：<marqueescrollamount=“滾動(dòng)速度”>滾動(dòng)文字</marquee>實(shí)例：4-15scrollamount.html<body> <marqueescrollamount="3">看看我走得速度怎么樣？</marquee><br/><br/> <marqueescrollamount="10">看看我走得速度怎么樣？</marquee><br/><br/> <marqueescrollamount="50">看看我走得速度怎么樣？</marquee></body>第十七頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.6滾動(dòng)延遲——scrolldelay設(shè)置滾動(dòng)文字滾動(dòng)的時(shí)間間隔。單位是毫秒。語法：<marqueescrolldelay=“時(shí)間間隔”>滾動(dòng)文字</marquee>實(shí)例：4-16scrolldelay.html<body> <marqueescrollamount=“10”scrolldelay=“0”>看我不停腳步的走！</marquee><br/><br/> <marqueescrollamount="50"scrolldelay="500">看我走走歇歇！</marquee><br/><br/> <marqueescrollamount="100"scrolldelay="1000">我要走一步停一停！</marquee></body>第十八頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.7滾動(dòng)文字的背景——bgcolor滾動(dòng)文字也可以單獨(dú)設(shè)置背景色。語法：<marqueebgcolor=“顏色代碼”>滾動(dòng)文字</marquee>實(shí)例：4-17bgcolor.html <marqueebehavior="alternate"bgcolor="#FFFF66">

這里是夢(mèng)幻小屋，歡迎光臨

</marquee> <br/><br/> <marqueedirection="up"bgcolor="#99CCFF">

你好，歡迎您的光臨<br/>

這里是夢(mèng)想小屋<br/>

讓我們與您分享您的點(diǎn)點(diǎn)快樂<br/>

讓我們與您分擔(dān)您的片片憂傷<br/> </marquee>第十九頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.8滾動(dòng)背景面積——width、height默認(rèn)情況下，水平滾動(dòng)的文字背景與文字同高、與瀏覽器窗口同寬。需要時(shí)可以自行設(shè)置。語法：<marqueewidth=“背景寬度”height=“背景高度”>滾動(dòng)文字</marquee>寬度和高度單位均為像素。實(shí)例：4-18width、height.html<body> <marqueebehavior="alternate"bgcolor="#99CCFF"width="280"height="50">

這里是夢(mèng)幻小屋，歡迎光臨

</marquee></body>第二十頁(yè)，共二十九頁(yè)，編輯于2023年，星期五2.9設(shè)置空白空間——hspace、vspace默認(rèn)情況下，滾動(dòng)文字周圍的文字或圖像是與滾動(dòng)背景緊密連接的，可以設(shè)置他們之間的空白空間。語法：<marqueehspace=“水平范圍”vspace=“垂直范圍”>滾動(dòng)文字</marquee>實(shí)例：4-19space.html<body>

設(shè)置水平為70像素、垂直為50像素的空白空間：

<marqueebehavior="alternate"bgcolor="#99CCCC"hspace="70"vspace="50">

這里是夢(mèng)幻小屋，歡迎光臨

</marquee></body>第二十一頁(yè)，共二十九頁(yè)，編輯于2023年，星期五3.背景音樂作為背景音樂的可以是音樂文件，也可以是聲音文件，其中最常用的是midi文件。第二十二頁(yè)，共二十九頁(yè)，編輯于2023年，星期五3.1設(shè)置背景音樂——bgsound作為背景音樂的文件最常用的是midi文件。如果需要指定背景音樂的播放次數(shù)，可以使用loop屬性。語法：<bgsoundsrc=“背景音樂的地址”loop=“循環(huán)次數(shù)”/>實(shí)例：4-20bgsound.html<body> <bgsoundsrc="exam02.mid"loop="3“/></body>第二十三頁(yè)，共二十九頁(yè)，編輯于2023年，星期五4.多媒體文件在網(wǎng)頁(yè)中加入音樂或視頻文件，可以使單調(diào)的網(wǎng)頁(yè)變得更加生動(dòng)。如果要正確瀏覽嵌入了這些文件的網(wǎng)頁(yè)，就需要在客戶端安裝相應(yīng)的播放軟件。第二十四頁(yè)，共二十九頁(yè)，編輯于2023年，星期五4.1添加多媒體——embed網(wǎng)頁(yè)中常見的多媒體文件包括聲音文件和視頻文件。語法：<embedsrc=“多媒體文件地址”width=“播放界面的寬度”height=“播放界面的高度”></embed>在該語法中，width和height一定要設(shè)置，單位是像素，否則無法正確顯示播放多媒體文件的軟件。實(shí)例：4-21embed.html<body>

下面是嵌入的多媒體文件：<br/> <embedsrc="exam01.mid"width="500"height="200"></embed></body>第二十五頁(yè)，共二十九頁(yè)，編輯于2023年，星期五4.2設(shè)置自動(dòng)運(yùn)行——autostart語法：<embedsrc=“多媒體文件地址”autostart=“true/false”></embed>其中，true代表自動(dòng)播放，false代表不自動(dòng)播放。實(shí)例：4-22autostart.html<body>

下面的視頻文件中左邊的視頻文件將會(huì)自動(dòng)播放，而右邊的視頻文件則需要手動(dòng)播放：<br/> <embedsrc="exam01.avi"width="300"autostart=“true"></embed> <embedsrc="exam01.avi"width="300"autostart=“false"></embed></body>第二十六頁(yè)，共二十九頁(yè)，編輯于2023年，星期五4.3媒體文件的循環(huán)播放——loop語法：<embedsrc=“多媒體文件地址”loop=“true/false”></embed>其中，loop的值為

溫馨提示

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

評(píng)論

0/150

提交評(píng)論