5 Март 2012

Создание сайта на WordPress. Часть 2

Семантическая верстка для WordPress

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

Решение верстать макет в соответствии стандартам HTML5 делает возможным применение семантических тегов, выделяющих тот или иной блок сайта.

Познакомимся с яркими представителями семантических HTML-элементов:

<header> — блок, применяемый для выделения шапки сайта.

<article> — блок, применяемый для верстки основного содержимого. В него мы будем заворачивать заголовок и текст поста блога.

<footer> — очевидно, что назначением данного блока является выделение подвала.

Это далеко не все семантические элементы. По мере необходимости мы будем использовать и другие. А сейчас, заинтересовавшимся предлагаю посмотреть видео доклада Вадима Макеева о верстке со смыслом.

С семантическими элементами можно работать точно также как и с обычным блоком <div>, за исключением одного НО: в IE, версии ниже 9, стили к семантическим элементам не применяются.

Для устранения описанного НО я использую JavaScript-файл, скачанный с Яндекса.

Использовав условный комментарий я заставлю старые версии IE применять стили к семантическим элементам: для IE, версии меньше 9, содержимое комментария будет интерпретировано как подключение файла html5.js.

<!--[if lt IE 9]>
    <script src="/js/html5.js"></script>
<![endif]-->

В верстке мы стали активно применять внешний (margin) и внутренний (padding) отступы. Для более детального осмысления работы с данными CSS-свойствами не забудьте заглянуть на htmlbook: margin и padding.

В видеоуроке я использовал свойство CSS 3 border-radius для закругления углов футера. Для совместимости со старыми версиями браузеров (Chrome до версии 4.0, Safari до версии 5.0, iOS), на ряду с border-radius применяется нестандартное свойство -webkit-border-radius. Для FireFox версии ниже четвертой — -moz-border-radius. Я очень хочу верить в светлое будущее, соответствующее стандартам, и в видеоуроке сознательно умолчал о данном нестандартном приеме. По крайней мере, все мои браузеры послушно закруглили углы безо всякого нестандартного мракобесия.

Перед верстальщиком частенько встает задача сохранения изображения в наиболее подходящий формат. О выборе форматов изображения я писал здесь.

Видеоурок

Скачать видеоурок (44.5 МБ, *.wmv).

Скачать исходники темы и JavaScript от Яндекса (11.9 кБ, *.zip).

← Предыдущая публикация курса

С уважением, Андрей Морковин.

MAXCACHE: 0.86MB/0.00036 sec