通識實踐課程：網頁程式設計基礎入門

首頁
計畫成果
成果詳細資訊

國立嘉義大學高等教育深耕計畫結案成果表單

主軸名稱	【A主軸】教學創新精進
補助課程類別	■通識實踐課程 □嘉義巡禮微學分課程 □微學分課程		□AI導入課程 □業師協同教學 □跨域共授課程				□國際學者協同教學
課程名稱	網頁程式設計基礎入門
授課教師	主授：許政穆			開課學期		114-1
聯絡電話	05-2717742			E-mail		hsujm@mail.ncyu.edu.tw
開課單位	通識教育中心			修課人數		生理男
						生理女
						其他
結案報告公開	本人同意將結案報告書公開於高教深耕計畫相關網站。
聯合國永續發展目標(SDGs)	□1.終結貧窮 □3.健康與福祉 □5.性別平權 □7.可負擔的潔淨能源 □9.工業化、創新及基礎建設 □11.永續城鄉 □13.氣候行動 □15.保育陸域生態 □17.多元夥伴關係				□2.消除飢餓 ■4.優質教育 □6.淨水及衛生 □8.合適的工作及經濟成長 □10.減少不平等 □12.責任消費及生產 □14.保育海洋生態 □16.和平、正義及健全制度
關鍵能力	□STEAM領域 □人文關懷	■跨領域 □問題解決			■自主學習 □社會參與			□國際化
教學活動類型可複選	■講授法 □課堂實作，主要由學生自行操作、討論、完成之實作任務。 ■課程專題實作，需於期末提出專題報告/成果發表/展演等教學活動 □場域/產業/服務專題實作，於產業/社區等真實職場情境進行之專題實作，如實習專題或產品製作等。 □線上課程，如磨課師、開放式課程等由線上進行教學與評量之課程類型。 □數位學習科技輔助，如採用線上課程平台、線上評量、AR/VR等科技進行教學活動。 □延伸教學活動，如於暑假設計場域實習課程，協助學生將課堂成果進一步發展參與競賽等。 □其他，請說明：
課程執行場域	□實體教室 ■實體教室+線上教學 □實體教室+校內實習場域 □實體教室+校外實習場域（包含業界、社區等大學課室外場域） □校外場域+線上教學 □校外實習場域（包含業界、社區、與學校進行產學合作場域或合作夥伴場域）
課程目標及內容	本課程定位為實務導向之通識實作課程。課程設計以理解原理、動手實作、完成作品為課程主軸，引導學生系統化認識網頁設計基本原理概念，建立HTML /CSS的基礎網頁設計能力，使學生於課程結束能具備主題式的網頁製作的基本能力。為提升學習效率與降低網頁設計初學者的學習門檻，教學導入生成式 AI 作為輔助工具。並於課堂中示範使用 AI 工具 (ChatGPT)進行 HTML/CSS 標記語法理解與範例生成，並強調精確提示對話的重要性，訓練學生能以明確描述產出對應的網頁標記內容的需求，也透過AI協助學生進行網頁設計問題與錯誤修正。過程中培養學生善用 AI 工具進行自主學習與問題解決的基礎能力養成。課程成果目標是讓學生以「做中學」的方式完成主題式的網頁作品。規劃期末成果可以是課程簡介、產品介紹、家鄉簡介或個人簡介等，並鼓勵學生結合自身背景與創意進行版面設計與內容呈現。最後透過同儕互評的期末成果發表，觀摩彼此作品。
具體措施與亮點成果	課程中，學生完成多個指定主題頁面，包括：個人首頁簡介(index.html)、個人首頁多媒體版本、個人功課表(class.html)，以及嘉義大學學院簡介的三種版本(基本版、套用 CSS 版、加入圖片動畫特效版)。課程也安排Bootstrap 網頁模板套用，並以Resume_Kelly 模板作為範例與練習素材(themewagon Kelly 模板)教授學生網頁模板套用方式。透過上述安排，學生瑜課程期間至少完成六個以上網頁作品，並於網頁作品中實際串接多樣化的網頁標記與 CSS 基礎語法，作為建立網頁設計能力的核心訓練。為提升學生對完成網站作品的自我效能與網頁設計信心，課程中以學校吉祥物嘉寶作為示範主題，以 Resume Kelly 模板套用方式製作嘉寶個人網頁作為觀摩案例，讓學生能從版型結構、資訊分區與視覺一致性等面向建立具體參考，降低學生從零開始設計的焦慮並提升投入度。期末成果採主題式網站專題形式進行，開放學生以個人或兩人一組方式完成作品，並由學生自訂網站主題（如個人介紹、興趣介紹、人物介紹，或其他與自身相關之議題）。本次期末主題式網站共計 34 組完成登記與題目確認，實際完成並提交作品進行同儕互評的共有 28組，另外有3組只有上傳網頁成果未到場，而未繳交期末成果也有3組。從期末作品呈現來看，本次主題式網頁成果也是呈現多元性與個人化特色。其中有學生為其社團火舞社建置網頁(http://120.113.173.41/2025FGED/31/index.html)、介紹自己學系的特色-木工加工 (http://120.113.173.41/2025FGED/08/index.html)、介紹新生生存之道(http://120.113.173.41/2025FGED/11/index.html)、介紹自己寵物(http://120.113.173.41/2025FGED/25/HOMEindex.html)、文博會介紹(http://120.113.173.41/2025FGED/22/index.html)等。學生能將課程所學技術轉化為具情境、具風格且可展示的作品，也符合本課程以實作導向促進學習成效的設計初衷。
檢討與建議	課程改進建議之題項扣除空白與無之回應：讓我更了解如何用html做網頁我覺得我程式設計的基礎還算不夠需要老師再更加有耐心的教導然後我覺得建議上沒什麼需要改進的老師上課的節奏很剛好問問題都有回應超棒上課內容很豐富上課內容小雜亂教學課程內容相關有趣給學生作的時間充裕，會越來越有興趣以在第一節時讓同學用學校電腦嘗試操作jupiter的使用。資訊稍多的時候有點複雜無特別意見，我認為老師上課的進行很好這個課程讓我學到很多關於htmlc的課程課堂還不錯希望能在多教一些延伸用法對初學者來說，講解的很全面，身為剛凱使接觸的學生受益良多我覺得很棒!繼續學習我認為本課程講義中的標記符號，可以新增使用的方式，如需搭配的圖片標記中長寬高如何輸入等，這可以讓學生更好的理解，和另外提前的學習。上課速度可以在慢一點一點從上述分析結果學生的提升資訊科技應用能力與提升問題解決能力呈現學生確實有提升資訊能力與解決問題能力，但本課程是以網頁設計教學較無通溝表達，而且主題式網頁製作的分組也於問卷調查完後才進行期末網頁製作，因此調查時尚無法反映團隊合作的能力提升。對於問卷給予1分的該筆資料並無回直性的文字回饋，故無法了解學生的需求。但有看到科系屬性屬於理工學院，可能對課程的技術面想學更多，因此其中考週次過後也有跟修課學生推薦相關學系的專業網頁設計課程，有機會可以修習，學更扎實的網頁設計技能。由於課程成果網站主機已建立也有DNS設定，為http://wd.csie.ncyu.edu.tw，尚未申請HTTPS連線的SSL憑證，下一學期將更新主機硬體，建置完整的課程成果網站。方便同儕互評觀摩使用。