9-1　背景色彩的設定 透過圖片和網頁色彩的使用，其實就可以製作出相當漂亮的網頁，這也是第三章介紹網站風格時提到的，透過色彩的設定來統合網頁的風格，關於色彩的界定，最常見的就是所謂的暖色系、冷色系，選定網頁的主色彩之後，透過文字、圖片和網頁背景色彩的設定，定出網頁的色調。

Presentation on theme: "9-1　背景色彩的設定 透過圖片和網頁色彩的使用，其實就可以製作出相當漂亮的網頁，這也是第三章介紹網站風格時提到的，透過色彩的設定來統合網頁的風格，關於色彩的界定，最常見的就是所謂的暖色系、冷色系，選定網頁的主色彩之後，透過文字、圖片和網頁背景色彩的設定，定出網頁的色調。"— Presentation transcript:

1 9-1　背景色彩的設定 透過圖片和網頁色彩的使用，其實就可以製作出相當漂亮的網頁，這也是第三章介紹網站風格時提到的，透過色彩的設定來統合網頁的風格，關於色彩的界定，最常見的就是所謂的暖色系、冷色系，選定網頁的主色彩之後，透過文字、圖片和網頁背景色彩的設定，定出網頁的色調。

2 認識基本的色彩原理 生活中幾乎隨處可見不同的色彩，可以說放眼所及的物品都有不同的色彩，而大自然的種種景色也充斥各種色彩和光源。判斷色彩的最基本就是所謂的原色。原色就是無法從其他色彩所混合產生的色彩，物體的三原色也就是紅、黃、藍，當你透過任何影像編輯軟體來調整色彩時，就是這三種顏色的混合。

3 每種色彩都具備三種特徵：色相、明度和純度。
色相：色彩的名稱，例如黃色、紫色，用以區隔不同的色彩，同一種色相的色彩透過不同的亮度和純度就有相當多的變化，例如綠色可以分為深綠、淺綠、草綠等。 明度：又稱為亮度，指的是色彩的明暗程度，明度越大色彩就越亮；明度越低色彩就越暗。 純度：代表色彩的鮮豔程度，純度高的色彩鮮豔，看起來色彩會較亮，純度低色彩就看起來黯淡。

4 網頁的216安全色 那麼網頁的色彩是否有依循或參考的標準呢，確實有人根據網頁的特性，考量到電腦的作業系統、瀏覽器的不同和電腦顯示卡的等級，訂出一個色彩的標準，也就是所謂的網頁安全色。

5 只要你是使用網頁安全色中的色彩，那不論網頁瀏覽者採用哪一種電腦系統、顯示卡或是瀏覽器，都可以看到正確的顏色。由於色彩總共有216色，所以被稱為網頁的216安全色。這是由Visibone Colorlab所開發的，你可以連到網站取得更多網頁216安全色的資訊，或是購買調色盤或色表，網址為

6 文字的背景色 了解色彩的基本原理之後，底下就來看看網頁中關於色彩的應用，也就是背景的設定。網頁中的元件可以設定背景的相當多，包括文字的背景、圖片的背景、段落的背景和整個網頁的背景。

7 段落的背景 文字可以設定背景，整個文字段落當然也可以加上背景色，設定的標籤你應該很熟悉也就是<P>段落標籤，加上背景色彩的屬性『background-color』來設定，沿用上一個範例網頁，將網頁中的第二段文字加上背景色，色彩的代碼為『#FFFF33』，程式如下。 <p style="background-color:#FFFF33">國內目前前往北海道最多的人次,還是以冬季為主.畢竟身處亞熱帶的台灣要看到下雪實在機率頗低,<br> 偶而高山飄雪更是人擠人的場面而離台灣並不遠的日本北海道在11月中後就開始飄雪而一二月更是冰天雪地的景象</p>

8 9-2 圖片的透明背景與特殊效果 圖片的透明背景
9-2　圖片的透明背景與特殊效果 圖片的透明背景 網頁中主要的圖檔類型是JPEG檔和GIF檔案，GIF檔案可以將數張圖片合成一張而產生動畫的效果，所以深受網頁設計者的喜愛(這部分下章會繼續說明)，不過它還有一個特色，對設計人員而言也是不可或缺的，就是透明的背景。

