Structuring a page of content

 

构造内容页面以准备使用CSS布局是一项非常重要的技能,因此,在此评估中,将测试您思考页面最终外观的能力,并选择适当的结构语义来构建顶部的布局.

Prerequisites: 在尝试进行此评估之前,您应该已经完成​​了本课程的其余部分,特别着重于文档和网站结构 .
Objective: 测试网页结构的知识,以及如何在标记中表示预期的布局设计.

Starting point

要开始进行此评估,您应该获取包含所有初始资产zip文件 . 压缩文件包含:

  • 您需要向其添加结构标记的HTML.
  • CSS标记样式.
  • 页面上使用的图像.

在本地计算机上创建示例,或者使用诸如CodePenjsFiddleGlitch之类的在线工具来处理任务.

注意 :如果您遇到困难,请向我们寻求帮助-请参阅本页底部的" 评估或其他帮助"部分.

Project brief

对于此项目,您的任务是获取观鸟网站首页的内容,并在其中添加结构元素,以便可以对其应用页面布局. 它需要具有:

  • 跨网站整个宽度的标题,包含页面的主要标题,网站徽标和导航菜单. 应用样式后,标题和徽标会并排显示,并且导航显示在这两个项目的下方.
  • 一个主要内容区域,包含两列-一个主要区域包含欢迎文本,一个侧边栏包含图像缩略图.
  • 包含版权信息和信用的页脚.

您需要为以下项添加合适的包装器:

  • 标头
  • 导航菜单
  • 主要内容
  • 欢迎文字
  • 图像侧栏
  • 页脚

您还应该:

  • 通过在开头提供的现有元素下方添加另一个<link>元素,将提供的CSS应用于页面.

Hints and tips

  • 使用W3C Nu HTML Checker可以捕获HTML,CSS和SVG中意想不到的错误(否则可能会丢失的错误),以便您进行修复.
  • 您无需了解任何CSS即可进行此评估; 您只需要将提供的CSS放在HTML元素内即可.
  • 提供的CSS的设计使得将正确的结构元素添加到标记后,它们将在呈现的页面中显示为绿色.
  • 如果您陷入困境并且无法设想将哪些元素放置在何处,请绘制一个简单的页面布局框图,并写上您认为应该包装每个块的元素. 这非常有帮助.

Example

以下屏幕截图显示了标记后首页的外观示例.

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

Assessment or further help

如果您希望对自己的工作进行评估,或者遇到困难并希望寻求帮助,请执行以下操作:

  1. 将您的工作放入在线共享编辑器中,例如CodePenjsFiddleGlitch .
  2. MDN Discourse论坛"学习"类别中写一篇文章,要求评估和/或帮助. 您的帖子应包括:
    • 具有描述性的标题,例如"为构建内容页面而进行的评估".
    • 有关您已经尝试过的内容以及您希望我们进行的操作的详细信息,例如,如果您遇到困难并需要帮助,或者需要评估.
    • 联机共享编辑器中指向您要评估或需要帮助的示例的链接(如上面的步骤1中所述). 这是进入的好习惯-如果看不到他们的代码,很难帮助有编码问题的人.
    • 指向实际任务或评估页面的链接,因此我们可以找到您需要帮助的问题.

In this module