使用CSS样式表创建一个页面是非常重要的技能，因此在这个评估中，你将测试你的能力，思考一个页面如何设计完成的，当构建一个布局时，选择恰当的结构语义。
| 先决条件: | Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure. |
|---|---|
| 目标: | To test knowledge of web page structures, and how to represent a prospective layout design in markup. |
起点
To get this assessment started, you should go and grab the zip file containing all the starting assets. The zip file contains:
- The HTML you need to add structural markup to.
- CSS to style your markup.
- Images that are used on the page.
Create the example on your local computer, or alternatively use a site like JSBin or Thimble to do your assessment.
项目简介
For this project, your task is to take the content for the homepage of a bird watching website and add structural elements to it so it can have a page layout applied to it. It needs to have:
- 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.
You need to add a suitable wrapper for:
- The header
- The navigation menu
- The main content
- The welcome text
- The image sidebar
- The footer
You should also:
- Apply the provided CSS to the page by adding another
<link>element just below the existing one provided at the start.
Hints and tips
- 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.
Example
The following screenshot shows an example of what the homepage might look like after being marked up.
Assessment
If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the Learning Area Discourse thread, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!