課程資料

M583 多媒體網頁程式設計			開課學期：1132		開課班級： 教育系 1
授課教師：陳威宇	必修	學期課	學分數：2.0	大孝 0417 星期三 15:10-17:00

M583 MULTIMEDIA WEB PROGRAMMING			2025 Spring		Department of Education 1
Professor：CHEN, WEI-YU	Required	Semester	Credits: 2.0	Da Xiao 0417 Wednesday 15:10-17:00

發展願景

傳揚中華文化，促進跨領域創新，與時精進，邁向國際
It is our objective to promote Chinese culture, enhance cross-disciplinary innovation, seek constant advancement, and embrace global community.

辦學宗旨

秉承質樸堅毅校訓，承東西之道統，集中外之精華，研究高深學術, 培養專業人才，服務社會，致力中華文化之發揚, 促進國家發展.
Based on our motto—“Temperament, Simplicity, Strength, and Tenacity,” “inheriting the merits of the East and the West” and “absorbing the essence of Chinese and foreign cultures,” we make it our mission to pursue advanced research, develop professional talents, serve the society, promote Chinese culture and support national development.

校教育目標
校基本素養
校核心能力

院教育目標

落實全人教育（Implementing Holistic Education）
陶鎔多元能力、敬業精神及國際視野（Fostering versatile abilities, professional dedication, and a global vision）
養成人格健全、身心健康之專門人才（Cultivating professionals with sound character and holistic well-being）

院核心能力

學術研究能力（Research competence）
專業服務能力（Professional service competence）
社會實踐能力（Social engagement competence）
文化承啟能力（Competence in cultural inheritance and development）

系教育目標

培養優質中學教師人才 Cultivating high-quality secondary school teachers
培養教育學術研究人才 Cultivating educational research professionals
培養教育行政人才 Cultivating educational administration professionals
培養文教相關產業人才 Cultivating professionals for the cultural and educational industries

系核心能力

教學專業發展能力 Professional Teaching Development Competency
學術研究基礎能力 Academic Research Foundation Competency
文教行政管理能力 Educational Administration and Management Competency
語文溝通表達能力 Language Communication and Expression Competency
教育科技應用能力 Educational Technology Application Competency

課程目標

使學生具備以下能力為目標： 1.了解當代多媒體網頁設計的發展趨勢。 2.養成網站設計的基礎概念與技能。 3.具備數位人文的網頁設計應用知能。 This course aims to equip students with the following abilities: 1. Understand the development trends of contemporary multimedia web design. 2. Develop fundamental concepts and skills in website design. 3. Acquire digital humanities competencies for applying web design in relevant contexts.

課程能力

教學專業發展能力 Professional Teaching Development Competency (比重 20%)
學術研究基礎能力 Academic Research Foundation Competency (比重 10%)
文教行政管理能力 Educational Administration and Management Competency (比重 10%)
語文溝通表達能力 Language Communication and Expression Competency (比重 10%)
教育科技應用能力 Educational Technology Application Competency (比重 50%)

課程概述

本課程主要目的在介紹當代多媒體網頁程式設計的發展趨勢，除了建立學生網頁設計的基礎概念外，也培養其操作與應用網頁設計軟體及相關程式語法邏輯的基本應用知能。課程內容涵蓋HTML語法、CSS樣式定義、網站設定、網頁程式基礎入門以及排版應用。如何透過多媒體網站平台展現人文關懷之議題傳播將是未來人文科系學生的重要資訊素養，本課程除了多媒體網頁設計技術之訓練外，將透過期末網頁製作專題的引導，讓學生從實務經驗中理解資訊應用。 The main purpose of this course is to introduce the development trends of contemporary multimedia web programming. In addition to establishing students' basic concepts of web design, it also cultivates their basic application knowledge in operating and applying web design software and related programming syntax logic. The course content covers HTML syntax, CSS style definition, website settings, basic introduction to web programming, and typography applications. How to communicate issues of humanistic care through multimedia website platforms will be an important information literacy for future humanities students. In addition to training in multimedia web design technology, this course will also provide guidance on the final webpage production topic, allowing students to learn information applications from practical experience.

