coding小白盜版學校官網ㄉ30天挑戰日記即時預覽外掛分享&html(下)

2025 iThome 鐵人賽

DAY 3

自我挑戰組

coding小白盜版學校官網ㄉ30天挑戰日記系列第 3 篇

17th鐵人賽

怪盜積德

2025-09-17 22:34:23

25 瀏覽

分享至

晚安各位帥哥美女，歡迎來到coding小白盜版學校官網的第三天～

這個計畫的內容是我這個coding超新手會在這30天裡，把複刻學校官網當作目標，從最基礎的前端html、css、js...開始邊做邊學，紀錄每天的學習進度，看看一個月過去能學到什麼程度。

今天的進度平平無奇，就是把昨天剩下的html寫完，也沒遇到什麼障礙，就這樣結束好像太混了一點，於是決定來分享一個好用的小工具 Live Server

VS Code 即時預覽的讚讚外掛：Liver Server

在寫 HTML、CSS 的時候，最麻煩的就是每次改完都要跑去瀏覽器按重新整理。其實在 Visual Studio Code 裡有一個超好用的外掛 Live Server，可以幫忙自動刷新頁面，只要在檔案裡 ctrl+s 馬上看到最新結果，超級省事！

怎麼安裝

①打開 VS Code → 點選左列的「延伸模組」
②搜尋 Live Server，找到作者是 Ritwick Dey 的那個，直接按安裝

③出現這個畫面就是安裝成功啦，是不是超簡單

怎麼用

④點選左列的檔案總管
⑤找到你的 HTML 檔案 → 右鍵 → Open with Live Server，瀏覽器就會自動跳出來顯示網頁

之後每次在 VS Code 按 Ctrl+S 瀏覽器都會自己更新，可以邊改邊看效果了～很讚吧～

以上就是今天的分享，附上今日進度證明我真的有做作業
收工！明天見！

