翻译正在进行中。

使用CSS样式表创建一个页面是非常重要的技能,因此在这个评估中,你将测试你的能力,思考一个页面如何设计完成的,当构建一个布局时,选择恰当的结构语义。

先决条件: 在尝试本评估前你应该已经学完了其余课程,特别是 Document and website structure.
目标: 检验网页结构知识,以及如何使用 HTML 标记呈现一个预期的布局设计。

起点

开始本测验前,你应该先下载 zip file containing all the starting assets。该 zip 文件包含:

  • 你应该补充结构标记的 HTML 文件。
  • 给标记添加样式的 CSS 文件。
  • 页面中使用的图片。

在你的本地电脑上创建示例,或者也可以使用像 JSBin 或 Thimble 这样的网站来完成你的测验。

项目简介

本项目中,你的任务是得到一个鸟类观察网站的主页内容并给其添加结构化的元素以使其有一个页面布局。它需要:

  • 一个 header 头部,包含网站标题、网站 logo 额导航菜单。标题和 logo 出现在两边,导航栏在以上两项下面。
  • 一个包含两列的 content 主要内容块 — 一个包含欢迎信息的块和一个包含图片缩略图的侧边栏。
  • 一个包含 copyright 网站所有权信息和信用信息的 footer 底部。

你应该为以下内容添加合适的标签:

  • header 头部
  • 导航菜单
  • 主要内容
  • 欢迎语
  • 图片侧边栏
  • 底部

你应该:

  • 在已存在的 link 下面通过添加另一个 <link> 元素将提供的 CSS 文件添加到页面中。

要点和提示

  • 使用W3C HTML validator 来验证你的 HTML;如果它尽可能多的验证,你会得到加分。("googleapis" 一行用于从 Google Fonts 服务引入自定义字体到页面;这个不会被验证,所以不用担心。)
  • 你不需要知道任何 CSS 来做本测验;你只需要将提供的 CSS 通过 HTML 元素添加即可。
  • 提供的 CSS 已经设计好了,所以当正确的结构元素被添加到标记中,就会如给定的页面一样是绿色的。
  • 如果你卡住了并且不能设想添加元素到哪里,画一个简单的页面布局模块图通常很有帮助,然后添加一个你认为可以包裹每个块的元素。

示例

添加标记后的主页的样子的一个可能示例,如以下截图所示:

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

提示

如果你将本测验作为有有组织的课程,你应该将你的工作给你的老师/导师来打分。如果你是自学,你可以很容易地通过在 Learning Area Discourse thread 获得标记帮助,或者在 Mozilla IRC 的 #mdn IRC 频道。首先尝试自己做练习 — 作弊不会有任何收获!

文档标签和贡献者

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