ch02 网站设计要领.ppt.ppt

* 第二章 網站設計要領 課前指引 網站設計是設計作品的一種，除了內容主題的文字之外，同時也要考量到頁面佈局及配色的美觀性，讓每位瀏覽者都能對設計的網站印象深刻。 本章會針對有關頁面的內容佈局、配色、以及一些注意事項作說明，同時也會為各位介紹使用於網頁設計的幾種影像格式類型，以加強網頁設計時的知識。 章節大綱 備註：可依進度點選小節 2-1 頁面內容佈局 2-2 網頁配色概念 2-3 網頁安全色 2-4 常用網頁影像格式 2-1 頁面內容佈局 將導覽列按鈕置於上方的頁面佈局 .tw/bshopping/ 2-1 頁面內容佈局 將導覽列按鈕置於左側的頁面佈局 /NEWS/main.html 2-1 頁面內容佈局 上方和左側都有導覽按鈕的存在 .tw/ 2-1 頁面內容佈局 不過有些網站會使用Flash的來設計商品分類頁面，利用Flash強大的動態特效來產生，遠比單純使用文字與圖片更好的展示效果。如圖所示，該網頁就是透過Flash技術所作的動態展式。 /kidsart/index.html 2-1 頁面內容佈局 .tw/ 2-1 頁面內容佈局 接著是頁面內容的分配方式。以商品網站來看，不外乎是商品類型、特價活動與商品介紹等幾大項，我們可以將特價活動放置在頁面的最上方，以吸引消費者目光，也能在最上方擺放商品類型的導覽按鈕，以利消費者搜尋商品之用。如圖所示，是依照不同商品分類擺設的購物網站。 .tw/ 2-2 網頁配色概念 冷色系的看起來就非常具有專業的風格 / 2-2 網頁配色概念 .tw/ 2-2 網頁配色概念 暖色系帶給人較為溫馨的感覺 .tw/ 2-2 網頁配色概念 .tw/about.html 2-2 網頁配色概念 顏色對比強烈的配色會帶給人較有活力的感覺 .tw/Show/index.asp 2-3 網頁安全色 在早期瀏覽器剛發展時，大部份的電腦都還只是在256色模式的顯示環境，而在此模式中的Internet Explorer及Netscape二種瀏覽器並無法在畫面上呈現相同的顏色，也就是有些顏色在Internet Explorer中看的到，而在Netscape中則否。 為了避免網頁影像在設計時的困擾，就有人將這256色中，無論是在Internet Explorer或是Netscape都能正常顯示的顏色找出來，而其顏色數就是216色，因此一般都稱之為「216網頁安全色」，不過由於現今的顯示器都是全彩模式，所以各位也不一定要謹守216色的限制。 2-3 網頁安全色 使用於頁面上的顏色值是採用16進位的方式，也就是顏色值範圍會從RGB模式中的(0到255)變為(00到FF)。以紅色為例，在美工軟體中的顏色值為（255,0,0），不過這是10進位，改成16進位後會變成是（#FF0000）。 2-3 網頁安全色 圖中就是216色的色票及其顏色值，不過印刷效果多少會與螢幕上的顯示結果有點出入，所以請大家還是要以瀏覽器上的顯示結果為主，而這個色票就做為設計時的參考。 2-3 網頁安全色 2-4 常用網頁影像格式 JPG 也稱為JPEG，是屬於一種「破壞性壓縮」的影像檔案格式。 什麼是「破壞性壓縮」？在網際網路剛剛發展的初期，那時候的連線頻寬不像現今這麼快，為了能夠在最短的時間內下載整個網頁畫面，所以必須要將影像檔案進行壓縮，而JPG影像格式在壓縮的過程中，會對影像品質產生破壞的現象，而且壓縮的比例愈高，影像被破壞的情況愈嚴重，不過由於網頁上的圖片，都只是使用於頁面效果，而非印刷，所以只要是不太模糊的影像都可以接受。 2-4 常用網頁影像格式 除了「破壞性壓縮」的特性外，JPG格式的影像還支援全彩顏色，也因為影像中所能呈現的色彩非豐富，所以只要是屬於風景、人物等，需要豐富色彩的網頁影像，都是JPG格式。 色彩豐富的全彩JPG影像 2-4 常用網頁影像格式 GIF 也稱為常上網瀏覽的人，應該都見過頁面上某些具有動畫效果的小圖示，而此種影像類型就是GIF格式。能產生動畫效果是GIF影像的特質之一，它可以在一個檔案之中包含多張影像，然後利用連續的重覆顯示，以達到動畫的效果。 那為何頁面上的GIF影像都是小圖示或符號而非風景、人物等大型影像呢？那是因為GIF格式的影像檔案中，最多只能有256色，無法像JPG格式一樣具有全彩顏色的特性，各位可以想想看，如果將一張影像轉換成只有256色的GIF格式，結果當然沒有那麼的美好。 GIF格式還有一項JPG所沒有的特性，那就是「透明」效果。 2-4 常用網頁影像格式 GIF格式還有一項JPG所沒有的特性，那就是「透明」效果。 在GIF格式的影像中，可以將檔案中的特定