網頁版面設計 如何設計 好網站 ?
Post on 19-Jan-2016
108 Views
Preview:
DESCRIPTION
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 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 分的天份
top related