Mozilla splash page

先决条件:	在尝试此评估之前，您应该已经完成了多媒体和嵌入模块的其余部分。
目的:	测试在网页，框架和HTML响应式图像技术中嵌入图像和视频的知识。

初始点

要开始进行此评估，您需要获取 mdn-splash-page-start /"class ="external"> gdub上的mdn-splash-page-start 目录。 保存 外部"> index.html 在本地驱动器上的一个名为 index.html 的文件中的新目录中。 然后保存 > pattern.png (右键单击图片以获得保存它的选项)。

访问 外部">原件目录并以相同的方式保存它们; 你现在要将它们保存在不同的目录中，因为你需要在使用图形编辑器之前操作它们中的一些。

工程概要

在本次评估中，我们向您展示了一个大部分已完成的Mozilla初始页面，旨在说明Mozilla所代表的内容，并提供一些指向更多资源的链接。 很抱歉，尚未添加任何图片或视频 - 这是您的工作！ 你需要添加一些媒体，使页面看起来不错，更有意义。 以下小节详细说明了您需要做什么:

准备图像

使用您喜爱的图片编辑器，创建400像素宽和120像素宽的版本:

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

给他们一些明智的，例如。 firefoxlogo400.png 和 firefoxlogo120.png 。

除了 mdn.svg ，这些图片将是您链接到更多资源的图标，位于 further-info 区域中。 您还将链接到网站标题中的firefox徽标。 将所有这些内容的副本保存在与 index.html 相同的目录中。

接下来，创建一个1200px宽的版本的 red-panda.jpg 和一个600px宽的肖像版本，显示更多的近距离拍摄的熊猫。 再次，给他们一些明智的，所以你可以很容易地识别他们。 将这两者的副本保存在与 index.html 相同的目录中。

在标题中添加徽标

在 < header> 元素中，添加 将会嵌入的 < img> 元素 小版本的Firefox标志在标题中。

向主文章内容添加视频

元素(位于 < article> 元素 在开头标签下方)，嵌入在 https://www.youtube.com/ watch？v = ojcNcvb1olg ，使用适当的YouTube工具生成代码。 视频宽度应为400像素。

向其他信息链接添加响应图片

与类别 < div> of further-info 您会发现四个 < a> 元素 - 每个元素都链接到一个有趣的Mozilla相关页面。 要完成此部分，您需要插入 < img> 代码> 元素，每个元素包含适当的 src ， alt > ， srcset 代码>和 大小 属性 。

在每种情况下(除了一个 - 哪一个是固有响应？)，当视口宽度为480像素宽或更小时，我们希望浏览器提供120像素宽版本，否则为400像素宽版本。

确保您使用正确的链接匹配正确的图片！

一个艺术指导红熊猫

与类别 < div> of red-panda ，我们要插入 < picture> 元素，如果视口宽度为600像素或更小，则用于小型肖像熊猫图像，否则为大型横向图像。

例子

以下屏幕截图显示了在宽且窄的屏幕显示上，正确标记后，启动页面应该是什么样子。

0px auto; width:700px;">

0px auto; width:320px;">

评定

如果您作为有组织课程的一部分参加此评估，您应该能够将您的工作交给您的老师/导师进行标记。 如果您是自学习的，那么您可以轻松地通过 dev-mdc 邮件列表，或者在 #mdn IRC频道中。 org / IRC"class ="external"> Mozilla IRC 。 尝试练习第一 - 没有什么可以通过作弊获得！