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

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

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

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

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

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

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

Создайте пример на вашем локальном компьютере или, альтернативно, используйте сайт, например JSBin или Thimble для исследования.

Краткое описание проекта

Для этого проекта ваша задача - взять контент для домашней страницы веб-сайта наблюдения за птицами и добавить к нему структурные элементы, чтобы он мог использовать макет страницы. Он должен иметь:

  • Заголовок, охватывающий всю ширину сайта, содержащего основное название страницы, логотип сайта и меню навигации. Заголовок и логотип появляются рядом друг с другом, когда применяется стилизация, и навигация появляется ниже этих двух элементов.
  • Основная область содержимого, содержащая два столбца - основной блок, содержащий текст приветствия, и боковую панель для размещения миниатюр изображений.
  • Нижний колонтитул, содержащий информацию об авторских правах и кредиты.

Вам необходимо добавить подходящую обертку для:

  • Заголовока
  • Меню навигации
  • Основного содержимого
  • Приветственного текста
  • Боковой панели изображения
  • Нижнего колонтитула

Вы также должны:

  • Примените предоставленный CSS к странице, добавив еще один элемент <link> чуть ниже существующего, указанный в начале.

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

  • Используйте W3C HTML validator для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальным, а не полностью необходимым).
  • Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.
  • Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелеными на отображаемой странице.
  • Если вы застряли и не можете предвидеть, какие элементы положить туда, часто помогает вывести простую блок-схему макета страницы и написать на элементах, которые, по вашему мнению, должны обернуть каждый блок.

Пример

Следующий скриншот показывает пример того, как может выглядеть домашняя страница после маркировки.

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

Оценивание

Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на, форум задав тему обсуждения этого упражнения или в IRC-канале #mdn в IRC Mozilla или в IRC-канале #mdn в IRC Mozilla. Сначала попробуйте упражнение - ничего не выиграть от обмана!

 

In this module

 

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

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