<!DOCTYPE html>
<html lang="zh-tw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>國立台北教育大學</title>
</head>
<body>
    <header>
        <img src="img\logo.png" alt="橫式logo">
        <div>
            <div></div>
            <p>校慶專區</p>
            <p>網站導覽</p>
            <p>International student</p>
            <p>新生</p>
            <p>在校生</p>
            <p>校友</p>
            <p>教職員工</p>
            <p>Englisg</p>
            <img src="img\icon_search.png" alt="搜尋">
        </div>
    </header>
    <nav>
        <ul type="none">
            <li>關於北教大</li>
            <li>學術單位</li>
            <li>行政單位</li>
            <li>高中生專區</li>
            <li>招生資訊/榜單</li>
            <li>AI@NTUE</li>
            <li>圖書館</li>
            <li>北師美術館</li>
            <li>捐款專區</li>
            <li>職涯百工圖</li>
        </ul>
    </nav>
    <article>
        <img src="img\banner_01.jpg" alt="大橫幅">
        <section>
            <section>
                <div>
                    <img src="img\icon_news.png" alt="新聞ICON">
                    <h2>校園新聞</h2>
                </div>
                <div>
                    <img src="img\news_01.png" alt="新聞校長">
                    <div>
                        <p>2023-09-18</p>
                        <p>本校創新轉型發展有成，獲風傳媒兩則專訪報導</p>
                    </div>
                </div>
                <div>
                    <img src="img\news_02.png" alt="新聞芝山">
                    <div>
                        <p>2023-09-09</p>
                        <p>國北教大芝山親善大使團「智慧啟航‧夢想起飛」社團博覽會魅力登場</p>
                    </div>
                </div>
                <p>更多校園新聞</p>
            </section>
            <section>
                <div>
                    <img src="img\icon_video.png" alt="影片ICON">
                    <h2>影中有你</h2>
                </div>
                <div>
                    <img src="img\icon_arrowl.png" alt="向左箭頭">
                    <div>
                        <iframe src="https://www.youtube.com/embed/AZORgk8XbxY?si=H9S13TJnzsV9Accd" 
                        title="國北校園介紹影片" frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        <p>國立台北教育大學-學校簡介中文版(2024)</p>
                    </div>
                    <img src="img\icon_arrowr.png" alt="向右箭頭">
                </div>
                <p>更多影中有你</p>
            </section>
        </section>
        <section>
            <nav>
                <ul type="none">
                    <li>一般</li>
                    <li>招生</li>
                    <li>緊急</li>
                    <li>徵才</li>
                    <li>研討會</li>
                    <li>活動訊息</li>
                </ul>
            </nav>
            <div>
                <div>
                    <div>
                        <p>2024-05-02</p><p>/</p>
                        <p>本校 「校務發展績效報告」 敬請參閱</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-09-04</p><p>/</p>
                        <p>第4次公告標租本校經管「臺北市大安區復興南路二段303號」大樓共7戶房地</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-08-13</p><p>/</p>
                        <p>【公告】本校114學年度大學分發入學不另寄發錄取通知，錄取生請至本校網頁「新生專區」查閱註冊須知</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-08-21</p><p>/</p>
                        <p>「有關社群平台疑似有學生霸凌情事」澄清公告</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-09-16</p><p>/</p>
                        <p>【轉知】大陸委員會邀請貴校師生參訪</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-09-16</p><p>/</p>
                        <p>【通知】本校114年9月24日於行政大樓及圖書館舉行國家防災日地震演練活動，請配合相關事項</p>
                        <div class="line01"></div>
                    </div>
                    <p>更多一般訊息</p>
                </div>
            </div>
        </section>
        <section>
            <section>
                <img src="img\icon_link.png" alt="連結ICON">
                <h2>公開校務</h2>
                <div class="line02"></div>
                <div>
                    <p>iNTUE校務整合資訊系統</p>
                    <p>高校深耕計畫網站</p>
                    <p>資訊公開專區</p>
                    <p>學雜費專區(含獎助學金資訊)</p>
                    <p>學生兼任助理專區</p>
                    <p>勞資會議專區</p>
                    <p>校慶專區</p>
                </div>
                <p>更多公開校務</p>
            </section>
            <section>
                <img src="img\icon_link.png" alt="連結ICON">
                <h2>生活學習與資訊</h2>
                <div class="line02"></div>
                <div>
                    <p>Moodle教學平台</p>
                    <p>住宿資訊</p>
                    <p>愛活動演講公告平台</p>
                    <p>活動報名系統</p>
                    <p>學生獎助資源專區(含經濟不利學生)</p>
                    <p>智慧財產權專區</p>
                    <p>系所職涯就業資訊</p>
                </div>
                <p>更多生活學習</p>
            </section>
            <section>
                <img src="img\icon_link.png" alt="連結ICON">
                <h2>常見詢問</h2>
                <div class="line02"></div>
                <div>
                    <p>校園入口網</p>
                    <p>場地借用系統</p>
                    <p>全校分機一覽表</p>
                    <p>行事曆</p>
                    <p>各單位法令規章</p>
                    <p>防疫專區</p>
                    <p>用電資料</p>
                </div>
                <p>更多常見詢問</p>
            </section>
            <section>
                <img src="img\icon_link.png" alt="連結ICON">
                <h2>校外資訊</h2>
                <div class="line02"></div>
                <div>
                    <p>全民資安素養自我評量</p>
                    <p>2024總統盃黑克松</p>
                    <p>教育部詐騙防治專區</p>
                    <p>CIRN平台</p>
                    <p>教師資格檢定考試網站</p>
                    <p>綠色生活資訊網</p>
                    <p>防治學生藥物濫用資訊網</p>
                </div>
                <p>更多校外資訊</p>
            </section>
        </section>
        <section>
            <div>
                <img src="img\icon_fb.png" alt="FBicon">
                <p>Facebook</p>
            </div>
            <div>
                <img src="img\icon_yt.png" alt="YTicon">
                <p>Youtube</p>
            </div>
            <div>
                <img src="img\icon_ig.png" alt="IGicon">
                <p>Instagram</p>
            </div>
            <div>
                <img src="img\footlogo.png" alt="校徽">
                <p>《北教大校訊》</p>
            </div>
        </section>
    </article>
    <footer>
        <img src="img\footlogo.png" alt="校徽">
        <p>電話：+886-2-2732-1104 +886-2-6639-6688</p>
        <p>網址： https://www.ntue.edu.tw</p>
        <p>地址：106320 臺北市大安區和平東路2段134號</p>
        <p>網站維護：計網中心</p>
        <p>本網站著作權屬於 國立臺北教育大學</p>
        <p>訪問人數：5782337</p>
        <img src="img\800039144.png" alt="無障礙標章">
    </footer>

</body>
</html>