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

下載本文檔

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

文檔簡介

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

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

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

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

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

圖像的底端與文字的底端對齊

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

圖像的中間與文字的中間線對齊

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

圖像的頂端與文字的頂端對齊

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

圖像的中間線與文字的中間線對齊

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

圖像的底端與文字的底端對齊

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

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

這里是夢想小屋<br/>

讓我們與您分享您的點點快樂<br/>

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

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

這里是夢想小屋<br/>

讓我們與您分享您的點點快樂<br/>

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

這里是夢幻小屋，歡迎光臨

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

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

這里是夢想小屋<br/>

讓我們與您分享您的點點快樂<br/>

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

這里是夢幻小屋，歡迎光臨

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

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

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

這里是夢幻小屋，歡迎光臨

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

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

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

溫馨提示

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

評論

0/150

提交評論