主軸名稱

【A主軸】教學創新精進

補助課程類別

█通識實踐課程

□嘉義巡禮微學分課程

□微學分課程

□AI導入課程

□業師協同教學

□跨域共授課程

□國際學者協同教學

課程名稱

網頁程式設計基礎入門

授課教師

主授：許政穆

共授：無

開課學期

113-2

聯絡電話

05-2717772

E-mail

hsujm@mail.ncyu.edu.tw

開課單位

通識教育中心

修課人數

生理男

21

生理女

21

其他

結案報告公開

本人同意將結案報告書公開於高教深耕計畫相關網站。

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

□1.終結貧窮

□3.健康與福祉

□5.性別平權

□7.可負擔的潔淨能源

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

□11.永續城鄉

□13.氣候行動

□15.保育陸域生態

□17.多元夥伴關係

□2.消除飢餓

█4.優質教育

□6.淨水及衛生

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

□10.減少不平等

□12.責任消費及生產

□14.保育海洋生態

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

關鍵能力

□STEAM領域

□人文關懷

█跨領域

█問題解決

█自主學習

□社會參與

□國際化

教學活動類型

可複選

█講授法

█課堂實作，主要由學生自行操作、討論、完成之實作任務。 

█課程專題實作，需於期末提出專題報告/成果發表/展演等教學活動

□場域/產業/服務專題實作，於產業/社區等真實職場情境進行之專題實作，如實習專題或產品製作等。 

□線上課程，如磨課師、開放式課程等由線上進行教學與評量之課程類型。 

□數位學習科技輔助，如採用線上課程平台、線上評量、AR/VR等科技進行教學活動。

□延伸教學活動，如於暑假設計場域實習課程，協助學生將課堂成果進一步發展參與競賽等。

□其他，請說明：

課程執行場域

□實體教室

█實體教室+線上教學

□實體教室+校內實習場域

□實體教室+校外實習場域（包含業界、社區等大學課室外場域）

□校外場域+線上教學

□校外實習場域（包含業界、社區、與學校進行產學合作場域或合作夥伴場域）

課程目標

及內容

1. 本課程為一實務實作課程，讓修課學生了解網頁設計原理，亦能具備基本的網頁設計與網站架設能力。透過網頁設計相關技術學習，了解網頁設計的發展趨勢。
2. 課程也會導入生成式AI輔助教學，教授學生透過AI了解HTML/CSS標記用法，以及教授學生使用精確提示對話 (Prompt)產生對應網頁標記內容，加速學生建構網頁內容速度，透過課程訓練學生具備善用AI工具進行學習的基本能力養成。
3. 課程最終目標是修課學生能實作出課程簡介、產品介紹、公司簡介、或個人簡介等具個人特色的網頁設計，以達到做中學的網頁設計目標。

具體措施與

亮點成果

1. 本課程提供學生HTML與CSS網頁製作相關語法講義，教授學生設計個人首頁簡介 (index.html)、嘉義大學簡介 (ncyu.html)、個人功課表 (class.html)、三種版本(基本、套用CSS、圖片動畫特效)的嘉義大學學院簡介 (ncyu_college.html、ncyu_css.html、ncyu_css_img.html)、套用bootstrap模板的完整個人簡介網站(使用Resum_Kelly模板，https://themewagon.com/themes/kelly/)。學生在課程中至少製作七個網頁設計串接各式的網頁標記與CSS基礎用法，以奠定學生的網頁設計基礎。
2. 為增強學生設計網站的信念，課程中示範以學校吉祥物嘉寶為主題，以chatgpt的影像生成產生嘉寶個人簡介的生成圖片用於網站設計，也利用免費的 Kelly 套用製作嘉寶個人網站供學生觀摩參考。
3. 期末網頁製作由學生選擇個人一組或兩人一組製作主題式網站，網站主題由學生自訂，可以個人介紹、興趣介紹、人物介紹、或是與自己相關的主題。為了讓學生能夠了解AI如何輔助網頁設計，也特別介紹 websim.ai 網站 (https://websim.ai)透過提示詞互動先建構出基本網頁框架，讓學生能有利用AI協助進行網頁設計。
4. 最後總共有25組同學登記期末主題式網站主題資訊，實際完成有23組同學，也利用第十六週次上課時間由同學上台報告介紹自己組別的網站設計理念與網站網頁的展示說明，並由同儕互評評分作為期末考部分成績。
5. 此次期末主題是網站製作的亮點之處，有同學以大學四年生活為主題設計網站，有兩位同學以家裡烤鴨便當店與顧問公司為自家設計網站。也有以目前流行的集利卡哇設計主題網站包括商城等頁面。整體而言，此次

檢討與建議

建議方向：自我檢討評估與改善機制、執行上的問題或困難處、教師或學生的變化等。

1. 本次課程共有35人次填寫問卷，問卷結果如下所示：

課程改進建議之題項扣除空白與無之回應：

1. 感覺蠻有趣的學到很多東西
2. 課程內容可以再多增加一點
3. 一切都好
4. 希望老師能夠放慢速度教學
5. 無，老師上課很有熱忱，可以感受到用心程度，上課上得很有趣，謝謝老師！
6. 無希望可以在慢一些
7. 希望老師能放慢速度與不要讓學生操作到一半一直切換畫面。
8. 很棒而且發現網頁設計沒有想像中那麼難  會提升興趣
9. 無，老師上課很有熱忱，很用心，謝謝老師！
10. 非常喜歡這堂網頁程式設計課
11. 老師教學得非常好，會幫助同學，指導清楚的地方，還會發上課影片，讓跟不上的同學可以自主學習。
12. 謝謝老師辛苦教學，讓我在本課程中獲益良多。
13. 從上述問卷調查統計，由於期末網站可由一人或兩人一組完成，因此提升團隊合作能力調查結果也符合期末主題是網站製作的現況。但提升溝通表達能力也是偏低主要網頁製作是以內容為主，下次上課將會設計一個作業練習由一位同學當成網頁需求者另一位是網頁設計者針對網頁設計內容進行溝通表達演練，以提升溝通表達。而資訊能力提升整體而言都是有提升居多。
14. 由於學校提供給學生的網頁空間 (http://web.ncyu.edu.tw) 較小而且使用ftp上船常有問題無法傳輸成功，因此本次課程利用授課教師實驗室內較舊的個人電腦安裝web server與ftp server 供修課上傳期末成果網站內容，由於部分學生的網頁設計超過教學平台作業可以上傳容量，因此下次上課將準備多顆高容量隨身碟直接複製學生網站成果進行留存，以供下次上課做為觀摩網站使用。
15. 目前 web 主題尚未加入 DNS主機名與 網站憑證無法使用 https 連線，將利用暑假期間更新主機相關設定並提供完整網頁空間給下次修課學生使用，能即時分享作業成果進行同儕互評。

佐證資料

(含活動剪影)

1.活動照片原始檔案至少提供8張，並請篩選具代表性之照片呈現即可。

2.課程教材、海報、課程學習單或具體成品等

3.若上述檔案容量較大，請上傳至雲端並提供下載連結

4.如有校內/校外之新聞稿，請提供新聞稿網頁連結。