Structuring a page of content

初始點

要開始進行此評估，您應(yīng)該訪問 -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.

在本地計算機上創(chuàng)建示例，或者使用 JSBin 或 //thimble.mozilla.org/"class ="external-icon external"> Thimble 來做你的評估。

工程概要

對于此項目，您的任務(wù)是獲取鳥類觀察網(wǎng)站的主頁的內(nèi)容，并向其添加結(jié)構(gòu)元素，以便可以應(yīng)用頁面布局。 它需要有:

• 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.

您需要為以下內(nèi)容添加合適的包裝器:

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

您還應(yīng)該:

• 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.

例子

以下屏幕截圖顯示了標記后字母可能看起來像的示例。

評定

如果您作為有組織課程的一部分參加此評估，您應(yīng)該能夠?qū)⒛墓ぷ鹘唤o您的老師/導(dǎo)師進行標記。 如果您是自學(xué)習(xí)的，那么您可以輕松地通過 dev-mdc 郵件列表，或者在 #mdn IRC頻道中。 org / IRC"class ="external"> Mozilla IRC 。 嘗試練習(xí)第一 - 沒有什么可以通過作弊獲得！