Transcript 網頁設計藝術
網頁設計藝術 講師：鄭靜怡 課程目標 • • • • • • • • 網路概論 優良網站設計觀賞 網頁介面設計的基礎理論 PHOTOSHOP基本操作 色彩基本概念 版面設計概念 元件設計 風格與版面實作 課程大綱 • • • • • • • • • • • • • • • • • • 9/18 課程說明及網頁設計製作流程概述 9/25 中秋節放假一天 10/2 網頁介面設計的基礎理論 10/9 網頁介面與視覺傳達設計及圖形影像設計 10/16 網頁界面圖形影像設計（Photoshop 基礎操作） 10/23 Photoshop基礎操作 10/30 網頁介面中的色彩設計 11/6 Photoshop 影像處理 11/13 期中考 11/20 網頁介面中的文字編排設計（一） 11/27 網頁介面中的文字編排設計 （二） 12/4 網頁介面中版面的構成與設計（一） 12/11 網頁介面中版面的構成與設計（二） 12/18 網頁介面中的動畫設計 12/25 Gif動畫在網頁中的製作與運用 1/1 元旦放假一天 1/8 Gif動畫在網頁中的製作與運用 1/15 期末考 成績考核方式 • • • • 期中考： 25 % 期末考： 25 % 平時作業： 40 % 出席率： 10 % 課用書及參考用書 • 網頁界面設計藝術教程，（簡）人民郵電 出版社 • Web Layout 設計的美學，旗標出版社 • Photoshop 網頁與多媒體界面創意設計， 松崗出版 • 操作介面設計模式，O’REILLY • 專業網站設計與配色實例解析，電腦人 聯絡方式 • EMAIL: [email protected] • 課程討論區網址： http://140.123.102.71:180/phpBB3/index.php – 網頁設計藝術課程版 名詞釋義 • Web page 網頁 在WWW世界中以頁為單位的資訊內容 含文字、圖形、連結三要素 • Home Page 首頁 也是網頁的一種，網站的第一張網頁 • Web Site 網站 一群具有相同屬性及共同目的的網頁，並 以鍊結的方式相串連。 名詞釋義 • Web Server 網站伺服器 存放網站網頁內容的地方 • Local Site 本地網站 目前使用的電腦上所設計製作的網站 • URL Universal resource Locater 全球資源定址器；網路上的位址 結構： http://www.au.edu.tw/0MTAU/news.htm 通訊協定 伺服器 國別 資料夾 文件 名詞釋義 • HTTP Hypertext Transfer Protocol 超文件傳輸協定；網路通訊協定的一種 快速呼叫各式各樣的網頁 • FTP File Transfer Protocol 檔案傳輸協定 用在上傳或是下載檔案的情形 • Hyperlink 超連結 從一個網頁元件連結至一個網頁或檔案 網站企畫方法 • 內容分析 確認網站目標：商業公司、網路商店、媒 體網站（電子報）、休閒娛樂網站（易遊 網）、個人網站 瞭解網站觀眾：who in what way, revolution • 準備網站內容：觀眾的需求、互動 • 決定網站風格 設計網站流程 作網站的目的 設定網站主題 收集分析資料 規劃網站架構 網頁的設計與製作 網站上傳發行 網站的更新與維護 網站企畫書 • • • • • • • • • 網站簡介 網站名稱 網站目標 網站觀眾特質 網站內容 網站風格 網站製作方法 網站架構表 工作時程表 規劃網站架構 首頁 作 者 介 紹 課 程 資 料 線 上 教 學 影 像 處 理 網 頁 製 作 旅 遊 手 記 動 畫 製 作 中 國 美 國 留 言 版 英 國 義 大 利 網站設計適用軟體 • 網頁排版、網站管理、上傳或下載網頁 Dreamweaver、Front Page • 圖片影像處理 Photoshop、Photoimpact、Illustrator • 網頁多媒體設計 Flash、GIF Animator 各類網站風格欣賞 • 思考目標使用者是誰 • 整合主題、目的、瀏覽對象、需要的功能 各類網站風格欣賞 • 地方政府單位、教育相關網站 – 公眾性高的網站，重視使用方便性 各類網站風格欣賞 • 醫療資訊相關網站 – 簡單、一目瞭然最重要 各類網站風格欣賞 • 生活資訊相關網站 – 電影網站 各類網站風格欣賞 • 一般企業網站 – 定型化的設計能有效傳遞資訊 各類網站風格欣賞 • 一般企業網站 – 視覺識別設計讓企業更上一層樓 各類網站風格欣賞 • 一般企業網站 – 以形象為訴求 各類網站風格欣賞 • 兒童網站 – 鮮亮的色彩、動態變化營造活潑的氣氛 各類網站風格欣賞 • 電子商務網站 – 重視效率、圖文清晰 各類網站風格欣賞 • 個人網站 – 網站目的決定設計方向、資訊結構決定網站結 構及風格創意