:::
2. 開始動手做界面
2-1 請AI幫我們做前端界面
- 試過許多免費AI，寫程式能力最強的莫過於 https://claude.ai
- 大部份免費AI都有限額，限額用完了，就需停止幾個小時才能繼續用，萬一claude用完了，可以到這裡繼續使用：
https://www.coze.com/search/Sonnet?entityType=1 - 請貼上以下的提示詞（並Ctrl+V貼上圖片）：
請用Bootstrap 5.3 設計一個響應式的學校新聞網站。 主要元素包括： 頂部有一個藍色背景的頁眉，包含網站標題'校園藝文活動新聞'。 下方有一個簡單的導航欄，包含'回首頁'、'內嵌語法'、'發布新聞'等選項，右邊有搜尋框。 主體部分分為兩列： 左側寬列用於顯示主要新聞內容，包括大圖和文字描述，大小佔 9/12。 右側窄列用於顯示側邊欄，包含最新消息列表，大小佔 3/12。 每則新聞項目應包含： 標題 發布日期和作者 相關圖片：置於左邊，大小佔 4/12。 簡短描述：置於右邊，大小佔 8/12。 在底部添加一個簡單的分頁導航。 頁腳包含版權信息和聯繫方式。 整體設計應保持簡潔、專業的學術風格，主色調使用藍色和白色。確保網站在桌面和移動設備上均能良好顯示。 - 得到的結果如下，請開新檔，存成
index.html：<!DOCTYPE html> <html lang="zh-Hant"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>南市校園藝文活動新聞</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .header { background-color: #e6f3ff; background-image: url('https://fakeimg.pl/2000x200/e6f3ff/909090?text=Header+Background'); background-size: cover; padding: 20px 0; } </style> </head> <body> <header class="header mb-4"> <div class="container"> <h1 class="text-center">南市校園藝文活動新聞</h1> </div> </header> <div class="container"> <div class="row"> <nav class="col-md-12 mb-3"> <ul class="nav nav-tabs"> <li class="nav-item"><a class="nav-link active" href="#">首頁</a></li> <li class="nav-item"><a class="nav-link" href="#">校園地圖</a></li> <li class="nav-item"><a class="nav-link" href="#">產學合作網站</a></li> </ul> </nav> </div> <div class="row"> <main class="col-md-9"> <article class="mb-4"> <h2>犀牛上顎與白堊化石有看頭</h2> <div class="row mb-3"> <div class="col-md-8"> <img src="https://fakeimg.pl/800x400/cccccc/909090?text=Main+Image" class="img-fluid" alt="主要圖片"> </div> <div class="col-md-4"> <img src="https://fakeimg.pl/400x200/cccccc/909090?text=Image+1" class="img-fluid mb-2" alt="圖片1"> <img src="https://fakeimg.pl/400x200/cccccc/909090?text=Image+2" class="img-fluid" alt="圖片2"> </div> </div> <p>2024-06-29記者某某/台南報導 石膏化石展區「台灣古生物剪影區」特展二十九日收攤囉喔，由國立工業生產中心的「犀牛上顎頭骨標本」...[內容省略]</p> </article> <article class="mb-4"> <h2>跨越國界的音樂情緣-橋中管樂團與日本開智未來高校吹奏部攜手野球應援</h2> <img src="https://fakeimg.pl/800x400/cccccc/909090?text=Orchestra+Image" class="img-fluid mb-3" alt="管樂團圖片"> <p>光武國小體育館內發出悠揚音樂，只見指揮在台前揮灑，音樂優雅且意味深長...[內容省略]</p> </article> <article> <h2>臺南慈中暑期醫院志工 看見病苦中綻放最美笑容</h2> <div class="row"> <div class="col-md-4 mb-3"> <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+1" class="img-fluid" alt="圖片1"> </div> <div class="col-md-4 mb-3"> <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+2" class="img-fluid" alt="圖片2"> </div> <div class="col-md-4 mb-3"> <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+3" class="img-fluid" alt="圖片3"> </div> </div> <p>炎炎夏日當中，正當大家都一窩蜂地報名各種才藝班、夏令營時...[內容省略]</p> </article> <nav aria-label="Page navigation" class="mt-4"> <ul class="pagination justify-content-center"> <li class="page-item"><a class="page-link" href="#">«</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">»</a></li> </ul> </nav> </main> <aside class="col-md-3"> <div class="list-group mb-4"> <a href="#" class="list-group-item list-group-item-action">回上方神按鈕</a> <a href="#" class="list-group-item list-group-item-action">快速登入</a> </div> <div class="card mb-4"> <div class="card-header">近期新聞</div> <ul class="list-group list-group-flush"> <li class="list-group-item">2024-07-31 【南市新聞】酷暑高溫...</li> <li class="list-group-item">2024-07-30 【臺南新聞】大臺南...</li> <li class="list-group-item">2024-07-20 【活動訊息】府城歸...</li> </ul> </div> </aside> </div> </div> <footer class="bg-light mt-4 py-3"> <div class="container text-center"> <p>系統設計：網你設計，電話：(06) xxxxxxxx (服務時間)</p> <p>Copyright © 2011 臺南市政府教育局資訊中心 All Rights Reserved.</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
