教學大綱表 Syllabus
請遵守智慧財產權,勿使用非法影印教科書,避免觸法。
課程名稱
Course Title
(中文) 互動網頁設計
(英文) Interactive Web Design
開課單位
Departments
媒體設計學系
課程代碼
Course No.
V2280
授課教師
Instructor
莊羽柔
學分數
Credit
2.0 必/選修
core required/optional
選修 開課年級
Level
大二
先修科目或先備能力Course Pre-requisites:
課程概述與目標 Course Overview and Goals: 課程概述與目標: 網頁是現在最重要的訊息傳播管道。而HTML5結合CSS3以及JavaScript的互動網頁是現今最為熱門的網頁製作技術。學習網頁相關的技術與知識相當廣泛,若將來想使用網路做為訊息溝通的媒介,必須要對相關技術有更深入的了解。本課程除講解相關技術之外,也盡可能以深入淺出的方式教學,適合所有對網頁設計有興趣之初學者,並以Adobe Dreamweaver以及Adobe Edge Animate作為實做練習對象。
教科書
Textbook
自備投影片教學
參考教材
Reference
1.Div+CSS網頁版面設計 輕鬆做網頁排版隨手做SEO
2.HTML&CSS網站設計建制優化之道
3.用Dreamweaver,我也會開發APP
4.跟Adobe徹底研究Edge Animate
課程大綱
Syllabus
學生學習目標
Learning Objectives
單元學習活動
Learning Activities
學習成效評量
Evaluation
備註
Notes

Week
單元主題
Unit topic
內容綱要
Content summary
1 課程介紹 課程概略敘述 第一堂課會讓學生了解這門課要學習甚麼。
  • 講授
  •  
    2 何謂HTML HTML整體介紹 簡單介紹HTML是甚麼
  • 講授
  •  
    3 HTML語法架構與標籤 語法架構與標籤教學 學會後就可了解基礎的網頁排版是如何進行
  • 講授
  • 上機實習
  •  
    4 何謂CSS CSS整體概觀介紹 先讓學生有個基本觀念了解到CSS是甚麼?有甚麼必要性?
  • 講授
  •  
    5 CSS語法架構 CSS語法架構與定義種類 學習CSS之前先了解語法架構,後續學習會更為容易
  • 講授
  • 上機實習
  •  
    6 CSS教學-回應式網頁教學 CSS3架構與寫法,含<div>排版以及回應式網頁製作 學會CSS後讓自己的網頁變漂亮,並且可適應所有瀏覽裝置
  • 討論
  • 實作
  • 講授
  • 上機實習
  • 作業 Assignment
  •  
    7 HTML→HTML5 介紹HTML5有什麼新的東西 當瞭解HTML4之後,學習HTML5就是一件簡單的事
  • 講授
  •  
    8 JavaScript教學-1 JavaScript基礎語法、函式與判斷式 了解JavaScript的用途,讓網頁活起來。
  • 講授
  • 上機實習
  •  
    9 期中報告 藉由一個報告來了解學生期中之前的學習效果 審視自己在期中之前的學習成效
  • 討論
  • 心得發表
  • 講授
  • 作業 Assignment
  •  
    10 JavaScript教學-2 JavaScript基礎語法、函式與判斷式 了解JavaScript的用途,讓網頁活起來。
  • 講授
  • 上機實習
  •  
    11 jQuery介紹 了解jQuery是甚麼東西?在互動網頁上扮演甚麼重要的角色? 對jQuery有著初步的認識
  • 講授
  • 上機實習
  •  
    12 jQuery教學 學習jQuery的用法與呼叫方式 網頁透過jQuery後讓互動變得很簡單。即便完全不會寫程式,只要會用jQuery,就可以讓你的網頁變得很不一樣。
  • 講授
  • 上機實習
  •  
    13 jQuery教學-滾動式網頁教學 教學如何製作滾動式網頁 滾動式網頁是目前最熱門流行的網頁瀏覽模式,只要學會如何製作,受用無窮。
  • 講授
  • 上機實習
  • 作業 Assignment
  •  
    14 工具介紹-Adobe Dreamweaver 介紹Adobe Dreamweaver及其功能概述 讓已有深厚的網頁技術概念前提之下再使用軟體或工具輔助,使自身能力更為加分。
  • 討論
  • 實作
  • 講授
  • 上機實習
  •  
    15 工具介紹-Adobe Edge Animate 介紹Adobe Edge Animate及其功能概述,Edge Animate是Adobe公司用來取代Flash的軟體之一,絕對有學習的必要性。 讓已有深厚的網頁技術概念前提之下再使用軟體或工具輔助,使自身能力更為加分。
  • 討論
  • 實作
  • 講授
  • 上機實習
  •  
    16 工具教學-Adobe Edge Animate Edge Animate是Adobe公司用來取代Flash的軟體之一,絕對有學習的必要性,仔細介紹內部功能與實作是教學的重點。 學會製作一個類Flash的HTML5的互動動畫網頁。
  • 討論
  • 實作
  • 講授
  • 上機實習
  • 作業 Assignment
  •  
    17 簡易介紹PhoneGap 介紹如何把HTML5+CSS+JS的網頁發佈成手機的Application(APP) 了解Application(APP)在現今的重要性,只要學會製作網頁,就會製作APP!
  • 講授
  • 上機實習
  •  
    18 期末發表 檢視一整個學期的學習成效 檢視自己在一整個學期的學習成效
  • 心得發表
  • 作業 Assignment
  •  

    教學要點概述 Overview of Teaching Points:
    教材編選 Teaching Materials: ■ 自編教材 Handout by Instructor □ 教科書作者提供 Textbook
    評量方法 Evaluation: 其他評量 Others:20%   作業 Assignment:80%  
    教學資源 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