第 1頁

網頁版面設計

如何設計好網站 ?

捷盛電腦 陳文陞講師

第 2頁

授課大綱• 何謂「網頁設計」• 網站設計軟體大觀園• 網站設計的流程• 網站建構的原則• 網頁設計的原則• 網頁版面設計• 網站作品賞析• 推薦書籍• 如何設計好網站

第 3頁

何謂「網頁設計」• 網站 v.s 網頁• 網頁元素（文字、圖片、動畫、音效、影片…）

• 靜態網頁（ HTML 、 CSS 、 DHTML… ）

• 動態網頁（ ASP 、 PHP 、 ASP.NET 、 JSP… ）

• 多媒體網頁（含 FLASH 動畫的網站）

• WEB 1.0 （單向） v.s WEB 2.0 （雙向）

第 4頁

WEB 2.0

第 5頁

WEB 2.0

第 6頁

網站設計軟體大觀園• 平面設計軟體（美工設計、視覺設計）　 Adobe Photoshop CS3 、 Adobe Fireworks CS3 、 CorelDRAW Graphic

s Suite X3 、 Adobe Illustrator CS3 、 Ulead PhotoImpact 12

• 網頁設計軟體　 Adobe Dreamweaver CS3 、 Microsoft Office FrontPage 2007 、 Adob

e GoLive 9 、 Namo WebEditor 6 、 Nvu 1.0

• 多媒體設計軟體　 Adobe Flash CS3 Professional 、 Autodesk 3ds Max 9 、 SWiSHmax 2

第 7頁

網站設計的流程一、規劃期：　　設定網站主題、資料蒐集與整理、建置網站架構圖

二、施工期：　　網頁元件製作、網頁製作與測試　　 網站空間申請、網站上傳、網站登錄

三、維護期：　　網站定時更新及維護

第 8頁

網站建構的原則• 功能性（ Utility ）　網站的功能要正確、有效，例如網站搜尋、會員系統…

• 易用度（ Usability ）　網頁設計需以使用者的需求為主，介面設計是否人性化 ?

第 9頁

網頁設計的原則• 操作簡便　讓使用者越容易操作• 提高互動性　如何有效率地完成使用者到網站的目的• 降低錯誤率　避免暗喻導引的設計• 使用者導向　分析及了解使用者對於網站的整體觀感

　

第 10頁

網頁版面設計• 螢幕尺寸（ 800x600 v.s 1024x768 px ）• 螢幕色彩（ RGB v.s CMYK ）• 圖案格式（ GIF v.s JPG v.s PNG ）• 主從關係• 動線流暢• 空間感• 統一性

第 11頁

網頁版面設計• 網頁版面風格（韓國 v.s 日本 v.s 歐美）• 網頁模板參考

第 12頁

網站作品賞析• 高美濕地暨社區入口網• 浩天宮全球資訊網• 台中縣清水鎮公所全球資訊網• 台中縣梧棲鎮立圖書館• 禾楓歐化廚具門板• 巧登創意設計• 綺利企業有限公司• 三本貿易有限公司• 前鋒營造有限公司

第 13頁

推薦書籍• http://www.books.com.tw/exep/prod/booksfile.php?item=0010242495• http://www.books.com.tw/exep/prod/booksfile.php?item=0010261670• http://www.books.com.tw/exep/prod/booksfile.php?item=0010350272• http://www.books.com.tw/exep/prod/booksfile.php?item=0010341744• http://www.books.com.tw/exep/prod/booksfile.php?item=0010258729• http://www.books.com.tw/exep/prod/booksfile.php?item=0010256559• http://www.books.com.tw/exep/prod/booksfile.php?item=0010258082• http://www.books.com.tw/exep/prod/booksfile.php?item=0010310271

第 14頁

如何設計好網站• 參考網站• 嘗試設計• 問前輩的意見• 討論想法• 別怕失敗• 盡量去做• 99 分的努力 +1 分的天份