path: root/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html

---
title: Mozilla醒目页面
slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
tags:
  - 初学者
  - 响应式
  - 图像
  - 多媒体
  - 嵌入
  - 视频
  - 评估
translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>

<p class="summary">在这个测验中，我们将测试你对于本模块文章所讨论的技术的掌握程度，让你将一些有关于 Mozilla 的图片和视频添加到一个漂亮的页面上！</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">学习本章节的要求:</th>
   <td>在开始这个测验之前，你应该了解了 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding">多媒体与嵌入</a> 模块的其他文章.</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>测试这些知识的掌握程度：在页面中嵌入图片和视频，框架，和 HTML 响应式图片技术。</td>
  </tr>
 </tbody>
</table>

<h2 id="起点">起点</h2>

<p>为了开始这次测验，你需要从 <a href="https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start">mdn-splash-page-start</a> 这个GitHub目录下下载HTML和图片。保存在你本地设备上。</p>

<p>访问 <a href="https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> 文件夹中不同的图片文件，然后用同样的方法将它们下载到本地。现在，你需要将这些图片文件保存到不同的目录下，因为在这些图片准备好被使用之前，你需要使用图像编辑器来处理这些图片.</p>

<div class="note">
<p><strong>注意</strong>: 这个示例的 HTML 文件包含一些页面的 CSS 样式。你不需要去碰 CSS 的内容，而只是 {{htmlelement("body")}} 元素中的 HTML 部分，只要你插入了正确的标记，样式就会正确显示。</p>
</div>

<h2 id="项目概要">项目概要</h2>

<p>在这个测验中，我们为你呈现了一个接近完成了的 Mozilla醒目页面，旨在说明一些关于Mozilla的有趣的事情，以及提供一些更一步的资源链接。但目前还没有添加任何视频或图片，这份工作就交给你了！你需要添加一些图片、视频等多媒体元素，好让页面变得更漂亮和更有意义。下一小节详细描述了你需要做的工作：</p>

<h3 id="准备图片">准备图片</h3>

<p>使用你最爱的图片编辑器，创建下面几张图片的 400px 宽的版本和 120px 宽的版本：</p>

<ul>
 <li><code>firefox_logo-only_RGB.png</code></li>
 <li><code>firefox-addons.jpg</code></li>
 <li><code>mozilla-dinosaur-head.png</code></li>
</ul>

<p>给它们取个有意义的名字，例如<code>firefoxlogo400.png</code> 和<code>firefoxlogo120.png</code>。</p>

<p>这些图片将和 <code>mdn.svg</code> 一起作为<code>further-info</code>区内资源链接的图标和网站页眉的火狐图标。将这些图片副本保存在与 <code>index.html</code>文件的同一个目录下。 </p>

<p>接着，创建一个 1200px 宽的 <code>red-panda.jpg</code>风景图片版本，和一个 600px 宽的肖像版本，用来显示更近镜头下的熊猫. 同样地，为它们取一个你可以轻松分辨出来的名字. 将它们的副本保存在与 <code>index.html</code>文件相同的目录下。</p>

<div class="note">
<p><strong>注意</strong>：你应该在看起来还行的前提下尽量优化 JPG 和 PNG 图片的大小，<a href="https://tinypng.com/">tinypng.com</a>为此提供了很好的服务。</p>
</div>

<h3 id="为_header_添加一个图标">为 header 添加一个图标</h3>

<p>在 {{htmlelement("header")}} 元素中添加一个 {{htmlelement("img")}} 元素，嵌入一个小尺寸版本的火狐图标。</p>

<h3 id="为主_article_添加一个视频">为主 article 添加一个视频</h3>

<p>就在 {{htmlelement("article")}} 元素中（开放标签下面），嵌入一个 Bilibili 视频（<a href="https://www.bilibili.com/video/BV1rs411d7hC?p=2">https://www.bilibili.com/video/BV1rs411d7hC?p=2</a>），使用 Bilibili 生成嵌入代码。视频的宽度应该是 400px。</p>

<h3 id="为_further_info_的链接添加响应式图片">为 further info 的链接添加响应式图片</h3>

<p>在<code>further-info</code>类的 {{htmlelement("div")}}里你会看到四个 {{htmlelement("a")}} 元素，每个都指向一个有趣的、关于 Mozilla 的页面。为了完成这一部分，你需要在每个{{htmlelement("a")}} 元素里插入一个 {{htmlelement("img")}} 元素，需要包含合适的 {{htmlattrxref("src", "img")}}，{{htmlattrxref("alt", "img")}}，{{htmlattrxref("srcset", "img")}} 和 {{htmlattrxref("sizes", "img")}} 属性。</p>

<p>我们希望每张图片（除了某个本身就是响应式的）在浏览器的视口的宽度小于等于480px时使用的120px宽的图片，其他情况下选择400px 的版本.</p>

<p>确保正确的链接匹配了正确的图片！</p>

<div class="note">
<p><strong>注意</strong>: 为了正确的测试 <code>srcset</code>/<code>sizes</code> 示例，你需要把你的网站上传到服务器（使用 <a href="/zh-CN/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> 是一个简单免费的方法），访问服务器上的网页，你就可以使用浏览器开发者工具来测试它们是否正常工作，如 <a href="/zh-CN/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">响应式图片：有用的开发工具</a>中所说</p>
</div>

<h3 id="一张小熊猫的艺术照">一张小熊猫的艺术照</h3>

<p>在<code>red-panda</code>类的{{htmlelement("div")}} 中，我们希望插入一个{{htmlelement("picture")}}元素，在视口宽度小于等于600px时使用那张比较小的纵向的熊猫图片，在其他情况下则使用大的横向的图片。</p>

<h2 id="示例">示例</h2>

<p>下面的截图展示了在正确标记后，醒目页面在宽屏和窄屏下的样子。（可 <a class="external external-icon" href="https://roy-tian.github.io/learning-area/html/multimedia-and-embedding/mdn-splash-page-finished/">在线查看</a>）</p>

<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>

<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>

<h2 id="评估">评估</h2>

<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">discussion thread about this exercise</a>或<a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p>

<h2 id="在这个模块中">在这个模块中</h2>

<ul>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML中的图片</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">音视频内容</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies" rel="nofollow">从&lt;object&gt; 到&lt;iframe&gt; — 其他嵌入技术</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">给网页添加矢量图</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla醒目页面</a></li>
</ul>

<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>