網頁版面設計 如何設計好網站? 捷盛電腦 陳文陞講師.

Presentation on theme: "網頁版面設計 如何設計好網站? 捷盛電腦 陳文陞講師."— Presentation transcript:

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 Graphics Suite X3、Adobe Illustrator CS3、Ulead PhotoImpact 12 網頁設計軟體 　 Adobe Dreamweaver CS3、Microsoft Office FrontPage 2007、Adobe 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

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