[X] Помощник

[TimurR Topic Starter]

Для того, чтобы сверстать макет, нам нужно будет сначала разделить макет по блокам, определить в каких элементах они будут располагаться и какие классы и идентификаторы мы им зададим. В перспективе у нас будет натяжка шаблона на 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>.

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

 

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

• header


• main


• section


• article


• aside


• footer


• span


• div


• nav


• ul, ol


• h1-h6


• p


• a

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

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.

Сообщение отредактировал TimurR - 29.3.2015, 23:31