教學大綱表 Syllabus
請遵守智慧財產權，勿使用非法影印教科書，避免觸法。
課程名稱
Course Title		 (中文) 網頁動畫與設計
(英文) Web Animation And Design 		開課單位
Departments		 事業經營學系
課程代碼
Course No.		 B3670
授課教師
Instructor		 王光正
學分數
Credit		 2.0 必/選修
core required/optional		 選修 開課年級
Level		 大三
先修科目或先備能力Course Pre-requisites：
課程概述與目標 Course Overview and Goals： 透過網頁動畫的學習與製作，使得網頁的表現更多元化、內容更生動活潑、增加與網頁使用者的互動，學習使用動畫設計工具，培養同學以說故事的方式將抽象的想法具體表現出來。
活用Flash動畫軟體與Dreamweaver網頁設計軟體，學習如何將文字、圖形(點陣圖與向量圖)、影音結合起來，透過時間軸的安排、場景的配置、以及動畫的技巧，將企業的各種活動以2D或3D的方式呈現在網頁上。
教科書
Textbook		 王光正，自編講義。
參考教材
Reference		 李啟宏(2010)，動畫設計驚歎號：至高的Flash網頁動畫88招，台北：精誠資訊。
課程大綱
Syllabus		 學生學習目標
Learning Objectives		 單元學習活動
Learning Activities		 學習成效評量
Evaluation		 備註
Notes
週
Week		 單元主題
Unit topic		 內容綱要
Content summary
1 網頁動畫介紹 1.介紹動畫概念、演進與趨勢
2.教學評量說明 		1.介紹動畫概念、演進與趨勢
2.教學評量說明		  
2 點陣圖去背練習 學習在PHOTOSHOP中，將照片去背 學習在PHOTOSHOP中，將照片去背
  • 上機實習
    •
  • 上機測驗 Examination on Computer Operation
    •      		 
    3 向量圖繪製01 海報設計 1. 模仿圖庫中的海報
    2. 將其轉換為向量圖
    3. 在AI中置入各個向量圖片
    4. 加入文字效果
  • 上機實習
    •
  • 上機測驗 Examination on Computer Operation
    •      		 
    4 向量圖繪製02 1. 繪製大同LOGO
    2. 毛髮去背     		1. 活用AI繪製大同LOGO
    2. 在PSD中學習毛髮去背的技巧
  • 上機實習
    •
  • 上機測驗 Examination on Computer Operation
    •      		 
    5 動畫入門訓練 1.點陣圖的編輯
    2.向量圖的編輯     		1.點陣圖的編輯
    2.向量圖的編輯    		  
    6 動畫入門訓練 Flash軟體入門簡介與操作 Flash軟體入門簡介與操作
  • 期中考 Midterm
    •      		 
    7 動畫基本練習 1.逐格動畫
    2.補間動畫
    3.形狀動畫
    4.遮色片的使用
    5.場景製作     		1.逐格動畫
    2.補間動畫
    3.形狀動畫
    4.遮色片的使用
    5.場景製作
  • 上機測驗 Examination on Computer Operation
    •      		 
    8 動畫基本練習 1.逐格動畫
    2.補間動畫
    3.形狀動畫
    4.遮色片的使用
    5.場景製作     		1.逐格動畫
    2.補間動畫
    3.形狀動畫
    4.遮色片的使用
    5.場景製作
  • 上機測驗 Examination on Computer Operation
    •      		 
    9 動畫基本練習 1.按紐元件
    2.濾鏡效果
    3.文字工具     		1.按紐元件
    2.濾鏡效果
    3.文字工具
  • 上機測驗 Examination on Computer Operation
    •      		 
    10 動畫整合練習 1.自訂主題製作簡單動畫
    2.實際發布上網     		1.自訂主題製作簡單動畫
    2.實際發布上網
  • 上機測驗 Examination on Computer Operation
    •      		 
    11 動畫整合練習 1.自訂主題製作簡單動畫
    2.實際發布上網     		1.自訂主題製作簡單動畫
    2.實際發布上網
  • 期中考 Midterm
    •      		 
    12 動畫進階 Flash程式碼(AS3)介紹 Flash程式碼(AS3)介紹
  • 上機測驗 Examination on Computer Operation
    •      		 
    13 動畫進階 Flash程式碼(AS3)介紹 Flash程式碼(AS3)介紹
  • 上機測驗 Examination on Computer Operation
    •      		 
    14 期中報告 Flash動畫實作並上網 Flash動畫實作並上網  
    15 期中報告 Flash動畫實作並上網 Flash動畫實作並上網  
    16 動畫新趨勢 1.HTML + CSS + jQuery介紹
    2.Dreamweaver的活用     		1.HTML + CSS + jQuery介紹
    2.Dreamweaver的活用
  • 上機測驗 Examination on Computer Operation
    •      		 
    17 動畫新趨勢 jQuery的基本語法與應用 jQuery的基本語法與應用
  • 上機測驗 Examination on Computer Operation
    •      		 
    18 動畫新趨勢 jQuery的基本語法與應用 jQuery的基本語法與應用
  • 上機測驗 Examination on Computer Operation
    •      		 
    19 動畫新趨勢 好用的jQuery 外掛程式 好用的jQuery 外掛程式
  • 上機測驗 Examination on Computer Operation
    •      		 
    20 動畫新趨勢 好用的jQuery 外掛程式 好用的jQuery 外掛程式  
    21 動畫新趨勢 簡易資料庫的展現
    jQuery + Ajax + XML     		簡易資料庫的展現
    jQuery + Ajax + XML
  • 上機測驗 Examination on Computer Operation
    •      		 
    22 動畫新趨勢 簡易資料庫的展現
    jQuery + Ajax + XML     		簡易資料庫的展現
    jQuery + Ajax + XML
  • 上機測驗 Examination on Computer Operation
    •      		 
    23 動畫新趨勢 手機版的網頁設計
    jQuery Mobile     		手機版的網頁設計
    jQuery Mobile
  • 上機測驗 Examination on Computer Operation
    •      		 
    24 期末報告 jQuery動畫實作並上網 jQuery動畫實作並上網
  • 期末考 Final Exam
  • 學期成績試算
    •      		 

    教學要點概述 Overview of Teaching Points：
    教材編選 Teaching Materials： ■ 自編教材 Handout by Instructor ■ 教科書作者提供 Textbook
    評量方法 Evaluation： 期末考 Final Exam：10%   期中考 Midterm：10%   上機測驗 Examination on Computer Operation：40%   作業 Assignment：40%  
    教學資源 Teaching Resources： □ 教材電子檔 Soft Copy of the Handout or the Textbook □ 課程網站 Website
    扣考規定 The rule of being able to take the final exam of the course：http://eboard.ttu.edu.tw/ttuwebpost/showcontent-news.php?id=504