通識實踐課程:網頁程式設計基礎入門(五AB)

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

主軸名稱

A主軸】教學創新精進

補助課程類別

█通識實踐課程

□嘉義巡禮微學分課程

□微學分課程

□AI導入課程

□業師協同教學

□跨域共授課程

□國際學者協同教學

 

課程名稱

網頁程式設計基礎入門

授課教師

主授:許政穆

共授:無

開課學期

113-2

聯絡電話

05-2717772

E-mail

hsujm@mail.ncyu.edu.tw

開課單位

通識教育中心

修課人數

生理男

8

生理女

17

其他


結案報告公開

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

聯合國永續發展目標(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語法教學搭配What You See and What You Get操作介面的免費開源軟體 Phoenix Code進行基礎網頁設計,包括學生設計個人首頁簡介 (index.html)、嘉義大學簡介 (ncyu.html)、個人功課表 (class.html),從與學生息息相關的資訊面向來設計網頁較能引起學生的學習興趣。
  2. 為了讓學生日後也能自學網頁設計,因此課程導入 ChatGPT作為教學小助理,過程中也設計一系列的提示語供學生使用,向ChatGPT詢問各式HTML標記語法解說、範例使用等,甚至也有引導學生將錯誤有問題的網頁標記內容,透過ChatGPT進行網頁編排的除錯。
  3. 課程中也加入CSS網頁排版的套用美化網頁外觀,教導進學班同學設計的嘉義大學學院簡介 (ncyu_college.htmlncyu_css.htmlncyu_css_img.html)共有三個版本,並且示範以先前教授的HTMLCSS語法套用與修改bootstrap模板練習設計具有網頁特效的個人簡介網站。
  4. 由於考量進學班修課同學學習時間有限,故以一人一組方式進行期末主題式網站設計,並以個人簡介、興趣為主,或要自行沿伸其他主題亦可。同樣為了增強學生能如何以AI工具輔助網頁設計,也特別介紹 websim.ai 網站 (https://websim.ai)透過提示詞互動先建構出基本網頁框架,讓學生有能力用AI協助進行網頁設計。
  5. 此次期末主題是網站製作的亮點之處,有同學將擔任進德樓相關幹部,故以進德樓為主題進行網站設計(http://120.113.173.41/2025SGEN/1118175/index.html),有同學介紹嘉義市的美食與景點推薦(http://120.113.173.41/ 2025SGEN/1084927/index.html),也有同學則以自己興趣香草植物為主題進行網站設計(http://120.113.173.41/2025SGEN/1138913/index.html)

檢討與建議

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

  1. 本次課程共有18人次填寫問卷,問卷結果如下所示:

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

  1. 受益良多,希望能多開這類型課程!
  2. 教學速度可以再放慢一些會更好
  3. 喜歡在課程上老師用心講解的內容,也讓我們在每一次課程結束後,總結一個練習題,加深課程的印象!
  4. 非常滿意在這門課程之中所學的專業知識,很感謝老師在每一次的課程中所講解的內容,也在每一次的課程後,讓我們複習上課的課程,加深我們對於課程的印象!
  5. 老師上課很用心 仔細講解 也有把上課影片上傳到教學平台 方便平時做複習
  6. 從上述問卷調查統計,由於期末網站可由一人完成,因此提升團隊合作能力調查結果也符合期末主題式網站製作的現況。但提升溝通表達能力也是偏低主要網頁製作是以內容為主,下次上課將會設計一個作業練習由一位同學當成網頁需求者另一位是網頁設計者針對網頁設計內容進行溝通表達演練,以提升溝通表達。而資訊能力提升整體而言都是有提升居多。
  7. 雖然進學班的網頁程式設計基礎入門初期修課有25位同學,但期末完整主題式網站製作的只有11人完成,也有4人申請停修,而有少數幾位同學從未到課。未來若有再開設進修部課程,將採更模組化教材與教學設計,輔助學生以鷹架方式協助他們進行網頁設計。

 

佐證資料

(含活動剪影)

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

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

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

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

修課學生成果發表.jpg
 修課學生成果發表.jpg
學生設計網頁表格功課表.jpg
 學生設計網頁表格功課表.jpg
教師上課會面_01.jpeg
 教師上課會面_01.jpeg
成果發表同儕互評.jpg
 成果發表同儕互評.jpg
教師教學畫面.jpg
 教師教學畫面.jpg
修課學生成果發表02.jpg
 修課學生成果發表02.jpg
學生設計嘉大踅院簡介網頁.jpg
 學生設計嘉大踅院簡介網頁.jpg
期末成果報告畫面.jpg
 期末成果報告畫面.jpg