-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
zh-cn: revise the translation of "splash page" (#19919)
Co-authored-by: A1lo <yin199909@aliyun.com> Co-authored-by: Hoarfroster <hoarfroster@outlook.com>
- Loading branch information
3 people
authored
May 4, 2024
1 parent
8fc5e7e
commit c28ed50
Showing
1 changed file
with
35 additions
and
32 deletions.
There are no files selected for viewing
67 changes: 35 additions & 32 deletions
67
files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,94 +1,97 @@ | ||
| --- | ||
| title: Mozilla 醒目页面 | ||
| title: Mozilla 欢迎页面 | ||
| slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page | ||
| l10n: | ||
| sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7 | ||
| --- | ||
|
|
||
| {{LearnSidebar}}{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} | ||
|
|
||
| 在这个测验中，我们将测试你对于本模块文章所讨论的技术的掌握程度，让你将一些有关于 Mozilla 的图片和视频添加到一个漂亮的页面上！ | ||
| 在本测验中，我们将测试你对于本模块文章所介绍的技术的掌握程度。你需要将一些有关于 Mozilla 的图片和视频添加到一个漂亮的页面上！ | ||
|
|
||
| <table class="learn-box standard-table"> | ||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <th scope="row">前提：</th> | ||
| <td> | ||
| 在开始这个测验之前，你应该了解了 | ||
| <a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding" | ||
| >多媒体与嵌入</a | ||
| > | ||
| 模块的其他文章。 | ||
| 在开始这个测验之前，你应该已经学过本模块的其他文章。 | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th scope="row">目标：</th> | ||
| <td> | ||
| 测试这些知识的掌握程度：在页面中嵌入图片和视频，框架，和 HTML | ||
| 响应式图片技术。 | ||
| 测试对这些知识的掌握程度：在页面中嵌入图片和视频、框架，以及 HTML 响应式图片技术。 | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| ## 起点 | ||
|
|
||
| 为了开始这次测验，你需要从 [mdn-splash-page-start](https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start) 这个 GitHub 目录下下载 HTML 和图片。保存在你本地设备上。 | ||
| 要开始本测试，你需要获取 [mdn-splash-page-start](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/mdn-splash-page-start) GitHub 目录中的 HTML 文件和所有可用的图片。将 [index.html](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/mdn-splash-page-start/index.html) 的内容保存在本地磁盘上的一个名为 `index.html` 的文件中，并且将其放在一个新目录中。然后将 [pattern.png](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) 保存在同一目录中（右键单击图像后选择保存选项）。 | ||
|
|
||
| 访问 [originals](https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) 文件夹中不同的图片文件，然后用同样的方法将它们下载到本地。现在，你需要将这些图片文件保存到不同的目录下，因为在这些图片准备好被使用之前，你需要使用图像编辑器来处理这些图片。 | ||
| 以同样的方式访问 [originals](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/mdn-splash-page-start/originals) 目录中的多个图片，并将它们保存下来；你需要将它们保存在不同的目录中，因为你需要在使用之前使用图形编辑器对其中一些图片进行处理。 | ||
|
|
||
| > **备注：** 这个示例的 HTML 文件包含一些页面的 CSS 样式。你不需要去碰 CSS 的内容，而只是 {{htmlelement("body")}} 元素中的 HTML 部分，只要你插入了正确的标记，样式就会正确显示。 | ||
| 或者，你可以使用在线编辑器，如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Glitch](https://glitch.com/)。 | ||
|
|
||
| > **备注：** 示例 HTML 文件包含大量 CSS，用于为页面设置样式。你不需要修改 CSS，只需修改 {{htmlelement("body")}} 元素内的 HTML 即可。只要插入正确的标记，样式就会使其显示正确。 | ||
| > | ||
| > 如果你遇到困难，可以在我们的[沟通渠道](/zh-CN/docs/MDN/Community/Communication_channels)中联系我们。 | ||
| ## 项目概要 | ||
|
|
||
| 在这个测验中，我们为你呈现了一个接近完成了的 Mozilla 醒目页面，旨在说明一些关于 Mozilla 的有趣的事情，以及提供一些更一步的资源链接。但目前还没有添加任何视频或图片，这份工作就交给你了！你需要添加一些图片、视频等多媒体元素，好让页面变得更漂亮和更有意义。下一小节详细描述了你需要做的工作： | ||
| 在本测试中，我们为你呈现了一个基本完成的 Mozilla 欢迎页面，其旨在积极有趣地描绘 Mozilla 的价值观，同时提供一些更进一步的资源的链接。不幸的是，页面上还没有添加任何图片或视频，这就是你要完成的任务！你需要添加一些媒体元素，使页面更加美观且更容易理解。下面的小节详细说明了你需要做的事情： | ||
|
|
||
| ### 准备图片 | ||
|
|
||
| 使用你最爱的图片编辑器，创建下面几张图片的 400px 宽的版本和 120px 宽的版本： | ||
| 使用你最爱的图片编辑器，创建下面几张图片的 400px 宽和 120px 宽的版本： | ||
|
|
||
| - `firefox_logo-only_RGB.png` | ||
| - `firefox-addons.jpg` | ||
| - `mozilla-dinosaur-head.png` | ||
|
|
||
| 给它们取个有意义的名字，例如`firefoxlogo400.png` 和`firefoxlogo120.png`。 | ||
| 给它们取些有意义的名字，例如 `firefoxlogo400.png` 和 `firefoxlogo120.png`。 | ||
|
|
||
| 这些图片将和 `mdn.svg` 一起作为`further-info`区内资源链接的图标和网站页眉的火狐图标。将这些图片副本保存在与 `index.html`文件的同一个目录下。 | ||
| 这些图片将与 `mdn.svg` 一起，作为链接到其他资源的图标，放在 `further-info` 区域内。你还需要在站点头部中链接 Firefox 标志。你应将所有这些图片的副本保存在与 `index.html` 相同的目录中。 | ||
|
|
||
| 接着，创建一个 1200px 宽的 `red-panda.jpg`风景图片版本，和一个 600px 宽的肖像版本，用来显示更近镜头下的熊猫。同样地，为它们取一个你可以轻松分辨出来的名字。将它们的副本保存在与 `index.html`文件相同的目录下。 | ||
| 接下来，创建一个宽度为 1200 像素的横向版 `red-panda.jpg`，以及一个宽度为 600 像素的纵向版，展示更近距离的熊猫照片。再次，给它们取一个合理的名称，以便你能够轻松识别它们。你应将这两张图片的副本保存在与 `index.html` 相同的目录中。 | ||
|
|
||
| > **备注：** 你应该在看起来还行的前提下尽量优化 JPG 和 PNG 图片的大小，[tinypng.com](https://tinypng.com/)为此提供了很好的服务。 | ||
| > **备注：** 你应该优化你的 JPG 和 PNG 图像，使它们尽可能小，同时保持良好的质量。[tinypng.com](https://tinypng.com/) 是一个很好的在线服务，可以轻松完成这项工作。 | ||
| ### 为 header 添加一个图标 | ||
|
|
||
| 在 {{htmlelement("header")}} 元素中添加一个 {{htmlelement("img")}} 元素，嵌入一个小尺寸版本的火狐图标。 | ||
|
|
||
| ### 为主 article 添加一个视频 | ||
|
|
||
| 就在 {{htmlelement("article")}} 元素中（开放标签下面），嵌入一个 Bilibili 视频（<https://www.bilibili.com/video/BV1rs411d7hC?p=2>），使用 Bilibili 生成嵌入代码。视频的宽度应该是 400px。 | ||
| 在 {{htmlelement("article")}} 元素中（贴靠开放标签下侧），嵌入一个 Bilibili 视频（<https://www.bilibili.com/video/BV1rs411d7hC?p=2>），使用 Bilibili 生成嵌入代码。视频的宽度应该是 400px。 | ||
|
|
||
| ### 为 further info 的链接添加响应式图片 | ||
|
|
||
| 在 `further-info` 类的 {{htmlelement("div")}}里你会看到四个 {{htmlelement("a")}} 元素，每个都指向一个有趣的、关于 Mozilla 的页面。为了完成这一部分，你需要在每个{{htmlelement("a")}} 元素里插入一个 {{htmlelement("img")}} 元素，需要包含合适的 [`src`](/zh-CN/docs/Web/HTML/Element/img#src)、[`alt`](/zh-CN/docs/Web/HTML/Element/img#alt)、[`srcset`](/zh-CN/docs/Web/HTML/Element/img#srcset) 和 [`sizes`](/zh-CN/docs/Web/HTML/Element/img#sizes) 属性。 | ||
| 在 `further-info` 类的 {{htmlelement("div")}} 里你会看到四个 {{htmlelement("a")}} 元素，每个都指向一个有趣的、关于 Mozilla 的页面。为了完成这一部分，你需要在每个 {{htmlelement("a")}} 元素里插入一个 {{htmlelement("img")}} 元素，{{htmlelement("img")}} 元素需要包含合适的 [`src`](/zh-CN/docs/Web/HTML/Element/img#src)、[`alt`](/zh-CN/docs/Web/HTML/Element/img#alt)、[`srcset`](/zh-CN/docs/Web/HTML/Element/img#srcset) 和 [`sizes`](/zh-CN/docs/Web/HTML/Element/img#sizes) 属性。 | ||
|
|
||
| 我们希望每张图片（除了某个本身就是响应式的）在浏览器的视口的宽度小于等于 480px 时使用的 120px 宽的图片，其他情况下选择 400px 的版本。 | ||
| 我们希望每张图片（除了某个本身就是响应式的）在浏览器的视口的宽度小于等于 500px 时使用的 120px 宽的图片，其他情况下选择 400px 宽的版本。 | ||
|
|
||
| 确保正确的链接匹配了正确的图片！ | ||
| 确保每个链接匹配了正确的图片！ | ||
|
|
||
| > **备注：** 为了正确的测试 `srcset`/`sizes` 示例，你需要把你的网站上传到服务器（使用 [Github pages](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages) 是一个简单免费的方法），访问服务器上的网页，你就可以使用浏览器开发者工具来测试它们是否正常工作，如 [响应式图片：有用的开发工具](/zh-CN/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools)中所说 | ||
| > **备注：** 为了正确地测试 `srcset`/`sizes` 示例，你需要把你的网站上传到服务器（使用 [Github pages](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages) 是一个简单免费的方法），之后你就可以使用浏览器开发者工具（如 Firefox [网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)）来测试它们是否正常工作。 | ||
| ### 一张小熊猫的艺术照 | ||
| ### 一张美术设计后的小熊猫照片 | ||
|
|
||
| 在`red-panda`类的{{htmlelement("div")}} 中，我们希望插入一个{{htmlelement("picture")}}元素，在视口宽度小于等于 600px 时使用那张比较小的纵向的熊猫图片，在其他情况下则使用大的横向的图片。 | ||
| 在 `red-panda` 类的 {{htmlelement("div")}} 中，我们希望插入一个 {{htmlelement("picture")}} 元素，并且希望在视口宽度小于等于 600px 时使用那张比较小的纵向的熊猫图片，在其他情况下则使用大的横向的图片。 | ||
|
|
||
| ## 示例 | ||
| ## 提示和技巧 | ||
|
|
||
| 下面的截图展示了在正确标记后，醒目页面在宽屏和窄屏下的样子。（可 [在线查看](https://roy-tian.github.io/learning-area/html/multimedia-and-embedding/mdn-splash-page-finished/)） | ||
| - 你可以使用 [W3C Nu HTML 检查器](https://validator.w3.org/nu/)来检查你的 HTML 代码中的错误。 | ||
| - 要完成此测试，你不需要了解任何 CSS；你只需要我们提供的 HTML 文件。CSS 部分我们已经为你完成。 | ||
| - 我们提供的 HTML（包括 CSS 样式）已经为你完成了大部分工作，因此你只需要专注于媒体嵌入部分。 | ||
|
|
||
|  | ||
| ## 示例 | ||
|
|
||
|  | ||
| 下面的截图展示了在正确标记后，欢迎页面在宽屏和窄屏下的样子。 | ||
|
|
||
| ## 评估 | ||
|  | ||
|
|
||
| 如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。如果你是自学，可以很容易地在 [discussion thread about this exercise](https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679)或[Mozilla IRC](https://wiki.mozilla.org/IRC)的[#mdn](irc://irc.mozilla.org/mdn) IRC 频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！ | ||
|  | ||
|
|
||
| {{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} |