教學大綱表 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