140 likes | 361 Views
網頁版面設計 如何設計 好網站 ?. 捷盛電腦 陳文陞講師. 授課大綱. 何謂「網頁設計」 網站設計軟體大觀園 網站設計的流程 網站建構的原則 網頁設計的原則 網頁版面設計 網站作品賞析 推薦書籍 如何設計好網站. 何謂「網頁設計」. 網站 v.s 網頁 網頁元素 (文字、圖片、動畫、音效、影片 … ) 靜態網頁 ( HTML 、 CSS 、 DHTML … ) 動態網頁 ( ASP 、 PHP 、 ASP.NET 、 JSP … ) 多媒體網頁 (含 FLASH 動畫的網站) WEB 1.0 (單向) v.s WEB 2.0 (雙向).
E N D
網頁版面設計如何設計好網站? 捷盛電腦 陳文陞講師
授課大綱 • 何謂「網頁設計」 • 網站設計軟體大觀園 • 網站設計的流程 • 網站建構的原則 • 網頁設計的原則 • 網頁版面設計 • 網站作品賞析 • 推薦書籍 • 如何設計好網站
何謂「網頁設計」 • 網站 v.s 網頁 • 網頁元素(文字、圖片、動畫、音效、影片…) • 靜態網頁(HTML、CSS、DHTML…) • 動態網頁(ASP、PHP、ASP.NET、JSP…) • 多媒體網頁(含FLASH動畫的網站) • WEB 1.0(單向)v.s WEB 2.0(雙向)
網站設計軟體大觀園 • 平面設計軟體(美工設計、視覺設計) 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
網站設計的流程 一、規劃期: 設定網站主題、資料蒐集與整理、建置網站架構圖 二、施工期: 網頁元件製作、網頁製作與測試 網站空間申請、網站上傳、網站登錄 三、維護期: 網站定時更新及維護
網站建構的原則 • 功能性(Utility) 網站的功能要正確、有效,例如網站搜尋、會員系統… • 易用度(Usability) 網頁設計需以使用者的需求為主,介面設計是否人性化?
網頁設計的原則 • 操作簡便 讓使用者越容易操作 • 提高互動性 如何有效率地完成使用者到網站的目的 • 降低錯誤率 避免暗喻導引的設計 • 使用者導向 分析及了解使用者對於網站的整體觀感
網頁版面設計 • 螢幕尺寸(800x600 v.s 1024x768 px) • 螢幕色彩(RGB v.s CMYK) • 圖案格式(GIF v.s JPG v.s PNG) • 主從關係 • 動線流暢 • 空間感 • 統一性
網頁版面設計 • 網頁版面風格(韓國 v.s 日本 v.s 歐美) • 網頁模板參考
網站作品賞析 • 高美濕地暨社區入口網 • 浩天宮全球資訊網 • 台中縣清水鎮公所全球資訊網 • 台中縣梧棲鎮立圖書館 • 禾楓歐化廚具門板 • 巧登創意設計 • 綺利企業有限公司 • 三本貿易有限公司 • 前鋒營造有限公司
推薦書籍 • 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
如何設計好網站 • 參考網站 • 嘗試設計 • 問前輩的意見 • 討論想法 • 別怕失敗 • 盡量去做 • 99分的努力+1分的天份