Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придется подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.

Что нужно знать: Вам пондобятся навыки из всего курса. Обратите особое внимание на Document and website structure.
Цель:

Проверить знания структуры веб-страницы и ее перевода в разметку.

Отправная точка

Чтобы начать это исследование, вы должны перейти и скачать архив содержаший все начальные активы. Архив содержит:

  • HTML, где вам нужно добавить структурную разметку.
  • CSS для стилизации вашей разметки.
  • Изображения, которые используются на странице.

Создайте пример на вашем локальном компьютере или, альтернативно, используйте сайт, например JSBin или 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.

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.

Советы и подсказки

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

Пример

The following screenshot shows an example of what the homepage might look like after being marked up.

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

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 discussion thread about this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

 

In this module

 

Метки документа и участники

Внесли вклад в эту страницу: Dzhabarovm, thoughtspile
Обновлялась последний раз: Dzhabarovm,