Mozilla 启动页面
在此评估中，我们将测试你对本模块文章中讨论的一些技术的了解，让你将一些图片和视频添加到有关 Mozilla 的时髦启动页面！
¥In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!
| 先决条件： | 在尝试进行此评估之前，你应该已经阅读了本模块中的所有文章。 |
|---|---|
| 目标： | 测试有关在网页、框架和 HTML 响应图片技术中嵌入图片和视频的知识。 |
初始点
¥Starting point
要开始此评估，你需要获取 HTML 以及 GitHub 上 mdn-splash-page-start 目录中可用的所有图片。将 index.html 的内容保存在本地驱动器上新目录中名为 index.html 的文件中。然后将 pattern.png 保存在同一目录中（右键单击图片可以选择保存它。）
¥To start off this assessment, you need to grab the HTML and all the images available in the mdn-splash-page-start directory on GitHub. Save the contents of index.html in a file called index.html on your local drive, in a new directory. Then save pattern.png in the same directory (right click on the image to get an option to save it.)
访问 originals 目录下的不同图片并以同样的方式保存；你现在需要将它们保存在不同的目录中，因为在准备使用它们之前，你需要使用图形编辑器来操作（其中一些）它们。
¥Access the different images in the originals directory and save them in the same way; you'll want to save them in a different directory for now, as you'll need to manipulate (some of) them using a graphics editor before they're ready to be used.
或者，你可以使用在线编辑器，例如 CodePen、JSFiddle 或 Glitch。
¥Alternatively, you could use an online editor such as CodePen, JSFiddle, or Glitch.
注意：示例 HTML 文件包含大量 CSS，用于设置页面样式。你不需要接触 CSS，只需接触
<body>元素内的 HTML — 只要插入正确的标记，样式就会使其看起来正确。¥Note: The example HTML file contains quite a lot of CSS, to style the page. You don't need to touch the CSS, just the HTML inside the
<body>element — as long as you insert the correct markup, the styling will make it look correct.如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。
¥If you get stuck, you can reach out to us in one of our communication channels.
工程概要
¥Project brief
在这次评估中，我们向你展示了一个大部分完成的 Mozilla 启动页面，其目的是表达一些关于 Mozilla 所代表的美好而有趣的内容，并提供一些指向更多资源的链接。不幸的是，尚未添加任何图片或视频 - 这是你的工作！你需要添加一些媒体以使页面看起来更漂亮并且更有意义。以下小节详细介绍了你需要执行的操作：
¥In this assessment we are presenting you with a mostly-finished Mozilla splash page, which aims to say something nice and interesting about what Mozilla stands for, and provide some links to further resources. Unfortunately, no images or video have been added yet — this is your job! You need to add some media to make the page look nice and make more sense. The following subsections detail what you need to do:
准备图片
¥Preparing images
使用你最喜欢的图片编辑器，创建 400 像素宽和 120 像素宽版本：
¥Using your favorite image editor, create 400px wide and 120px wide versions of:
firefox_logo-only_RGB.pngfirefox-addons.jpgmozilla-dinosaur-head.png
给它们起一个合理的名字，例如 firefoxlogo400.png 和 firefoxlogo120.png。
¥Call them something sensible, e.g. firefoxlogo400.png and firefoxlogo120.png.
与 mdn.svg 一起，这些图片将成为你链接到 further-info 区域内更多资源的图标。你还将链接到站点标题中的 Firefox 徽标。将所有这些副本保存在与 index.html 相同的目录中。
¥Along with mdn.svg, these images will be your icons to link to further resources, inside the further-info area. You'll also link to the Firefox logo in the site header. Save copies of all these inside the same directory as index.html.
接下来，创建 red-panda.jpg 的 1200 像素宽的横向版本和 600 像素宽的纵向版本，以更多的特写镜头显示熊猫。再次强调，请给它们起一个合理的名称，以便你可以轻松识别它们。将这两个文件的副本保存在与 index.html 相同的目录中。
¥Next, create a 1200px wide landscape version of red-panda.jpg, and a 600px wide portrait version that shows the panda in more of a close up shot. Again, call them something sensible so you can easily identify them. Save a copy of both of these inside the same directory as index.html.
注意：你应该优化 JPG 和 PNG 图片，使其尽可能小，同时看起来还不错。tinypng.com 是一项很棒的服务，可以轻松做到这一点。
¥Note: You should optimize your JPG and PNG images to make them as small as possible, while still looking OK. tinypng.com is a great service for doing this easily.
在标题中添加徽标
将视频添加到主要文章内容
¥Adding a video to the main article content
在 <article> 元素内部（开始标签正下方），嵌入在 https://www.youtube.com/watch?v=ojcNcvb1olg 中找到的 YouTube 视频，使用适当的 YouTube 工具生成代码。视频宽度应为 400 像素。
¥Just inside the <article> element (right below the opening tag), embed the YouTube video found at https://www.youtube.com/watch?v=ojcNcvb1olg, using the appropriate YouTube tools to generate the code. The video should be 400px wide.
将响应式图片添加到更多信息链接
¥Adding responsive images to the further info links
在具有 further-info 类的 <div> 中，你会发现四个 <a> 元素 — 每个元素都链接到一个有趣的 Mozilla 相关页面。要完成此部分，你需要在每个包含适当 src、alt、srcset 和 sizes 属性的元素中插入 <img> 元素。
¥Inside the <div> with the class of further-info you will find four <a> elements — each one linking to an interesting Mozilla-related page. To complete this section you'll need to insert an <img> element inside each one containing appropriate src, alt, srcset and sizes attributes.
在每种情况下（除了一种情况 - 哪一种本质上是响应式的？），我们希望浏览器在视口宽度为 500 像素或更小时提供 120 像素宽的版本，否则提供 400 像素宽的版本。
¥In each case (except one — which one is inherently responsive?) we want the browser to serve the 120px wide version when the viewport width is 500px wide or less, or the 400px wide version otherwise.
确保将正确的图片与正确的链接相匹配！
¥Make sure you match the correct images with the correct links!
注意：要正确测试
srcset/sizes示例，你需要将站点上传到服务器（使用 GitHub 页面 是一个简单且免费的解决方案），然后你可以使用浏览器开发者工具（例如 Firefox）测试它们是否正常工作 网络监控器。¥Note: To properly test the
srcset/sizesexamples, you'll need to upload your site to a server (using GitHub pages is an easy and free solution), then from there you can test whether they are working properly using browser developer tools such as the Firefox Network Monitor.
艺术指导的小熊猫
¥An art directed red panda
在具有 red-panda 类的 <div> 内部，我们想要插入一个 <picture> 元素，如果视口宽度为 600 像素或更小，则该元素将提供小型肖像熊猫图片，否则将提供大型横向图片。
¥Inside the <div> with the class of red-panda, we want to insert a <picture> element that serves the small portrait panda image if the viewport is 600px wide or less, and the large landscape image otherwise.
提示和技巧
¥Hints and tips
- 你可以使用 W3C Nu HTML 检查器 来捕获 HTML 中的错误。
- 你不需要了解任何 CSS 即可进行此评估；你只需要提供的 HTML 文件。CSS 部分已经为你完成。
- 提供的 HTML（包括 CSS 样式）已经为你完成了大部分工作，因此你只需专注于媒体嵌入即可。
示例
¥Example
以下屏幕截图显示了正确标记后的初始页面在宽屏和窄屏显示上的外观。
¥The following screenshots show what the splash page should look like after being correctly marked up, on a wide and narrow screen display.
