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