Structuring a page of content

初始点

要开始进行此评估，您应该访问 -content-start / assets.zip？raw = true"class ="external">包含所有起始资源的zip文件。 压缩文件包含:

• The HTML you need to add structural markup to.
• CSS to style your markup.
• Images that are used on the page.

在本地计算机上创建示例，或者使用 JSBin 或 //thimble.mozilla.org/"class ="external-icon external"> Thimble 来做你的评估。

工程概要

对于此项目，您的任务是获取鸟类观察网站的主页的内容，并向其添加结构元素，以便可以应用页面布局。 它需要有:

• A header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. The title and logo appear side by side once styling is applied, and the navigation appears below those two items.
• A main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails.
• A footer containing copyright information and credits.

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

• The header
• The navigation menu
• The main content
• The welcome text
• The image sidebar
• The footer

您还应该:

• Apply the provided CSS to the page by adding another <link> element just below the existing one provided at the start.

提示和提示

• Use the W3C HTML validator to validate your HTML; you'll get bonus points if it validates as much as possible (the "googleapis" line is a line used to import custom fonts into the page from the Google Fonts service; it doesn't validate, so don't worry about it.)
• You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.
• The provided CSS is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.
• If you are getting stuck and can't envisage what elements to put where, it often helps to draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.

例子

以下屏幕截图显示了标记后字母可能看起来像的示例。

评定

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