「生成式AI導入課程教學」:網頁程式設計

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

主軸名稱

A主軸】教學創新精進

補助課程類別

□通識實踐課程

□嘉義巡禮微學分課程

□微學分課程

█AI導入課程

□業師協同教學

□跨域共授課程

□國際學者協同教學

 

課程名稱

網頁程式設計

授課教師

主授:許政穆

共授:無

開課學期

113-2

開課單位

資訊工程學系

修課人數

生理男

34

生理女

19

其他

 

結案報告公開

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

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

1.終結貧窮

3.健康與福祉

5.性別平權

7.可負擔的潔淨能源

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

11.永續城鄉

13.氣候行動

15.保育陸域生態

17.多元夥伴關係

2.消除飢餓

4.優質教育

6.淨水及衛生

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

10.減少不平等

12.責任消費及生產

14.保育海洋生態

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

關鍵能力

STEAM領域

□人文關懷

□跨領域

問題解決

自主學習

□社會參與

□國際化

教學活動類型

可複選

█講授法

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

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

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

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

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

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

□其他,請說明:

課程執行場域

█實體教室

□實體教室+線上教學

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

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

□校外場域+線上教學

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

課程目標

及內容

教學目標/目的

  • 1.      本課程主要是教授資工系大一同學以HyperText Markup Language (HTML) Cascading Style Sheets (CSS)純文字編輯模式下設計網頁,以因應未來課程作業專案或計算機專題課程的專題製作需求,而具備網頁設計能力。
  • 2.      由於以HTMLCSS 進行純文字網頁設計,需要大量編排撰寫網頁標記與CSS的網頁樣式設定後,再將編好後的網頁內容以瀏覽器檢視網頁設計的成果。而生成式AI工具如Chatgpt 本身也具備AI生成網頁內容,只要給予精準的網頁內容的提示語,便能提供學生一個符合需求的網頁內容的HTML Code,使學生能依此網頁內容框架繼續設計網頁,也能給予網頁樣式的提示語,也會生成具有網頁樣式套色的網頁內容。不僅能加快學生學習網頁標記語言,更能透過AI協作共同進行網頁創作。
  • 3.      由於網頁設計課程的期末作業是分組進行主題式網站設計,由多面向的子主題進行網頁設計,為了讓學生能有系統化進行網頁設計,本課程將導入問題導向學習,透過生成式AI工具如 Felo.AI協助同組同學進行網頁設計的主題、架構、內容、風格樣式等,甚至以心智圖等架構協助描繪網頁架構來進行網頁設計,如此將能讓學生能有系統化進行期末的主題網站設計,讓期末的主題網站的網頁內容更為聚焦,也能讓學生學習使用AI工具進行問題導向學習與主題式網站製作應用的能力養成。

具體措施與

亮點成果

★執行成效(對應課程目標、教學計畫)

教學模式

導入AI類別

成效評估

AI輔助教學法-學習認識HTML網頁標記與CSS網頁排版基礎語法。
 
課程中:提供明確的提問詞範例,協助學生正確與AI工具互動。

chatgpt

合乎預期:

說明:chatgpt已能完整提供HTML標記語法說明、用途、範本等,能協助學生快速建立網頁標記使用。

不合乎預期:

說明:

AI協力網頁創作學習法 – 以學生自己113-2學期功課表,向AI工具提供課表文字資訊(進階練習採用圖片),與AI互動進行功課表網頁的協力製作。

chatgpt

合乎預期:

說明:學生將課表的文字資料(包括時間、課名等)提示給chatgpt,再由chatgpt產生功課表網頁。依照學生回饋已給予功課表圖片最能產生最正確的課表。

不合乎預期:

說明:

AI協力網頁圖片與網頁底圖創作 – 學生使用AI工具生成網頁使用圖片,避免版權問題。

Microsoft copilot

合乎預期:

說明:

不合乎預期:

