構建內容頁面
使用 CSS 佈局頁面內容是一個非常重要的技能，所以在這個評估中，我們將測試你對頁面最終外觀的思考能力，以及選擇合適的結構語義來構建佈局的能力。
| 先決條件 | 在嘗試這個評估之前，你應該已經完成了課程的其餘部分，特別是要重點關注文件和網站結構。 |
|---|---|
| 目標 | 測試對網頁結構的瞭解，以及如何在標記中表示預期的佈局設計。 |
起點
要開始這個評估，你應該去獲取包含所有起始資源的 zip 檔案。
zip 檔案包含
- 你需要新增結構標記的 HTML。
- 用於對你的標記進行樣式化的 CSS。
- 頁面上使用的影像。
在你的本地計算機上建立示例，或者使用線上編輯器，例如 CodePen、JSFiddle 或 Glitch。
注意：如果你卡住了，你可以透過我們的溝通渠道聯絡我們。
專案簡要
在這個專案中，你的任務是獲取觀鳥網站主頁的內容，並向其新增結構元素，以便可以對其應用頁面佈局。它需要有
- 一個跨越整個網站寬度的頁首，包含頁面的主標題、網站徽標和導航選單。在應用樣式後，標題和徽標並排顯示，導航顯示在這兩個專案下方。
- 一個主內容區域，包含兩列 - 一個主塊，用於包含歡迎文字，以及一個側邊欄，用於包含影像縮圖。
- 一個頁尾，包含版權資訊和署名。
你需要為以下內容新增合適的包裝器：
- 頁首
- 導航選單
- 主內容
- 歡迎文字
- 影像側邊欄
- 頁尾
你也應該
- 透過在開始時提供的現有
<link>元素下方新增另一個元素，將提供的 CSS 應用到頁面上。
提示和技巧
- 使用W3C Nu HTML 檢查器 來捕獲你的 HTML、CSS 和 SVG 中的意外錯誤 - 你可能錯過的錯誤 - 這樣你就可以修復它們。
- 你不需要了解任何 CSS 才能進行此評估；你只需要將提供的 CSS 放入 HTML 元素中即可。
- 提供的 CSS 被設計成這樣，當在標記中新增正確的結構元素時，它們將在渲染的頁面中顯示為綠色。
- 如果你卡住了，無法想象應該將哪些元素放在哪裡，請繪製一個簡單的頁面佈局塊圖，並在你認為應該包裝每個塊的元素上寫上。這非常有用。
