主軸名稱

【A主軸】教學創新精進

成果類別

□講座 □工作坊 █課程 □會議 □參訪 □____________

分項計畫名稱

A3-2通識深化多元學習：通識實踐課程

活動名稱

網頁程式設計基礎入門

活動日期

113學年度第1學期

活動時間

星期四 第7-8節

承辦單位

資訊工程學系

活動地點

新民校區

*請檢附活動簽到表佐證

參加對象

教職員

參加人數

1

學生

參加人數

50

校外

參加人數

0

請勾選本次活動相關聯之項目(勾選數量不限，若無可不勾選)

聯合國永續發展目標(SDGs)

□1.終結貧窮

□3.健康與福祉

□5.性別平權

□7.可負擔的潔淨能源

□9.工業化、創新及基礎建設

□11.永續城鄉

□13.氣候行動

□15.保育陸域生態

□17.多元夥伴關係

□2.消除飢餓

█4.優質教育

□6.淨水及衛生

□8.合適的工作及經濟成長

□10.減少不平等

□12.責任消費及生產

□14.保育海洋生態

□16.和平、正義及健全制度

關鍵能力

□STEAM領域

█跨領域

□社會參與

□人文關懷

█自主學習

□國際化

□問題解決

活動內容

1. 本通識實踐課程主要是針對非資訊相關學生以直覺實作方式進行網頁設計教學，透過課程中認識HTML標記語法與使用時機，並搭配主題式網頁設計的作業，如個人首頁 (index.html)、功課表 (schedule.html)、個人資料輸入表單(form.html)等有網頁實作。
2. 實踐課程從基本的HTML標記用法、CSS網頁排版、以及Bootstrap網頁模板套用等，逐步建立學生在設計網頁所需要的基礎技能。
3. 由於網頁標記與CSS設定相當多元，課程中也有整理常用的HTML語法與CSS樣式屬性設定的單頁講義給予學生參考。但學生每周一次的網頁設計課程可能會忘記標記語法與使用時間，因此課程初期也導入生成式AI輔助教學，以 ChatGPT 進行網頁設計學習，包括引導學生如何正確使用提示詞，產生所需要的基本網頁框架與網頁內容，以加快學生網頁製作。
4. 由於學校有提供Microsoft Solution的學生帳號，課程中也引導學生使用 Microsoft AI 工具 Copilot 設計網頁背景圖或網頁內所需的相關示意圖象等。透過AI工具進行輔助教學，不僅能讓學生建立使用AI正確的課程學習觀念，更能讓學生善用AI工具。
5. 為驗收學生網頁設計的實作成果，由每一位同學從指定類別主題，選擇自己的期末網站製作，並且放置於學校提供的個人網頁空間以供觀摩。學生所製作的網站包括家鄉介紹、寵物介紹、高中介紹、偶像球星介紹等，網站型態相當多元。

執行成果

1. 期末成果驗收共有四十三位修課學生繳交期末主題網站，其中一位有於課堂內展示成果但上傳繳交檔案為空檔無法解壓縮，而另一位只有上傳成果有問題。課程結束有七位同學(包含一位停修資管系同學)未繳交任何期末成果。
2. 學生期末成果網站大致可分為三種類型：自行尋找網頁模板套用素材內容、直接使用教師示範網頁模板套用素材內容、自行設計網頁框架編排素材內容。其中以自行找尋合適網頁模板套用所製作的網頁成果較優而且也比較符合網頁主題的配色與排版，而自行設計網頁框架編排網站的網頁成果也不錯。而只採用教師作為教學範例模板的網站作品會有配合網站編排與配色不一致的狀況發生。

檢討與建議

(課程反思檢討)

1. 前一次網頁程式設計基礎入門授課是開在112學年度第2學期共有兩班，一班開在蘭潭校區，而另一班開在進學班。與本學期課程最大差別是助教的協助，因前一學期課程無助教協助修課學生的疑難雜症，造成教師無法專注於網頁設計教學還要顧及學生網頁設計問題解決，因此整體的授課品質有顯著提升。
2. 由於前次課程並無提供課程的HTML/CSS用法的整理講義，因一週只上兩節課學生在進度銜接會有落差，需要再複習，而本學期則較無此現象。唯有學生提及因網頁設計的課程有連續性，中間因故未到課會造成學習銜接問題，但本課程已有提供課程教學畫面錄影供學生課後複習。
3. 由於課程期中考試驗收修課學生對HTML標記用法的熟悉度，是以電腦教室內的上機考為主，學生反映考試內容過於細膩，建議可以網頁作品取代。但網頁設計還是需要懂HTML標記用法，期中考前的教學重點是HTML標記使用，因此不適合以網頁作品當成期中作業，未來將調整考試內容符合提供的講義與上課內容。
4. 由於本次授課原本已找好免費網頁空間 000webhost供學生上傳網頁實作成果，然而000webhost停止免費服務，只好改為學校提供的網頁空間 http://web.ncyu.edu.tw，然而網頁空間上傳網頁常常有問題，造成期末成果無法實際分享於同儕間，下次授課將以自建web空間供學生使用以利學生上傳網頁成果與同儕觀摩。同時也能將此次課程的學生期末主題式網站成果進行網站架構的分析解說與修課同學觀摩，以利下次課程學生能精進期末主題式網站設計成果。
5. 再統整學生期末主題式網站成果時發現，學生對於從網路抓取的圖片等素材著作權觀念不足，有學生直接抓圖使用，也沒注意到素材是否可免費使用。未來將強化以 AI 協作生成圖片協助學生解決找不到免費授權且合適的網站的相關素材。
6. 本學期的期末專題製作是以一人實作主題式網站，因此每位同學成果有限，也無法達到同儕間的合作學習，未來有繼續開設將以 PBL 學習法，給予期末專題主題問題，然後分組於期中開始分析討論與分工合作進行期末主題式網站製作，甚至也能結合 AI 工具探索主題式網站架構與內容製作建議，以其學生能課程 除了具備網頁設計的基礎知識外，也能透過團隊合作完成期末主題網站製作。

佐證資料

請依序填寫檢附資料，如：學生作品、上課講義、問卷與滿意度分析表、教學助理學習心得、活動紀錄，並附上相關上課成果紙本書面資料……。