Для того, чтобы сверстать макет, нам нужно будет сначала разделить макет по блокам, определить в каких элементах они будут располагаться и какие классы и идентификаторы мы им зададим. В перспективе у нас будет натяжка шаблона на WordPress, а WordPress использует некоторые свои классы и идентификаторы, которые можно сразу использовать, но в большинстве случаев можно использовать и свои классы с идентификаторами. Помимо классов, определим еще и основные HTML теги, так как сейчас очень модно использовать валидную верстку и новые теги в HTML5.
Какие теги мы будем использовать? Если взглянуть на шаблон, то визуально его можно разделить на пять основных блоков.
- Шапка сайта - так же именуется как header, мы будем заключать ее в одноименный тег <header></header>. В шапке сайта в зависимости от макета могут располагаться различные элементы, такие как меню, поиск, формы регистрации и т.д. Для некоторых элементов опять же отведены специальные теги. Например тег <nav></nav> для меню.
- Блок контента - в этом блоке выводится основная информация, в случае с блогом, то это будут статьи. Тут есть интересная иерархия тегов. Весь основной контент обертывается в тег <main role="main"></main> (атрибут role="main" по легенде существуют для поисковых системы ибо с ним они лучше определяют, что в этом теге основной контент сайта) в свою очередь внутри этого тега должен быть тег <section></section>, а в нем один заголовок <H1></H1>, ниже уже выводятся превью статей.
- Превью статей - в свою очередь должны быть обернуты в специальный тег <article></article>. Более подробно и наглядно мы разберемся во время верстки макета.
- Сайдбар сайта - боковая колонка в нашем шаблоне, в ней выводятся виджеты в WordPress, внутри которых можно выводить какую угодно информацию. В HTML5 сайдбар обертывается в специальный тег <aside></aside>. Каждый виджет имеет заголовок и многие разработчики обертывают его в теги H4-H5, посоветовавшись с несколькими сеошниками, выяснилось, что лучше не использовать там эти теги, поэтому для заголовков виджетов мы с вами будем использовать тег <span></span>.
- Подвал сайта - известный так же как 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