9 交錯圖 這時當圖片在顯示時，即使圖檔還沒有完全傳輸完畢，也可以看到圖片的全貌，指示所看到的圖片是不太清楚且品質較差的圖檔，而隨著傳輸資料越多，圖檔也會一點一點慢慢的由上到下顯示，就是所謂的交錯圖。 不過現在隨著ADSL的普及，資料傳輸的時間已經越來越快了，也越來越少人會使用交錯圖，若覺得圖檔過大，利用PhotoShop 的ImageReady或其他軟體進行圖檔的最佳化，來縮減圖檔的體積，才是比較洽當的做法。

10 圖片的透明化 圖片的透明背景必須透過影像處理軟體來修改圖檔，而HTML也提供了圖片透明化的效果，讓原本清楚的圖檔變得透明。這個效果只能適用在Internet Explorer 5以上的瀏覽器。 範例中只設定了圖檔的透明度起始屬性，透明度的值分別為『20』和『50』，透過圖9-16應該可以看出二者的差異。雖說FILTER可以設定的參數值相當多，但其實只要設定『OPACITY』就可以製作出透明效果了。

11 陰影的效果 同樣透過<DIV>標籤中的FILTER還可以製作出不同的文字和圖片效果，前面是透明的效果，底下來看看文字的陰影效果。陰影文字是不少人喜歡使用的文字效果，讓文字看起來更立體化。要特別注意的是，這個效果只有Internet Explorer支援。

12 9-3　影像地圖的製作 當你在瀏覽網站時，是否看過網站的中有一張大圖，當滑鼠游標移到圖中的不同位置時，都是不同的超連結，以切換到不同的網頁。這種功能就稱為影像地圖。影像地圖最常被用在網站的首頁中，他是將一張完整的大圖加以分割，再個別設定超連結來連到網頁中，增加網頁的可變性。

13 認識影像地圖 影像地圖的種類有二種，一種稱為Server Side影像地圖，他是透過伺服器來完成的設定。其原理是當使用者點選影像地圖中的超連結時，瀏覽器軟體會根據你所點選的位置轉換為座標將這個數值傳送給伺服器，伺服器再根據所設定的MAP檔案告知瀏覽器應該要對應到哪個位址，瀏覽器接收到就會繼續處理連到該網頁。這種做法相當複雜，所以一般鮮少使用。

14 另一種則是Client Side影像地圖，在製作網頁時就一併設定影像地圖中的哪個部分要連到哪個URL位址，所以當使用者點選網頁時，瀏覽器從網頁中的資訊就知道網址並連結到該網頁或網站，這是目前最常用的影像地圖。

15 影像地圖的實作 請開啟範例網頁04.htm，裡面只有一張圖片，底下將用這張圖片來製作影像地圖。前面提過影像地圖就是在不同的位置加上超連結，不過這裡可不是用<A HREF>標籤來設定超連結。要製作影像地圖時必須作二件事，第一是設定一個滑鼠位置和所要連結網址的對照表，第二是在圖片的<IMG>標籤中增加『USEMAP』屬性，設定為影像地圖。 1.先用<MAP>標籤來設定對照表的名稱。 2.用<AREA>標籤定義圖片中每個區塊的位置、大小以及URL，這裡的位置必須要透過X,Y座標來定義。

16 9-4　其他網頁視覺變化 除了圖片、動畫等常用的效果外，還有不少特殊的設定可以讓網頁更多變，本章介紹了幾個好用的視覺效果設定，本節還會介紹幾個好用的設定，讓你的網站更多變。

17 網頁自動切換 當你瀏覽網站時，是否遇過網站的首頁是動畫，當動畫展示完畢後就會自動跳到網頁的首頁，或是網站有個漂亮的首頁，當載入首頁畫面數秒後就會自動進入網站的效果。這種自動切換到另一個網頁的效果，就是所謂的自動更新網頁。

18 瀏覽器的切換特效 Internet Explorer瀏覽器本身也支援不少網頁的切換特效，當你透過FrontPage來製作網頁時，就可以直接設定。不過透過HTML語法也可以設定喔！所謂的網頁切換特效就是在開啟網頁或是要切換到其他網頁時，會以特殊的效果慢慢的展示出網頁的內容。