# HTML 練習作業：建立部落格模擬版面 ## 學習目標 透過設計和編寫完整的部落格首頁結構來應用您的 HTML 知識。這項實作作業將加強您對語義化 HTML 概念的理解、可訪問性最佳實踐，以及在網頁開發過程中使用的專業代碼組織技能。 **完成此作業後，您將能夠：** - 練習在編碼前規劃網站版面 - 適當地應用語義化 HTML 元素 - 創建可訪問且結構良好的標記 - 培養專業的編碼習慣，包括添加註解和組織代碼 ## 專案要求 ### 第一部分：設計規劃（視覺模擬版面） **創建您的部落格首頁的視覺模擬版面，需包含以下內容：** - 帶有網站標題和導航的頁首 - 主內容區域，至少包含 2-3 篇部落格文章預覽 - 側邊欄，包含額外資訊（關於區塊、近期文章、分類） - 頁尾，包含聯絡資訊或連結 **模擬版面創建選項：** - **手繪草圖**：使用紙和鉛筆，然後拍照或掃描您的設計 - **數位工具**：Figma、Adobe XD、Canva、PowerPoint 或任何繪圖應用程式 - **線框工具**：Balsamiq、MockFlow 或類似的線框設計軟體 **為您的模擬版面各部分標註您計劃使用的 HTML 元素**（例如，「頁首 - `

`」、「部落格文章 - `

`」）。 ### 第二部分：HTML 元素規劃 **創建一份清單，將模擬版面的每個部分映射到特定的 HTML 元素：** ``` Example: - Site Header →

- Main Navigation →