最近看ㄚ亮校長和剛神用AI設計好多小工具網頁，真的覺得太神了！
💜ㄚ亮校長的計時器：
https://hsuliang.github.io/cdown2.html
💛剛神的行事曆工具
https://filedn.com/laMtL9jmKf7JrDEQG0A6OPy/html/schoolCal.html 剛神的部落格介紹： https://kentxchang.blogspot.com/2024/07/ai.html?fbclid=IwZXh0bgNhZW0CMTEAAR18BXjQK9Vh7TmRBpv2MmT3sHSzDNWDsDeCENQV9PMhMIQJMmCR2EKEfRo_aem_O833ZB25HkbRlh81tpyPvA
也想要學一下，所以就請教校長，校長也立刻大方和我分享~
想要學習真的要跟對人，跟著神人的腳步，一步一步往前走，也是能到達目的地的～如果你們也想試試看，可以跟著下面步驟做喔！
👉步驟一：與AI對話寫出程式碼 我是用chatgpt寫的~ 指令：（是用ㄚ亮校長大方分享的咒語小修一下）
我要寫一個倒數計時的html網頁程式，有以下的需求： 1. 第一頁是設定頁面，可以讓使用者設定倒數時間，也可以選擇是否要有倒數計時的聲音 2. 設定完成後，網頁中間要有一個「開始計時」按鈕，按了以後，下方會開始出現倒數計時。 3. 計時的畫面是電子鐘的樣式。 4. 同個網頁的最下方要寫上推陳初心，並加上插圖如附件。 5. 計時器的聲音在這裡：https://www.teachersay.com/image/works/Lljbox1YshiM0xQw736XaQ9KsMKkEp5fv4zXNxXL.mp3 6. 計時器的聲音是60BPM
-----------------------最後就會得到下面的回覆--------------------------------------------
👉步驟二：把程式碼儲存為 index.html
接著按右上角的複製程式碼，點開記事本貼上。
存檔的時候要記得選所有檔案，然後檔名就命為index.html
存好之後就會出現一個html檔，直接點開就會出現完成後的計時器畫面，如下：
👀【重要提醒】請確保圖片和音檔放在相同的目錄下，這樣網頁才能正確顯示圖片。
👉步驟三：利用Github發布網頁
完成後的要怎麼和大家分享呢？這也是校長教我的~
第一種方式：提供檔案讓大家下載，在本機執行。
第二種方式：找一個網頁伺服器，把檔案放上去，如:Github(免費)。
如何申請Github的參考步驟：（感謝文賢～讚嘆文賢～雖然我不認識您，但超謝謝啊！）
https://hs1250.notion.site/GitHub-388c6b96d7c64b8e8ee1aa57fbbd38cd
最後就大功告成了！！！
我試做成功的計時器頁面~點了就可以用喔！！
https://sunny680228.github.io/test.github.io/
最後的最後，感謝ㄚ亮校長大方分享，也願意讓我寫在部落格上與大家共好~
這就是教育噗浪客的精神~~共有、共享、共好!!!!
延伸閱讀~電腦玩物
https://www.playpcesor.com/2024/06/claude-ai.html?fbclid=IwZXh0bgNhZW0CMTEAAR35fnQ1nvhZB61o4oGWmPqi51LsRRPOgx6oOJ_4ykiSs6lTt11VLVvlj1I_aem_w90Wky6hqMKW5z703Mup3Q&m=1AI製作網頁工具或遊戲/阿玉教學網
沒有留言:
張貼留言