Владимир Токмаков
5 августа 2006 |
|
В последнее время мне все чаще попадаются сайты, HTML-содержимое которых я бы назвал безликим. Например, встречая конструкции вида <div class=h2></div>
, я не могу логически объяснить их появление. Чем не угодил <h2></h2>
разработчику?
Да, конечно, при современном уровне развития CSS можно обойтись парочкой тегов. Можно даже устроить конкурс на самый куцый HTML у меня вышло 10 тегов для сайта с полной функциональностью. А раз так, то потребность в них все-таки есть. И существуют спецификации, в которых они перечислены. А их осмысленное использование, как минимум, позволит старым браузерам или устройствам, не умеющим работать с CSS, подать информацию в приемлемом виде. Не многие сайты могут похвастаться версиями оформления для КПК или для людей, имеющих ограничения по здоровью.
А что же это даст разработчикам? Скорее всего, CSS-правила станут более компактными. Доступ к элементам через DOM в скриптах также упростится.
Можно еще пофантазировать на счет более интеллектуальных поисковых систем, но это тема для отдельной статьи. Поэтому вернемся к нашим тегам.
Перепробовав множество вариантов использования тех или иных тегов, я выработал устойчивые комбинации, которые позволяют унифицировать создание сайтов и, как следствие, сокращать срок разработки при сохранении уровня качества.
Расскажу о некоторых из них. Начнем с таблиц. Их можно разделить на два типа: макетные и таблицы с данными.
Макетные таблицыИспользуются для графического разнесения информационных блоков.
|
|
|
|
В обоих вариантах нет указания атрибутов cellpadding
и cellspacing
, эти свойства таблицы можно задать в CSS (для версии без CSS их значения по умолчанию достаточно малы, ими можно пренебречь). Но если все же хочется их задать явно, то можно применять атрибут cellpadding
, а вот отличное от нуля значение атрибута cellspacing
использовать не стоит (для IE изменить его с помощью CSS не удастся).
Тем не менее, атрибуты align
, valign
, width
и height
(последние два только для макетной таблицы) рекомендуется оставить, иначе разбивка в версии без CSS может сильно отличаться от задуманной.
Макетная таблица со всеми элементами помечается отдельным классом. Это позволяет создавать версии для отображения на других устройствах вывода (КПК, принтер). Выделение классом внутренних элементов таблицы необходимо для предотвращения появления чрезмерно запутанного кода в CSS.
У таблицы с данными достаточно указать соответствующий класс. Атрибут border
нужен для того, чтобы в версии без CSS у пользователя не возникло вопросов о типе данных, представленных этим элементом.
А как же стандарты W3C? Большинство из этих атрибутов deprecated. Но это не значит, что они ошибочны. И я не вижу ничего криминального в их осмысленном использовании, особенно если все эти свойства будут явно заданы в CSS (причем необязательно с теми же значениями).
НавигацияНавигация это, по сути, список ссылок. Поэтому хочется использовать элемент <ul></ul>
.
|
|
Такого HTML-кода чаще всего вполне достаточно для формирования CSS-правил на любой вкус.
Правило замены текущей ссылки на <b></b>
позволяет нам использовать этот элемент для оформления, а в версии сайта без CSS выделяет его из списка ссылок.
Списки новостей или статей те же списки. Но с одной маленькой особенностью: у элементов такого списка есть нечто общее, а именно дата. Поэтому предлагается следующая HTML-конструкция:
|
|
При необходимости элементам можно добавлять классы: title, summary и т. п.
Текстовые блокиВсе, что можно здесь сказать: не забывайте о наличии в HTML осмысленных текстовых блоков. Используйте их. Элемент параграфа, как минимум, компактнее элемента слоя на 4 символа ;)
От простогоИ в завершении постараюсь выделить основные этапы, на которые я разбиваю верстку.
1. | Не смотрим на дизайн, верстаем блоки информации в порядке их логического расположения (шапка, навигация, контент, футер). |
2. | Доводим верстку до приемлемого отображения. |
3. | Расставляем классы и айдишки (атрибуты class и id ), пишем CSS. |
4. | Добавляем HTML-элементы, которых не хватает для оформления. |
5. | Добиваем CSS. |
6. | Делаем версии стилей для печати и КПК. |
В результате получается примерно следующий код (в том или ином виде вы можете найти его в проектах, в которых я принимал участие):
|
|
Вариант с использованием таблиц:
|
|
© 19952024 Студия Артемия Лебедева
|