第六章 ：詳解html圖像的處理
第六章 ：詳解html圖像的處理 2011/7/29 30
圖像可以使html頁面美觀生動且富有生機。瀏覽器可以顯示的圖像格式有jpeg，bmp，gif。 其中bmp文件存儲空間大，傳輸慢，不提倡用，常用的jpeg和gif格式的圖像相比較，jpeg圖像支持數(shù)百萬種顏色，即使在傳輸過程中丟失數(shù)據，也不會在質量上有明顯的不同，占位空間比gif大， gif圖像僅包括265色彩，雖然質量上沒有jpeg圖像高， 但占位儲存空間小，下載速度最快、支持動畫效果及背景色透明等特點。 因此使用圖像美畫頁面可視情況而決定使用那種格式。
背景圖像的設定
<body background= "image-url">
其中 "image-url" 指圖像的位置。
<html>
<head>
<title>設置背景圖像</title>
</head>
<body background="imge/11.gif">
<center>
</center>
</body>
</html>
網頁中插入圖片的` 標簽<img>
網頁中插入圖片用單標簽<img>，當瀏覽器讀取到<img>標簽時，就會顯示此標簽所設定的圖像。如果要對插入的圖片進行修飾時，僅僅用這一個屬性是不夠的，還要配合其它屬性來完成。
插入圖片標簽<img>的屬性
|
屬 性 |
描 述 |
|
src |
圖像的url的路徑 |
|
alt |
提示文字 |
|
width |
寬度 通常只設為圖片的真實大小以免失真,改變圖片大小最好用圖像工具. |
|
height |
高度 通常只設為圖片的真實大小以免失真,改變圖片大小最好用圖像工具. |
|
lowsrc |
設定低分辨率圖片,若所加入的是一張很大的圖片，可先顯示該圖片。 |
|
usemap |
映像地圖 |
|
align |
圖像和文字之間的排列屬性 |
|
border |
邊框 |
|
hspace |
水平間距 |
|
vlign |
垂直間距 |
<IMG> 的格式及一般屬性設定：
<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of Website" lowsrc="pre_logo.gif">
普通插入圖片 實例
<html>
<head>
<title>普通插入圖片</title>
</head>
<body>
<BODY>
<CENTER>
<H2>風景圖片</H2>
<IMG src="../../imge/6-5.gif">
</CENTER>
</body>
</html>
設定上下左右空白位置 hspace/vspace
<html>
<head>
<title>設定圖像與文本之間的距離</title>
<body>
<img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20">
<font size="+3">首段文字。<BR>
第一段文字<BR>第二段文字</font> <BR>
</body>
</html>
字畫對齊方式 實例
圖像和文字的之間的對齊是通過align屬性來設定的， align的對齊方式有兩種：即絕對對齊和相對對齊。絕對對齊方式的效果和文字一樣，只有三種：居中（middle）、居左（left）、居右（right）。相對文字對齊方式是指圖像與一行文字的相對位置。
對其屬性align的設定
|
屬 性 值 |
對 齊 方 式 |
|
top |
【 第六章 ：詳解html圖像的處理】相關文章：
上一篇：第五章 框架重點一 /7/26
下一篇：3.5 表格標簽 /7/26
|