授課內容

了解HTML&CSS網頁設計的基本概念與技術。
學習如何使用 ChatGPT 與其他 GAI 工具輔助來生成網頁內容。
掌握互動式網頁開發，結合 AI 工具進行程式碼生成與優化。
完成一個具有多媒體元素的動態網頁專案。

Understand the basic concepts and techniques of HTML&CSS web design.
Learn how to use ChatGPT with other GAI tools to generate web content.
Master interactive web development and combine AI tools for code generation and optimization.
Complete a dynamic web page project with multimedia elements.

授課方式

理論講解與案例分析：每週介紹一個核心技術，輔以實例說明。
實作導向教學：課堂進行網頁程式設計與WYSIWYG操作練習。
AI輔助實作：教授如何運用AI工具快速生成並優化代碼或設計元素。
分組專案製作：學生以小組形式進行專案開發，模擬實際團隊合作。
反饋與迭代改進：課堂內進行設計展示與討論，進行逐步優化。

評量方式

課程能力 /評量方式	教學專業發展能力 (比重 20%)	學術研究基礎能力 (比重 10%)	文教行政管理能力 (比重 10%)	語文溝通表達能力 (比重 10%)	教育科技應用能力 (比重 50%)
期中測驗評量 Midterm exam30%刪除	20%	10%	10%	10%	50%
期末報告 Final report30%刪除	20%	10%	10%	10%	50%
出席紀錄考核評量 Attendance10%刪除	20%	10%	10%	10%	50%
期末自我學習報告10%刪除	20%	10%	10%	10%	50%
作業 Assignment20%刪除	20%	10%	10%	10%	50%

上課用書

（師生應遵守智慧財產權觀念及不得不法影印、下載及散布）
小水豚教你做網站! 輕鬆學好 HTML / CSS 網頁設計
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本 / 第一版
作者： Capybara Design , 竹内直人, 竹内瑠美  
譯者： 吳嘉芳
出版社：旗標  
出版日期：2023/06/14
學校業務專員 : 徐子甯
Mobile：0912-563-706
LINE ID：0912563706
https://www.w3schools.com/

參考書目

（師生應遵守智慧財產權觀念及不得不法影印、下載及散布）
ChatGPT X JavaScript精選15堂課：輕鬆學會網頁程式設計實作
作者： 陳婉凌  
出版社：博碩  
出版日期：2023/07/31
https://www.w3schools.com/

課程需求

要報告

要考試要分組討論

輔導時間

• 星期一 12:00-13:00
• 星期三 13:00-15:00
• 星期四 12:00-14:00
• 星期五 12:00-14:00

教師聯絡資訊

Email：cwy4@faculty.pccu.edu.tw
分機：43121

課程進度

1. 2025/02/19

   課程介紹

2. 2025/02/26

   網頁基礎與工具介紹：網頁設計概論

3. 2025/03/05

   網頁基礎與工具介紹：HTML&CSS網頁開發

4. 2025/03/12

   網頁基礎與工具介紹：AI工具介紹

5. 2025/03/19

   網頁基礎與工具介紹：WYSIWYG工具概述

6. 2025/03/26

   互動式網頁開發：整合多媒體元素

7. 2025/04/02

   互動式網頁開發:資料互動功能開發

8. 2025/04/09

   互動式網頁開發:AI工具輔助開發

9. 2025/04/16

   期中測驗

10. 2025/04/23

    UI設計與WYSIWYG實作:UI設計基本原則

11. 2025/04/30

    UI設計與WYSIWYG實作:即看即得工具應用

12. 2025/05/07

    UI設計與WYSIWYG實作:AI生成設計資源

13. 2025/05/14

    UI設計與WYSIWYG實作:團隊專題實作

14. 2025/05/21

    測試、展示與未來發展:網站測試與優化

15. 2025/05/28

    測試、展示與未來發展:專題展示

16. 2025/06/04

    測試、展示與未來發展:前瞻性討論

17. 2025/06/11

    優良案例賞析(需撰寫書面報告)

18. 2025/06/18

    優良案例賞析(需撰寫書面報告)