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

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