免費AI編程助手
Mozilla splash page
| 先決條件: | 在嘗試此評估之前，您應(yīng)該已經(jīng)完成了多媒體和嵌入模塊的其余部分。 |
|---|---|
| 目的: | 測試在網(wǎng)頁，框架和HTML響應(yīng)式圖像技術(shù)中嵌入圖像和視頻的知識。 |
初始點
要開始進行此評估，您需要獲取 mdn-splash-page-start /"class ="external"> gdub上的mdn-splash-page-start 目錄。 保存 外部"> index.html 在本地驅(qū)動器上的一個名為 index.html 的文件中的新目錄中。 然后保存 > pattern.png (右鍵單擊圖片以獲得保存它的選項)。
訪問 外部">原件目錄并以相同的方式保存它們; 你現(xiàn)在要將它們保存在不同的目錄中，因為你需要在使用圖形編輯器之前操作它們中的一些。
注意:示例HTML文件包含相當多的CSS，用于對網(wǎng)頁設(shè)置樣式。 您不需要觸摸CSS，只需點擊 < body> 元素 - 只要插入正確的標記，樣式將使其看起來正確。
工程概要
在本次評估中，我們向您展示了一個大部分已完成的Mozilla初始頁面，旨在說明Mozilla所代表的內(nèi)容，并提供一些指向更多資源的鏈接。 很抱歉，尚未添加任何圖片或視頻 - 這是您的工作！ 你需要添加一些媒體，使頁面看起來不錯，更有意義。 以下小節(jié)詳細說明了您需要做什么:
準備圖像
使用您喜愛的圖片編輯器，創(chuàng)建400像素寬和120像素寬的版本:
firefox_logo-only_RGB.pngfirefox-addons.jpgmozilla-dinosaur-head.png
給他們一些明智的，例如。 firefoxlogo400.png 和 firefoxlogo120.png 。
除了 mdn.svg ，這些圖片將是您鏈接到更多資源的圖標，位于 further-info 區(qū)域中。 您還將鏈接到網(wǎng)站標題中的firefox徽標。 將所有這些內(nèi)容的副本保存在與 index.html 相同的目錄中。
接下來，創(chuàng)建一個1200px寬的版本的 red-panda.jpg 和一個600px寬的肖像版本，顯示更多的近距離拍攝的熊貓。 再次，給他們一些明智的，所以你可以很容易地識別他們。 將這兩者的副本保存在與 index.html 相同的目錄中。
注意:您應(yīng)該優(yōu)化您的JPG和PNG圖片，以使它們盡可能小，同時仍然看起來確定。 tinypng.com 是一個很好的服務(wù)，這樣做很容易。
在標題中添加徽標
在 < header> 元素中，添加 將會嵌入的 < img> 元素 小版本的Firefox標志在標題中。
向主文章內(nèi)容添加視頻
元素(位于 < article> 元素 在開頭標簽下方)，嵌入在 https://www.youtube.com/ watch？v = ojcNcvb1olg ，使用適當?shù)腨ouTube工具生成代碼。 視頻寬度應(yīng)為400像素。
向其他信息鏈接添加響應(yīng)圖片
與類別 < div> of further-info 您會發(fā)現(xiàn)四個 < a> 元素 - 每個元素都鏈接到一個有趣的Mozilla相關(guān)頁面。 要完成此部分，您需要插入 < img> 代碼> 元素，每個元素包含適當?shù)?code> src ， alt > ， srcset 代碼>和 大小 屬性 。
在每種情況下(除了一個 - 哪一個是固有響應(yīng)？)，當視口寬度為480像素寬或更小時，我們希望瀏覽器提供120像素寬版本，否則為400像素寬版本。
確保您使用正確的鏈接匹配正確的圖片！
注意:要正確測試 srcset / sizes 示例，您需要將您的網(wǎng)站上傳到服務(wù)器(使用 / webstart / Using_Github_pages"> Github頁面是一個簡單而自由的解決方案)，然后從那里，您可以使用瀏覽器開發(fā)工具測試他們是否正常工作，詳情請參閱 / HTML / Multimedia_and_embedding / Responsive_images#Useful_developer_tools">回應(yīng)圖片:實用的開發(fā)人員工具。
一個藝術(shù)指導(dǎo)紅熊貓
與類別 < div> of red-panda ，我們要插入 < picture> 元素，如果視口寬度為600像素或更小，則用于小型肖像熊貓圖像，否則為大型橫向圖像。
例子
以下屏幕截圖顯示了在寬且窄的屏幕顯示上，正確標記后，啟動頁面應(yīng)該是什么樣子。
0px auto; width:700px;">
0px auto; width:320px;">
評定
如果您作為有組織課程的一部分參加此評估，您應(yīng)該能夠?qū)⒛墓ぷ鹘唤o您的老師/導(dǎo)師進行標記。 如果您是自學(xué)習(xí)的，那么您可以輕松地通過 dev-mdc 郵件列表，或者在 #mdn IRC頻道中。 org / IRC"class ="external"> Mozilla IRC 。 嘗試練習(xí)第一 - 沒有什么可以通過作弊獲得！
更多建議：