第04章 圖像處理(已改).ppt

第4章圖像的處理 4 1背景圖案的設(shè)定4 2網(wǎng)頁中插入圖形4 3img標(biāo)簽屬性的使用4 4把文本排到圖像下面4 5超鏈接與圖形的應(yīng)用4 6圖像使用原則 上一頁 下一頁 目錄 結(jié)束 本節(jié) 圖像 是由一些被稱為 圖像元素 或 像素 的帶顏色的小塊排列而成的 像素 是能夠在計(jì)算機(jī)屏幕上顯示的最小的圖像信息單元 它實(shí)現(xiàn)上是一個(gè)很小的帶有顏色的矩形 第4章圖像的處理 補(bǔ)充 兩個(gè)概念 上一頁 下一頁 目錄 結(jié)束 本節(jié) GIF GraphicsInterchangeFormat 優(yōu)點(diǎn) 最多支持256色 支持透明 支持多幀動(dòng)畫顯示效果 可以使用在品質(zhì)較差或者需要透明或動(dòng)畫顯示的情況 缺點(diǎn) 過去LZW需要交專利費(fèi) GIF圖像只能支持256種顏色 JPEG JointPhotographicExpertsGroup 優(yōu)點(diǎn) 支持多種顏色 可以有很高的壓縮比 可以使用在品質(zhì)要求較高的場合 風(fēng)景 寫真等 缺點(diǎn) 壓縮信息占用大量空間 使用了有損壓縮 不支持透明 不支持動(dòng)畫效果 PNG PortableNetworkGraphics 優(yōu)點(diǎn) 是一種新的圖片技術(shù) 可以表現(xiàn)品質(zhì)比較高的圖片 使用了無損壓縮 支持透明 w3c推薦 缺點(diǎn) 不支持動(dòng)畫 BMP 僅Windows支持的圖像格式 限制比較大 第4章圖像的處理 上一頁 下一頁 目錄 結(jié)束 本節(jié) 第4章圖像的處理 上一頁 下一頁 目錄 結(jié)束 本節(jié) BMP文件因?yàn)榇鎯?chǔ)空間大 傳輸不夠快 所以并不常用網(wǎng)絡(luò)上 常用的是jpg文件和gif文件 對于徽標(biāo) 公司廠標(biāo)等在每一主頁顯示 要求能快速下載并能在低配置的系統(tǒng)中查詢的圖像 應(yīng)采用GIF格式對于掃描圖片 藝術(shù)作品這種對顯示質(zhì)量要求很高的圖像 采用JPEG格式 第4章圖像的處理 上一頁 下一頁 目錄 結(jié)束 本節(jié) 4 1背景圖案的設(shè)定 定義背景圖像的語法格式如下 其中 image URL 指圖像的位置說明 默認(rèn)背景圖像將以平鋪方式顯示平鋪圖像作背景 將降低網(wǎng)頁顯示速度注意 所選的圖像應(yīng)看上去能無痕跡地連接在一起盡量不用或使用小的圖像文件 上一頁 下一頁 目錄 結(jié)束 本節(jié) 在HTML中使用圖像的標(biāo)簽是 注意 沒有結(jié)束標(biāo)簽 4 2網(wǎng)頁中插入圖形 上一頁 下一頁 目錄 結(jié)束 本節(jié) 1 格式 2 說明 src屬性是用來指出一個(gè)圖像的文件名 或是指出URL的路徑名 如果圖像的顯示有問題 應(yīng)該檢查以下內(nèi)容 文件名是否書寫正確 圖像文件是否是BMP GIF或JPG格式 是否已經(jīng)打開了瀏覽器的圖像下載功能3 最好在標(biāo)簽中使用相對路徑名 上一頁 下一頁 目錄 結(jié)束 本節(jié) 4 3img標(biāo)簽屬性的使用 4 3 1圖像的取代文字4 3 2設(shè)定圖像的高度和寬度4 3 3設(shè)定圖像的邊框4 3 4設(shè)定圖像的對齊方式4 3 5設(shè)定圖像與文本之間的距離 上一頁 下一頁 目錄 結(jié)束 本節(jié) 標(biāo)簽中的alt屬性 當(dāng)瀏覽器不能顯示圖像或找不到圖像時(shí) 它可以將alt引導(dǎo)的文本顯示在屏幕上 從而替代看不到的圖像 例 4 3 1圖像的取代文字alt 上一頁 下一頁 目錄 結(jié)束 本節(jié) 標(biāo)簽中還提供了兩個(gè)屬性 height和width 用來設(shè)定圖像的高度和寬度 二者可取像素值或百分比 例 4 3 2設(shè)定圖像的高度和寬度 上一頁 下一頁 目錄 結(jié)束 本節(jié) 4 3 3設(shè)定圖像的邊框border 標(biāo)簽的border屬性可以給圖像加一個(gè)邊框 若border項(xiàng)默認(rèn)或取值為0時(shí) 圖像沒有邊框 例 上一頁 下一頁 目錄 結(jié)束 本節(jié) 在標(biāo)簽中使用align屬性 可控制圖像相對于文字基準(zhǔn)線 文字中線 的水平對齊方式 其語法如下 例 各屬性的設(shè)置值意義如下表所示 4 3 4設(shè)定圖像的對齊方式align 上一頁 下一頁 目錄 結(jié)束 本節(jié) align屬性的設(shè)置值 各屬性的設(shè)置值意義如下表所示 上一頁 下一頁 目錄 結(jié)束 本節(jié) 4 3 5設(shè)定圖像與文本之間的距離 標(biāo)簽中的vspacr和hspace屬性能夠調(diào)整圖像與其他文本之間的距離 兩者均取像素值 設(shè)定語法如下 n m為數(shù)值 單位為像素 vspace調(diào)整圖像與上下文本的距離hspace調(diào)整圖像與左右文本的距離 上一頁 下一頁 目錄 結(jié)束 本節(jié) 4 4把文本排到圖像下面 如果文本還沒有填滿圖像周圍的空間時(shí) 就希望從圖像下面重新開始另一行文本 這時(shí) 普通的換行標(biāo)簽就不起作用了 這就需要在標(biāo)簽中使用clear屬性來滿足這一要求 clear left文本在圖像下面另起一行 用于圖像在左邊的情況clear right文本在圖像下面另一行 用于圖像在右邊的情況clear all文本在圖像下面另起行處 上一頁 下一頁 目錄 結(jié)束 本節(jié) 如果將標(biāo)簽放在和的中間 這個(gè)圖像將成為一個(gè)可點(diǎn)擊的圖像 產(chǎn)生一個(gè)鏈接 可以看出 這個(gè)圖像被自動(dòng)地加上一個(gè)藍(lán)色的邊框 成為一個(gè)可以點(diǎn)擊的圖像 這里還可以巧妙地利用alt屬性 加入提示信息 當(dāng)瀏覽者的鼠標(biāo)移到圖像時(shí) 顯示提示信息 4 5超鏈接與圖形的應(yīng)用 上一頁 下一頁 目錄 結(jié)束 本節(jié) 4 6圖像使用原則 1 在設(shè)計(jì)網(wǎng)頁時(shí) 不是必需的圖像 要舍得忍痛割愛 2 圖像盡量做得小一點(diǎn) 小圖像在網(wǎng)上的傳輸速度比較快 這對于網(wǎng)絡(luò)傳輸速度較慢的用戶更為重要 較小的圖像可以是尺寸比較小 也可以通過減少圖像顏色使圖像文件減小 3 為了使不支持圖像的瀏覽器能看到文本 可以同時(shí)使用圖像和alt的純文本格式 這樣 能使更多的用戶看全這個(gè)網(wǎng)頁 4 設(shè)計(jì)一般不要寬于450像素值 因?yàn)椴簧贋g覽器寬度大約為460像素值 許多顯示器也不是彩色的 在設(shè)計(jì)網(wǎng)頁時(shí) 這些因素都應(yīng)該考慮進(jìn)去 上一頁 下一頁 目錄 結(jié)束 本節(jié) 三 多邊形shape poly coords x1 y1 x2 y2 x3 y3 x1 y1 FirstCorner x2 y2 SecondCorner 當(dāng)shape是poly多邊形時(shí) coords表示多邊形所有