網頁連結教學第二課：修改側邊欄連結

1

這堂課要做什麼？

把假連結變成真連結！

上一課我們學會了 <a> 標籤的用法。

但是你有沒有發現，之前做的側邊欄導航，
點下去都不會跳到其他頁面？

因為我們之前寫的是 href="#"，這是「假連結」！
今天我們要把它改成「真連結」，讓側邊欄真的可以導航！ 🚀

2

找到要修改的程式碼

打開你的 index.html，找到側邊欄的選單區塊（menu-items）。
你會看到很多 <a href="#">，這就是我們要修改的地方！

❌ 修改前（假連結）

✅ 修改後（真連結）

                <a
                href="index.html">
                首頁
                </a>
              

💡 小提示

href="#" 代表「連到同一頁的最上面」，不會跳到其他頁面。
要改成檔案名稱（如 about.html）才會跳到其他頁面！

3

修改步驟（照著做！）

1

先規劃你的網站有哪些頁面

在修改之前，先想好你的網站要有幾個頁面、每個頁面的檔案名稱：

圖示選單名稱檔案名稱

🏠 首頁 index.html

📄 HTML 教學 html-tutorial.html

🎨 CSS 教學 css-tutorial.html

⚡ JavaScript js-tutorial.html

🖼️ 作品集 portfolio.html

ℹ️ 關於我們 about.html

2

修改每個選單的 href

把每個 href="#" 改成對應的檔案名稱：

index.html - 側邊欄選單

                    <nav
                    class="menu-items">
                    <!-- 🏠 首頁 -->
                    
                      <a
                      href="index.html"
                      class="menu-item active">
                    <i
                    class="fa-solid fa-house"></i>
                    <span>首頁</span>
                    </a>

                    <!-- 📄 HTML 教學 -->
                    
                      <a
                      href="html-tutorial.html"
                      class="menu-item">
                    <i
                    class="fa-solid fa-code"></i>
                    <span>HTML 教學</span>
                    </a>

                    <!-- 🎨 CSS 教學 -->
                    
                      <a
                      href="css-tutorial.html"
                      class="menu-item">
                    <i
                    class="fa-solid fa-palette"></i>
                    <span>CSS 教學</span>
                    </a>

                    <!-- 更多選單項目... -->
                    </nav>
                  

3

建立對應的 HTML 檔案

連結改好後，還要真的建立那些檔案！不然點下去會出現「找不到頁面」的錯誤。

⚠️ 重要提醒

所有 HTML 檔案都要放在同一個資料夾裡面！
檔案名稱要跟 href 裡面寫的完全一樣（包括大小寫）！

4

用 AI 快速生成其他頁面

AI 是你的好幫手！ 🤖

一個一個自己寫頁面太慢了！
我們可以請 AI 幫忙生成其他頁面，
只要給它正確的「提示詞（Prompt）」就可以了！

複製這段 Prompt 給 AI

請幫我生成一個「CSS 教學」網頁，要求：

1. 使用與我的 index.html 相同的側邊欄導航結構

2. 側邊欄連結要改成：首頁→index.html、HTML教學→html-tutorial.html、CSS教學→css-tutorial.html

3. 把「CSS 教學」那個選單項目加上 class="active"

4. 主要內容區放 CSS 的基礎教學（參考維基百科的介紹）

5. 內容包含：什麼是 CSS、CSS 語法、常用屬性介紹

6. 風格要活潑，適合初學者

7. 背景色改成 CSS 的代表色（藍紫色漸層）

💡 重要：記得附上你的 index.html

把你的 index.html 檔案一起傳給 AI，
這樣 AI 才知道你的側邊欄長什麼樣子，生成的頁面才會一致！

5

加入外部連結（連到別的網站）

側邊欄也可以放「外部連結」，讓使用者跳到維基百科、YouTube 等網站：

外部連結寫法

              <!-- 外部連結：記得加 target="_blank" 開新視窗！
                -->

              <a
                href="https://zh.wikipedia.org"
                target="_blank"
                class="menu-item">
              <i
              class="fa-solid fa-globe"></i>
              <span>維基百科</span>
              </a>
            

💡 為什麼外部連結要加 target="_blank"？

這樣點擊後會開新分頁，使用者的網站還會留著，
不會因為跳到別的網站就離開你的網頁！

今天學到的重點

href="#" 是「假連結」，不會跳到其他頁面
要改成 href="檔案名稱.html" 才是真連結
連結的檔案必須真的存在，放在同一個資料夾
外部連結要寫完整網址（https://...）
外部連結建議加 target="_blank" 開新視窗
可以用 AI 快速生成其他頁面，記得附上 index.html 給它參考
每個頁面的側邊欄要標示目前在哪一頁（class="active"）