第二章 第二章 網站設計要領 網站設計要領

課前指引網站設計是設計作品的一種，除了內容主題的文字之外，同時也要考量到頁面佈局及配色的美觀性，讓每位瀏覽者都能對設計的網站印象深刻。本章會針對有關頁面的內容佈局、配色、以及一些注意事項作說明，同時也會為各位介紹使用於網頁設計的幾種影像格式類型，以加強網頁設計時的知識。

章節大綱

備註：可依進度點選小節

2-1 頁面內容佈局 2-2 網頁配色概念 2-3 網頁安全色 2-4 常用網頁影像格式

3

將導覽列按鈕置於上方的頁面佈局 2-1 頁面內容佈局

http://www.books.com.tw/

4

將導覽列按鈕置於左側的頁面佈局 2-1 頁面內容佈局

http://udn.com/NEWS/main.html

5

上方和左側都有導覽按鈕的存在 2-1 頁面內容佈局

http://www.tccg.gov.tw/sys/SM_theme?page=3fd69773

6

不過有些網站會使用 Flash 的來設計商品分類頁面，利用 Flash 強大的動態特效來產生，遠比單純使用文字與圖片更好的展示效果。如圖所示，該網頁就是透過 Flash 技術所作的動態展式。

2-1 頁面內容佈局

http://elearning.kmfa.gov.tw/kidsart/index.html

7

2-1 頁面內容佈局

http://www.ding-dong.com.tw/

8

接著是頁面內容的分配方式。以商品網站來看，不外乎是商品類型、特價活動與商品介紹等幾大項，我們可以將特價活動放置在頁面的最上方，以吸引消費者目光，也能在最上方擺放商品類型的導覽按鈕，以利消費者搜尋商品之用。如圖所示，是依照不同商品分類擺設的購物網站。

2-1 頁面內容佈局

http://www.momoshop.com.tw/category/LgrpCategory.jsp?l_code=15200000&Area=tooth&mdiv=200912172117

9

冷色系的看起來就非常具有專業的風格 2-2 網頁配色概念

http://www.nanshanlife.com.tw/

10http://www.tatung.com/b5/

2-2 網頁配色概念

11

暖色系帶給人較為溫馨的感覺

http://www.baby-mother.com.tw/

2-2 網頁配色概念

12

2-2 網頁配色概念

http://www.feds.com.tw/about.html

13

顏色對比強烈的配色會帶給人較有活力的感覺 2-2 網頁配色概念

http://www.agisgame.com.tw/Show/index.asp

14

在早期瀏覽器剛發展時，大部份的電腦都還只是在 256 色模式的顯示環境，而在此模式中的 Internet Explorer 及 Netscape 二種瀏覽器並無法在畫面上呈現相同的顏色，也就是有些顏色在 Internet Explorer中看的到，而在 Netscape 中則否。為了避免網頁影像在設計時的困擾，就有人將這 256 色中，無論是在 Internet Explorer 或是 Netscape都能正常顯示的顏色找出來，而其顏色數就是 216色，因此一般都稱之為「 216 網頁安全色」，不過由於現今的顯示器都是全彩模式，所以各位也不一定要謹守 216 色的限制。

2-3 網頁安全色

15

使用於頁面上的顏色值是採用 16 進位的方式，也就是顏色值範圍會從 RGB 模式中的 (0 到 255) 變為 (00 到 FF) 。以紅色為例，在美工軟體中的顏色值為（255,0,0 ），不過這是 10 進位，改成 16 進位後會變成是（ #FF0000 ）。

2-3 網頁安全色

16

圖中就是 216 色的色票及其顏色值，不過印刷效果多少會與螢幕上的顯示結果有點出入，所以請大家還是要以瀏覽器上的顯示結果為主，而這個色票就做為設計時的參考。

2-3 網頁安全色

17

2-3 網頁安全色

18

JPG 也稱為 JPEG ，是屬於一種「破壞性壓縮」的影像檔案格式。什麼是「破壞性壓縮」？在網際網路剛剛發展的初期，那時候的連線頻寬不像現今這麼快，為了能夠在最短的時間內下載整個網頁畫面，所以必須要將影像檔案進行壓縮，而 JPG 影像格式在壓縮的過程中，會對影像品質產生破壞的現象，而且壓縮的比例愈高，影像被破壞的情況愈嚴重，不過由於網頁上的圖片，都只是使用於頁面效果，而非印刷，所以只要是不太模糊的影像都可以接受。

2-4 常用網頁影像格式

19

JPG除了「破壞性壓縮」的特性外， JPG 格式的影像還支援全彩顏色，也因為影像中所能呈現的色彩非豐富，所以只要是屬於風景、人物等，需要豐富色彩的網頁影像，都是 JPG 格式。

2-4 常用網頁影像格式

色彩豐富的全彩 JPG 影像

20

GIF常上網瀏覽的人，應該都見過頁面上某些具有動畫效果的小圖示，而此種影像類型就是 GIF 格式。能產生動畫效果是 GIF 影像的特質之一，它可以在一個檔案之中包含多張影像，然後利用連續的重覆顯示，以達到動畫的效果。那為何頁面上的 GIF 影像都是小圖示或符號而非風景、人物等大型影像呢？那是因為 GIF 格式的影像檔案中，最多只能有 256 色，無法像 JPG 格式一樣具有全彩顏色的特性，各位可以想想看，如果將一張影像轉換成只有 256 色的 GIF 格式，結果當然沒有那麼的美好。

2-4 常用網頁影像格式

21

GIFGIF 格式還有一項 JPG 所沒有的特性，那就是「透明」效果。在 GIF 格式的影像中，可以將檔案中的特定顏色調整為透明，讓 GIF 影像能夠與網頁的背景完美融合在一起，也因此雖然 GIF 格式只有 256 色，但憑著動畫及透明效果，也能在網頁影像中佔有一席之地。

2-4 常用網頁影像格式

22

2-4 常用網頁影像格式

簡單的插圖、卡通圖樣，都適合使用 GIF 圖檔來儲存

23

PNG它幾乎包含了 JPG 與 GIF 二種格式的特點。 它是一種影像壓縮格式，不過它採用的是非破壞性壓縮，所以壓縮之後的檔案容量會比 JPG 大。 PNG 格式也具有全彩顏色的特點，因此使用於像風景之類，需要豐富色彩的圖片也沒有問題，它還支援和 GIF 格式相同的透明效果，可說是除了動畫效果以外，幾乎全都包含了。

2-4 常用網頁影像格式

24

PNG那為何現今網頁的影像格式，還是以 JPG 與 GIF為主，問題就出在瀏覽器的支援度。 JPG 與 GIF出現較早，所以在瀏覽時，不會有任何的問題，而 PNG 格式雖然也是出來一段時間了，可是並非所有的瀏覽器都支援 PNG 格式，尤其是在透明度的效果上，所以普及度尚未超越 JPG 與 GIF 。

2-4 常用網頁影像格式

25

Q&A討論時間

本章結束