web-4. 裝飾頁面的圖像
4. 裝飾頁面的圖像
4.1 頁面顏色的設計
色彩的一般象征意義：紅色是烈火的顏色，象征熱情、奔放，也是鮮血的顏色，象征生命；黃色象征華麗、富貴、明快；綠色是大自然中草木的顏色，象征自然和生長，也象征和平與安寧；紫色有莊重感，象征高貴；白色給人以純潔清白的感覺，象征聖潔。
（1）暖色調：紅色、橙色、黃色、褐色等色彩的搭配。
（2）冷色調：青色、綠色、藍色等色彩的搭配。
（3）將色調完全相反的顏色搭配在同一空間中。
4.2 圖像的基本類型
- GIF格式
GIF是Graphics Interchange Format的簡稱，可交換的圖像格式。
註：“失真”與“不失真”
指的是圖片轉換成此格式時，其圖像品質是否與原來相同。通常為了增加壓縮的效果，一些肉眼看不到的圖像信息就會被刪除。這就與原來的圖像不同了，這個過程是不可以恢復的。
- JPEG格式
JPEG格式是Joint Photographic Experts Group的簡稱，聯合圖像專家組。擴展名是.jpg和.jpeg。
4.3 圖像的插入以及格式
插入標記<img>
格式：
<img src=” ” alt=” ” border=” ” width=” ” height= “ ” align=” ”>
src用於指定圖像原文件的所在路徑。
alt用於為圖像添加提示性文字。即當鼠標放在該圖像上時，鼠標的旁邊就會出現提示性文字。
border用於為圖像設置邊框。當沒有在圖像上添加超鏈接的時候，圖像邊框為黑色；當為圖像加上超鏈接的時候，圖像邊框的顏色與鏈接的文字的顏色是一樣的，為深藍色。
width和height在默認的情況下就是圖像的原始大小
align用於為退昂設置與文字之間的對齊方式。
hspace和vspace用於設置圖像與文字之間的對齊方式。
Top：沿著當前文本行的頂端對齊圖像的頂端。
Middle：沿著當前文本行的頂端居中拜訪圖像。
Bottom：沿著當前文本行的底部對齊圖像的底部。
Left：圖像在文字的左側。
Right：圖像在文字的右側。
Baseline：英文文字基準線對齊。
Textop：英文文字上邊線對齊。
absbottom：文字的底線位於圖像的底部。
absmiddle：文字的底線位於圖像的中間。
例子：
<html>
<head>
<title>圖像對齊實例</title>
</head>
<body>
<h1 align=center>愛蓮說</h1>
<h3 align=center>周敦頤</h3>
<p><img src="./connect.jpg" alt="美女" width=150 height=100 align=left>
水陸草木之花
</p>
</body>
</html>
4.4 動態替換圖像
動態替換的意思就是，當用戶的鼠標移動到圖像上時，圖像就會變成另一幅畫，當離開後又會變成原來的圖像。
例子：
<html>
<head>
<title>動態圖像</title>
</head>
<body>
<center><img src="./1.jpg" name="picture" width=400 eigth=600
onmouseover="picture.src=‘./2.jpg‘"
onmouseout="picture.src=‘./1.jpg‘">
</center>
</body>
</html>
web-4. 裝飾頁面的圖像