在这个测验中, 我们将测试你对于本模块文章所讨论的技术的掌握程序, 让你将一些有关于 Mozilla 的图片和视频添加到一个漂亮的页面上!

学习本章节的要求: 在开始这个测验之前,你应该了解了 Multimedia and embedding 模块的其他文章.
目的: 测试这些知识的掌握程度:在页面中嵌入图片和视频, 框架, 和 HTML 响应式图片技术.

起点

为了开始这次测验, 你需要在这个 mdn-splash-page-start github 目录中获取 HTML 和图片.在你本地的设备上新建一个 index.html 文件,并将  index.html 内容复制到这个文件中。 然后把 pattern.png 保存在同一路径 (右键点击这个图片文件,然后将它另存为到本地目录下.)

访问 originals 文件夹中不同的图片文件,然后用同样的方法将它们保存; 现在,你需要将这些图片文件与刚才的那张图片保存在不同的目录,以做区分。因为在这些图片准备好被使用之前,你需要使用图像编辑器来操作这些 (一些) 图片.

注意: 这个示例的 HTML 文件包含一些页面的 CSS 样式. 你不需要去碰 CSS 的内容, 而只是 <body> 元素中的 HTML 部分,只要你插入了正确的标记,样式就会正确显示。

项目概要

在这个测验中,我们为你呈现了一个大部分已经完成了的 Mozilla 启动页面, 目标是体现一些有趣和有意义的东西,关于 Mozilla 的代表事物, 以及提供一些更一步的资源的链接, 但是, 目前还没有添加任何视频和图片,这份工作就交给你了! 你需要添加一些图片、视频等多媒体元素,好让页面变得更好和更有意义. 下面的小节详细描述了你需要做的工作:

准备图片

使用你最爱的图片编辑器, 创建这些图片的 400px 宽的版本和 120px 宽的版本:

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

给它们分别取一个容易理解的名字, e.g. firefoxlogo400.png and firefoxlogo120.png.

随着 mdn.svg, 这些图片将会称为你的图标,用来链接更进一步的资源, 在 further-info 的区域. 你还将链接到站点标题中的火狐 Logo. 将这些内容的副本保存在与 index.html文件的同一个目录下。 

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

注意: 你应该优化你的 JPG 和 PNG 图片,使它们有好的视觉效果的前提下,文件大小尽量地小, tinypng.com提供了非常好的服务可以实现这一效果。

<header> 元素中, 添加一个 <img> 元素,用来嵌入一个小尺寸版本的 火狐 Logo .

为主内容中的 article 添加一个视频

就在 <article> 元素中 (在开始标签的正下方), 嵌入一个 YouTube 视频, 可以在 https://www.youtube.com/watch?v=ojcNcvb1olg 中获得, 使用合适 YouTube 来生成代码. 视频的宽度应该是 400px .

为进一步内容的链接添加响应式图片

<div> 且 class 包含 further-info 你会找到 4 个 <a> 元素,每一个链接都指向一个有关于 Mozilla 的有趣页面. 为了完成这一部分,你需要插入一个 <img> 元素,每个 <img> 元素都包含正确的 src, alt, srcsetsizes 属性.

在每个 <img>  元素中(除了一个,哪一个本来就是响应式的?) 当浏览器的视图窗口的宽度是 480px 或者更小的时候,我们希望浏览器提供一个 120px 的版本,其他情况下都提供一个 400px 的版本.

再确认一下你是否使用了正确的链接了正确的图片!

注意: 为了正确的测试 srcset/sizes 示例, 你需要把你的网站上传到服务器 (使用 Github pages 是一个简单免费的方法), 然后再那里,你可以使用浏览器开发者工具来测试它们是否正常工作, 比如 Responsive images: useful developer tools.

关于红色熊猫的艺术

<div> 中,class 包含 red-panda, 我们想插入一个 <picture> 元素来提供熊猫的肖像画,如果浏览器的视图窗口大小是 600px 或者更小,我们就提供小尺寸的图片,其他情况下我们我们就提供大尺寸的图片.

示例

下面的截图演示了在正确工作后,页面应该看起来的样子, 在宽屏上的显示,以及在小屏幕上的显示.

A wide shot of our example splash page

A narrow shot of our example splash page

评定

如果您将此评估作为有组织的课程的一部分,您应该能够将您的工作交给您的老师/导师进行标记。 如果您是自学习的,那么您可以通过询问  Learning Area Discourse thread, 或在 #mdn 的IRC频道 Mozilla IRC 中轻松获得标记指南. 首先尝试练习 - 作弊没有什么可以获得的!

文档标签和贡献者

 此页面的贡献者: nbhaohao
 最后编辑者: nbhaohao,