背景色彩的设定.ppt

9-1背景色彩的設定透過圖片和網頁色彩的使用，其實就可以製作出相當漂亮的網頁，這也是第三章介紹網站風格時提到的，透過色彩的設定來統合網頁的風格，關於色彩的界定，最常見的就是所謂的暖色系、冷色系，選定網頁的主色彩之後，透過文字、圖片和網頁背景色彩的設定，定出網頁的色調。認識基本的色彩原理生活中幾乎隨處可見不同的色彩，可以說放眼所及的物品都有不同的色彩，而大自然的種種景色也充斥各種色彩和光源。判斷色彩的最基本就是所謂的原色。原色就是無法從其他色彩所混合產生的色彩，物體的三原色也就是紅、黃、藍，當你透過任何影像編輯軟體來調整色彩時，就是這三種顏色的混合。每種色彩都具備三種特徵：色相、明度和純度。色相：色彩的名稱，例如黃色、紫色，用以區隔不同的色彩，同一種色相的色彩透過不同的亮度和純度就有相當多的變化，例如綠色可以分為深綠、淺綠、草綠等。明度：又稱為亮度，指的是色彩的明暗程度，明度越大色彩就越亮；明度越低色彩就越暗。純度：代表色彩的鮮豔程度，純度高的色彩鮮豔，看起來色彩會較亮，純度低色彩就看起來黯淡。網頁的216安全色那麼網頁的色彩是否有依循或參考的標準呢，確實有人根據網頁的特性，考量到電腦的作業系統、瀏覽器的不同和電腦顯示卡的等級，訂出一個色彩的標準，也就是所謂的網頁安全色。只要你是使用網頁安全色中的色彩，那不論網頁瀏覽者採用哪一種電腦系統、顯示卡或是瀏覽器，都可以看到正確的顏色。由於色彩總共有216色，所以被稱為網頁的216安全色。這是由VisiboneColorlab所開發的，你可以連到網站取得更多網頁216安全色的資訊，或是購買調色盤或色表，網址為。文字的背景色了解色彩的基本原理之後，底下就來看看網頁中關於色彩的應用，也就是背景的設定。網頁中的元件可以設定背景的相當多，包括文字的背景、圖片的背景、段落的背景和整個網頁的背景。段落的背景文字可以設定背景，整個文字段落當然也可以加上背景色，設定的標籤你應該很熟悉也就是P段落標籤，加上背景色彩的屬性『background-color』來設定，沿用上一個範例網頁，將網頁中的第二段文字加上背景色，色彩的代碼為『#FFFF33』，程式如下。pstyle=background-color:#FFFF33國內目前前往北海道最多的人次,還是以冬季為主.畢竟身處亞熱帶的台灣要看到下雪實在機率頗低,br偶而高山飄雪更是人擠人的場面而離台灣並不遠的日本北海道在11月中後就開始飄雪而一二月更是冰天雪地的景象/p9-2圖片的透明背景與特殊效果圖片的透明背景網頁中主要的圖檔類型是JPEG檔和GIF檔案，GIF檔案可以將數張圖片合成一張而產生動畫的效果，所以深受網頁設計者的喜愛(這部分下章會繼續說明)，不過它還有一個特色，對設計人員而言也是不可或缺的，就是透明的背景。交錯圖這時當圖片在顯示時，即使圖檔還沒有完全傳輸完畢，也可以看到圖片的全貌，指示所看到的圖片是不太清楚且品質較差的圖檔，而隨著傳輸資料越多，圖檔也會一點一點慢慢的由上到下顯示，就是所謂的交錯圖。不過現在隨著ADSL的普及，資料傳輸的時間已經越來越快了，也越來越少人會使用交錯圖，若覺得圖檔過大，利用PhotoShop的ImageReady或其他軟體進行圖檔的最佳化，來縮減圖檔的體積，才是比較洽當的做法。圖片的透明化圖片的透明背景必須透過影像處理軟體來修改圖檔，而HTML也提供了圖片透明化的效果，讓原本清楚的圖檔變得透明。這個效果只能適用在InternetExplorer5以上的瀏覽器。範例中只設定了圖檔的透明度起始屬性，透明度的值分別為『20』和『50』，透過圖9-16應該可以看出二者的差異。雖說FILTER可以設定的參數值相當多，但其實只要設定『OPACITY』就可以製作出透明效果了。陰影的效果同樣透過DIV標籤中的FILTER還可以製作出不同的文字和圖片效果，前面是透明的效果，底下來看看文字的陰影效果。陰影文字是不少人喜歡使用的文字效果，讓文字看起來更立體化。要特別注意的是，這個效果只有InternetExplorer支援。9-3影像地圖的製作當你在瀏覽網站時，是否看過網站的中有一張大圖，當滑鼠游標移到圖中的不同位置時，都是不同的超連結，以切換到不同的網頁。這種功能就稱為影像地圖。影像地圖最常被用在網站的首頁中，他是將一張完整的大圖加以分割，再個別設定超連結來連到網頁中，增加網頁的可變性。認識影像地圖影像地圖的種類有二種，一種稱為ServerSide影像地圖，他是透過伺服器來完成的設定。其原理是當使用者點選影像地圖中的超連結時，瀏覽器軟體會根據你所點選的位置轉換為座標將這個數值傳送給伺服器，伺服器再根據所設定的MAP檔案告知瀏覽器應該要對應到哪個位址，瀏覽器接