說明:由於 copilot 的提示限制過多,造成產生的圖片不合適。部分同學使用 chatgpt開放的Library (生成圖片效果更加,未來將採用chatgptLibrary 來生成。

AI協力JavaScript前端網頁設計創作 – 學生使用AI工具進行JavaScript語法學習與JavaScript前端網頁特效設計。

chatgpt

合乎預期:

說明:由於JS語法與C++類似,故大部分學生都熟悉JS,因此請學生設計網頁時鐘等都能準確生成。

不合乎預期:

說明:

AI協力網站規劃與內容生成 – 學生使用AI工具進行網站主題規劃討論

FeloChatGPT

合乎預期:

說明:為了讓同組學生能聚焦於期末主題網站的網頁設計規劃,由同組同學使用FeloChatGPT進行期末主題網站的規畫書製作,並給予特定格是由學生與AI工具互動生成與調整規劃書內容。從學生繳交作業的回饋內可看出學生仍習慣chatgpt 進行協力。未來課程將以單一AI工具為主,以利學生有系統學習。

不合乎預期:

說明:

AI協力網頁設計生成製作 – 學生使用AI工具 websim 快速生成網頁模板內容,進行網頁雛型建置。

websim

合乎預期:

說明:websim確實能加快學生網頁創作,特別是無網頁架構內容想法時,透過websim快速幫助學生生成網頁進行調整。

不合乎預期:

說明:

亮點成果

1. 本課程共有53位同學修課,期末的主題網站製作以3人為一組,共有18組主題作品,本次課程主題以程式設計教學、(冷門)景點介紹、銀髮族健康等三大主題,並將所有組別的網站內容建置於 http://120.113.173.41/2025SWD/中,未來可供修習網頁程式設計相關課程學生觀摩使用。

2.本次課程除了導入chatgpt進行輔助教學、網頁協力創作外,也使用websim.ioAI工具協助網頁創作,可以加速學生的網站規劃與創作能力。

檢討與建議

教師教學心得及建議(教學反思)

  1. 本次資工系的網頁程式設計課程導入生成式AI協力教學,可以協助教師將較為基礎網頁基礎知識,透過chtpgpt的問答,提供學生自主學習的學習機會,從過程中大部分的同學都已經非常善用AI工具,因此導入課程無問題。然而AI工具功能的改版創新相當快速,因此課程中若有更合適的AI工具也可以立即置換使用。
  2. 由於網頁設計常會有圖片照片等素材,但仍可發現部分同學的網站作品照片並不是自己拍攝而是網路抓取。未來要特別宣導網路著作權部分,網站的圖片仍應以自拍或自行協力創作,以免有圖片照片的版權問題。

學生學習回饋 (僅列舉五位課程回饋)

  1. 這學期上網頁設計這堂課學到很多,不管是從最基礎開始編寫網頁、一步一步地調整排版和開始懂得運用每段程式的功能並通用,對我來說都收穫頗豐。關於使用AI 工具於網頁設計,其實一開始我有點不能好好掌握怎麼使用AI去產生我想要的樣式,進而花費了很多時間。但後來我發現,當我給AI很明確且詳細的關鍵詞,並把條件鎖死一點,其實AI可以很好的達成任務,也透過這個課程讓我更懂得如何運用AI工具去進行優化。
  2. AI做網頁卻實是非常方便,不過是分組做同一個project的話就很麻煩了,由於css的格式分別給AI生成都會不一樣,容易導致不同分頁的規格不統一,有很多修改過程卡住的原因就是css不同,加入javascript之後問題就更大了,經過這次分處合作之後,我認為最好的辦法就是先設定好一個母css,在生成別的子分頁的時候把母css貼到這次生成的css的最後套用,而javascript我就不是很確定了,用同個js,不同頁面也不會有同個功能,只能說目前的AI還不能解決所有問題
  3. 這個學期網頁中很常使用AI工具像chatGPT來生成,包括學期直式功課表、網頁生成等等,過程中會發現用AI生成的確快速方便,但其中會有語意跟實際產出不符的情況,但如果適當的作為輔助工具,還是能大幅減少工作量及所需時間。
  4. 上學期起初碰這堂課時就覺得很好玩!能自己設計網頁十分新奇,但沒想到最卡的地方是在使用AI幫我們設計課表哈哈。我記得那時候大家都快被AI搞瘋了,先是一直不斷重新叫AI生成課表,再到來還要換個帳號刷新,不然越改越多,反而越錯越多。用到後來大家都對ChatGPT爆炸差不多了,開始有人提議說要不要偷偷小改程式碼哈哈,雖然這樣的行為不太歐虧,但我覺得小修整一下不會太超過!況且況且還能及時修正AI出錯的地方、也順便練習看程式碼 嘻嘻!
  5. 這學期學到了很多htmlCSSJS的知識,我本來就對設計有興趣,看到自己所學真的可以做出那種酷酷網站很開心,希望我之後會繼續變強可以寫出更酷的網站。專題製作時,雖然很多地方都還是靠AI工具幫忙抓蟲、教我我想要的功能怎麼寫,但在跟AI互動的過程我還是學會了很多,並且有些東西AI也不會成功寫出來,還是要靠我們修改。作網站的過程很有趣也很繁雜,中途有因為每個人寫html開區塊建class的習慣不同一度統整到很崩潰但最後有成功把網站做得漂漂亮亮的非常開心。小組的大家都超棒,共同編輯難免有多端不同步很不方便的狀況發生,但還是順利把網站做完了,感謝她們

佐證資料

(含活動剪影)

 

 

 

 分組進行主題式網站內容規劃

同組使用websim 設計網頁模板 

 

 

分組以ChatGPT協力創作期末主題網站規劃
使用便利貼規劃網站內容