1 / 24

第二章 網站設計要領

第二章 網站設計要領. 課前指引 網站設計是設計作品的一種，除了內容主題的文字之外，同時也要考量到頁面佈局及配色的美觀性，讓每位瀏覽者都能對設計的網站印象深刻。 本章會針對有關頁面的內容佈局、配色、以及一些注意事項作說明，同時也會為各位介紹使用於網頁設計的幾種影像格式類型，以加強網頁設計時的知識。. 章節大綱. 2-1 頁面內容佈局. 2-2 網頁配色概念. 2-3 網頁安全色. 2-4 常用網頁影像格式. 備註：可依進度點選小節. 2-1 頁面內容佈局. 將導覽列按鈕置於上方的頁面佈局.

cedric-alston
Download Presentation

第二章 網站設計要領

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 章節大綱 2-1 頁面內容佈局 2-2 網頁配色概念 2-3 網頁安全色 2-4 常用網頁影像格式 備註：可依進度點選小節

  3. 2-1 頁面內容佈局 將導覽列按鈕置於上方的頁面佈局 http://www.books.com.tw/bshopping/

  4. 2-1 頁面內容佈局 將導覽列按鈕置於左側的頁面佈局 http://udn.com/NEWS/main.html

  5. 2-1 頁面內容佈局 上方和左側都有導覽按鈕的存在 http://www.kcg.gov.tw/

  6. 2-1 頁面內容佈局 不過有些網站會使用Flash的來設計商品分類頁面，利用Flash強大的動態特效來產生，遠比單純使用文字與圖片更好的展示效果。如圖所示，該網頁就是透過Flash技術所作的動態展式。 http://163.29.104.6/kidsart/index.html

  7. 2-1 頁面內容佈局 http://www.ding-dong.com.tw/

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

  9. 2-2 網頁配色概念 冷色系的看起來就非常具有專業的風格 http://tw.asus.com/

  10. 2-2 網頁配色概念 http://www.nanshanlife.com.tw/

  11. 2-2 網頁配色概念 暖色系帶給人較為溫馨的感覺 http://www.baby-mother.com.tw/

  12. 2-2 網頁配色概念 http://www.feds.com.tw/about.html

  13. 2-2 網頁配色概念 顏色對比強烈的配色會帶給人較有活力的感覺 http://www.agisgame.com.tw/Show/index.asp

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

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

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

  17. 2-3 網頁安全色

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

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

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

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

  22. 2-4 常用網頁影像格式 簡單的插圖、卡通圖樣，都適合使用GIF圖檔來儲存

  23. 2-4 常用網頁影像格式 PNG格式，它幾乎包含JPG與GIF二種格式的特點 它是一種影像壓縮格式，不過它採用的是非破壞性壓縮，所以壓縮之後的檔案容量會比JPG大。 PNG格式也具有全彩顏色的特點，因此使用於像風景之類，需要豐富色彩的圖片也沒有問題，它還支援和GIF格式相同的透明效果，可說是除了動畫效果以外，幾乎全都包含了。 那為何現今網頁的影像格式，還是以JPG與GIF為主，問題就出在瀏覽器的支援度。JPG與GIF出現較早，所以在瀏覽時，不會有任何的問題，而PNG格式雖然也是出來一段時間了，可是並非所有的瀏覽器都支援PNG格式，尤其是在透明度的效果上，所以普及度尚未超越JPG與GIF。

  24. Q&A討論時間 本章結束

More Related