:::

2-1 請AI幫我們做前端界面

  1. 試過許多免費AI,寫程式能力最強的莫過於 https://claude.ai
  2. 大部份免費AI都有限額,限額用完了,就需停止幾個小時才能繼續用,萬一claude用完了,可以到這裡繼續使用:
    https://www.coze.com/search/Sonnet?entityType=1
  3. 請貼上以下的提示詞(並Ctrl+V貼上圖片):
    請用Bootstrap 5.3 設計一個響應式的學校新聞網站。
    主要元素包括:
    
    頂部有一個藍色背景的頁眉,包含網站標題'校園藝文活動新聞'。
    下方有一個簡單的導航欄,包含'回首頁'、'內嵌語法'、'發布新聞'等選項,右邊有搜尋框。
    主體部分分為兩列:
    
    左側寬列用於顯示主要新聞內容,包括大圖和文字描述,大小佔 9/12。
    右側窄列用於顯示側邊欄,包含最新消息列表,大小佔 3/12。
    
    
    每則新聞項目應包含:
    
    標題
    發布日期和作者
    相關圖片:置於左邊,大小佔 4/12。
    簡短描述:置於右邊,大小佔 8/12。
    
    
    
    在底部添加一個簡單的分頁導航。
    頁腳包含版權信息和聯繫方式。
    
    整體設計應保持簡潔、專業的學術風格,主色調使用藍色和白色。確保網站在桌面和移動設備上均能良好顯示。

    並貼上此圖片(點擊後複製圖檔即可)
     

  4. 得到的結果如下,請開新檔,存成 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>

     


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1992%26tbsn%3D55

計數器

今天: 1072107210721072
昨天: 2027202720272027
總計: 7972113797211379721137972113797211379721137972113