Mozilla 歡迎頁面

在本評估中，我們將測試您對本模組文章中討論的一些技術的瞭解，讓您向一個關於 Mozilla 的時髦歡迎頁面新增一些影像和影片！

先決條件	在嘗試本評估之前，您應該已經完成了本模組中的所有文章。
目標	測試有關在網頁、框架和 HTML 響應式影像技術中嵌入影像和影片的知識。

起點

要開始此評估，您需要獲取 GitHub 上 mdn-splash-page-start 目錄中提供的 HTML 和所有影像。將 index.html 的內容儲存在本地驅動器上的名為 index.html 的檔案中，位於一個新目錄中。然後將 pattern.png 儲存在同一目錄中（右鍵單擊影像以獲取儲存選項）。

訪問 originals 目錄中的不同影像並以相同的方式儲存它們；您現在需要將它們儲存在不同的目錄中，因為您需要使用圖形編輯器操作（其中一些）它們，然後才能使用它們。

或者，您可以使用線上編輯器，例如 CodePen、JSFiddle 或 Glitch。

注意：示例 HTML 檔案包含大量 CSS，用於樣式化頁面。您無需觸碰 CSS，只需觸碰 <body> 元素內的 HTML — 只要您插入正確的標記，樣式就會使其看起來正確。

如果您遇到困難，可以透過我們的溝通渠道之一聯絡我們。

專案簡介

在本評估中，我們為您提供了一個大部分已完成的 Mozilla 歡迎頁面，旨在說明 Mozilla 的宗旨並提供一些指向更多資源的連結。不幸的是，尚未新增任何影像或影片 — 這是您的工作！您需要新增一些媒體以使頁面看起來漂亮並更有意義。以下小節詳細說明了您需要執行的操作

準備影像

使用您喜歡的影像編輯器，建立 400px 寬和 120px 寬版本的

firefox_logo-only_RGB.png
firefox-addons.jpg
mozilla-dinosaur-head.png

為它們命名一些有意義的東西，例如 firefoxlogo400.png 和 firefoxlogo120.png。

與 mdn.svg 一起，這些影像將是您在 further-info 區域內連結到更多資源的圖示。您還將在站點標題中連結到 Firefox 徽標。將所有這些的副本儲存在與 index.html 相同的目錄中。

接下來，建立 red-panda.jpg 的 1200px 寬橫向版本和 600px 寬縱向版本，該版本更近距離地顯示熊貓。同樣，為它們命名一些有意義的東西，以便您可以輕鬆識別它們。將這兩個版本的副本儲存在與 index.html 相同的目錄中。

注意：您應該最佳化您的 JPG 和 PNG 影像以使它們儘可能小，同時仍然看起來不錯。tinypng.com 是輕鬆完成此操作的絕佳服務。

向標題新增徽標

在 <header> 元素內，新增一個 <img> 元素，該元素將在標題中嵌入 Firefox 徽標的小版本。

向主要文章內容新增影片

就在 <article> 元素內（在開始標籤下方），嵌入位於 https://www.youtube.com/watch?v=ojcNcvb1olg 的 YouTube 影片，使用相應的 YouTube 工具生成程式碼。影片寬度應為 400px。

向更多資訊連結新增響應式影像

在類為 further-info 的 <div> 內，您會發現四個 <a> 元素 — 每個元素都連結到一個有趣的與 Mozilla 相關的頁面。要完成本節，您需要在每個元素內插入一個 <img> 元素，其中包含適當的 src、alt、srcset 和 sizes 屬性。