Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

[Урок 2] Разметка макета по блокам и определение необходимых тегов.

#1 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180
4

Отправлено 29 Март 2015 - 19:21

Для того, чтобы сверстать макет, нам нужно будет сначала разделить макет по блокам, определить в каких элементах они будут располагаться и какие классы и идентификаторы мы им зададим. В перспективе у нас будет натяжка шаблона на WordPress, а WordPress использует некоторые свои классы и идентификаторы, которые можно сразу использовать, но в большинстве случаев можно использовать и свои классы с идентификаторами. Помимо классов, определим еще и основные HTML теги, так как сейчас очень модно использовать валидную верстку и новые теги в HTML5. 

 

Какие теги мы будем использовать? Если взглянуть на шаблон, то визуально его можно разделить на пять основных блоков.

  1. Шапка сайта - так же именуется как header, мы будем заключать ее в одноименный тег <header></header>. В шапке сайта в зависимости от макета могут располагаться различные элементы, такие как меню, поиск, формы регистрации и т.д. Для некоторых элементов опять же отведены специальные теги. Например тег <nav></nav> для меню.
  2. Блок контента - в этом блоке выводится основная информация, в случае с блогом, то это будут статьи. Тут есть интересная иерархия тегов. Весь основной контент обертывается в тег <main role="main"></main> (атрибут role="main" по легенде существуют для поисковых системы ибо с ним они лучше определяют, что в этом теге основной контент сайта) в свою очередь внутри этого тега должен быть тег <section></section>, а в нем один заголовок  <H1></H1>, ниже уже выводятся превью статей.
  3. Превью статей - в свою очередь должны быть обернуты в специальный тег <article></article>. Более подробно и наглядно мы разберемся во время верстки макета.
  4. Сайдбар сайта - боковая колонка в нашем шаблоне, в ней выводятся виджеты в WordPress, внутри которых можно выводить какую угодно информацию. В HTML5 сайдбар обертывается в специальный тег <aside></aside>. Каждый виджет имеет заголовок и многие разработчики обертывают его в теги H4-H5, посоветовавшись с несколькими сеошниками, выяснилось, что лучше не использовать там эти теги, поэтому для заголовков виджетов мы с вами будем использовать тег <span></span>.
  5. Подвал сайта - известный так же как footer. Это нижняя завершающая часть сайта, в которой обычно выводится второстепенная информация. В нашем макете подразумевается вывод еще одного сайдбара с полями для четырех виджетов и маленький блок с копирайтом. Используется одноименный тег <footer></footer>.

Так мы разобрали, что у нас есть что, для наглядности каждый блок выделен в рамочке соответствующего цвета как и название:

f30c61f13b74.jpg

 

Информация по определенным тегам. Будет отлично, если вы не поленитесь и прочитаете на сайте htmlbook про теги, которые определены в этом уроке и еще нескольким другим тегам. А именно:

  • header
  • main
  • section
  • article
  • aside
  • footer
  • span
  • div
  • nav
  • ul, ol
  • h1-h6
  • p
  • a

Закрепив информацию по ним, вы будете проще понимать как с ними можно оперировать. Знания пригодятся особенно в позиционировании, так как блочные и строчные элементы имеют разное поведение на странице. 


 

 

Сообщение отредактировал TimurR: 29 Март 2015 - 22:31

  • 1

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.




Оформление форума – IPBSkins.ru