教學大綱表
請遵守智慧財產權,勿使用非法影印教科書,避免觸法。
課程名稱 (中文) 互動網頁設計
(英文) Interactive Web Design
開課單位 媒體設計學系
課程代碼 V2280
授課教師 莊羽柔
學分數 2.0 必/選修 選修 開課年級 大二
先修科目或先備能力:
課程概述與目標: 課程概述與目標: 網頁是現在最重要的訊息傳播管道。而HTML5結合CSS3以及JavaScript的互動網頁是現今最為熱門的網頁製作技術。學習網頁相關的技術與知識相當廣泛,若將來想使用網路做為訊息溝通的媒介,必須要對相關技術有更深入的了解。本課程除講解相關技術之外,也盡可能以深入淺出的方式教學,適合所有對網頁設計有興趣之初學者,並以Adobe Dreamweaver以及Adobe Edge Animate作為實做練習對象。
教科書 自備投影片教學
參考教材 1.Div+CSS網頁版面設計 輕鬆做網頁排版隨手做SEO
2.HTML&CSS網站設計建制優化之道
3.用Dreamweaver,我也會開發APP
4.跟Adobe徹底研究Edge Animate
課程大綱 學生學習目標 單元學習活動 學習成效評量 備註
單元主題 內容綱要
1 課程介紹 課程概略敘述 第一堂課會讓學生了解這門課要學習甚麼。
  • 講授
  •  
    2 何謂HTML HTML整體介紹 簡單介紹HTML是甚麼
  • 講授
  •  
    3 HTML語法架構與標籤 語法架構與標籤教學 學會後就可了解基礎的網頁排版是如何進行
  • 講授
  • 上機實習
  •  
    4 何謂CSS CSS整體概觀介紹 先讓學生有個基本觀念了解到CSS是甚麼?有甚麼必要性?
  • 講授
  •  
    5 CSS語法架構 CSS語法架構與定義種類 學習CSS之前先了解語法架構,後續學習會更為容易
  • 講授
  • 上機實習
  •  
    6 CSS教學-回應式網頁教學 CSS3架構與寫法,含<div>排版以及回應式網頁製作 學會CSS後讓自己的網頁變漂亮,並且可適應所有瀏覽裝置
  • 討論
  • 實作
  • 講授
  • 上機實習
  • 作業
  •  
    7 HTML→HTML5 介紹HTML5有什麼新的東西 當瞭解HTML4之後,學習HTML5就是一件簡單的事
  • 講授
  •  
    8 JavaScript教學-1 JavaScript基礎語法、函式與判斷式 了解JavaScript的用途,讓網頁活起來。
  • 講授
  • 上機實習
  •  
    9 期中報告 藉由一個報告來了解學生期中之前的學習效果 審視自己在期中之前的學習成效
  • 討論
  • 心得發表
  • 講授
  • 作業
  •  
    10 JavaScript教學-2 JavaScript基礎語法、函式與判斷式 了解JavaScript的用途,讓網頁活起來。
  • 講授
  • 上機實習
  •  
    11 jQuery介紹 了解jQuery是甚麼東西?在互動網頁上扮演甚麼重要的角色? 對jQuery有著初步的認識
  • 講授
  • 上機實習
  •  
    12 jQuery教學 學習jQuery的用法與呼叫方式 網頁透過jQuery後讓互動變得很簡單。即便完全不會寫程式,只要會用jQuery,就可以讓你的網頁變得很不一樣。
  • 講授
  • 上機實習
  •  
    13 jQuery教學-滾動式網頁教學 教學如何製作滾動式網頁 滾動式網頁是目前最熱門流行的網頁瀏覽模式,只要學會如何製作,受用無窮。
  • 講授
  • 上機實習
  • 作業
  •  
    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的互動動畫網頁。
  • 討論
  • 實作
  • 講授
  • 上機實習
  • 作業
  •  
    17 簡易介紹PhoneGap 介紹如何把HTML5+CSS+JS的網頁發佈成手機的Application(APP) 了解Application(APP)在現今的重要性,只要學會製作網頁,就會製作APP!
  • 講授
  • 上機實習
  •  
    18 期末發表 檢視一整個學期的學習成效 檢視自己在一整個學期的學習成效
  • 心得發表
  • 作業
  •  

    教學要點概述:
    教材編選: ■ 自編教材 □ 教科書作者提供
    評量方法: 其他評量:20%   作業:80%  
    教學資源: □ 教材電子檔 □ 課程網站
    扣考規定:http://eboard.ttu.edu.tw/ttuwebpost/showcontent-news.php?id=504