Имя:
Пароль:
Выслать пароль?  Регистрация
Google

Учимся работе с графическими редакторами:
Adobe Photoshop,
Adobe Illustrator,
QuarkXpress.

Уроки веб дизайна.

Шаблоны wordpress new

Это надо знать:
статьи по дизайну,
справочная литература.

Может пригодиться:
программы для работы с графикой,
словарь терминов Adobe Photoshop,
кисти для Фотошопа и Иллюстратора,
actions для Фотошопа,
клипарты.

Коммерческие объявления:
Последние статьи:


Создаем аккуратную семантическую верстку

Если вы из тех парней, которые используют тэг <div> для всего чего только можно, эта статья для вас. Она расскажет о том, как писать чистый HTML код, используя семантическую разметку и свести к минимуму использование тега <div>. Вы когда-нибудь редактировали чьи-либо шаблоны? Разве это нагромождение тэгов не сводило вас сума? Написание аккуратных шаблонов будет полезно не только для вас, но и для вашей команды. Это сэкономит вам время, когда вам придется отлаживать и редактировать коды (особенно работая над большими проектами).

1. Убираем ненужные тэги <div>

Я много раз встречал, как люди оборачивают списки меню <form> или <ul>  в тэг <div>. Зачем создавать лишний тэг

, который вам не нужен? Вы  можете получить аналогичный результат, используя правила CSS для этого селектора.

Пример 1:

Следующий пример показывает, каким образом можно опустить тэг <div>  и задать стиль для селектора form.

Пример 2:

Иногда стоит обернуть содержимое в тэг <div>  строго в целях оптимизации пространства. Пример слева показывает, как использовать тэг <div class="sidebox"> для создания пространства между границами боксов. Однако если каждый бокс имеет заголовок (например, <h4>), можно просто задать отступ прямо для селектора h4 и удалить ненужный тэг <div class="sidebox">.

2. Использование семантичесокй разметки

Возьмите за правило всегда использовать семантическую разметку при создании HTML документов (например, <h1> для заголовков, <p> для абзацев текста, и <ul> для элементов списка). Поэтому, даже когда CSS не присутствует или не поддерживается, ваш документ все равно остается понятным.

Пример:

Следующее изображение показывает разницу в обработке между разметкой с использованием тэга <div> и семантической разметкой без поддержки CSS.

3. Минимизация использования тэгов <div>

Вы когда-нибудь сталкивались с этими безобразными шаблонами, состоящими из нагромождения тэгов <div>? Не сводило ли вас это с ума? Вы когда-нибудь пропускали закрывающий тэг </div> или же добавляли лишний открывающий <div>, который портил вам всю разметку? Я уверен, что большинство разработчиков сталкивались с этим не раз. Поэтому вам следует насколько это возможно свести к минимуму использование тэга <div>. Это заметно облегчит процессы отладки и редактирования.

Пример 1:

Вместо использования тэга <div> в навигационной цепочке (т.н. «хлебные крошки»), намного разумнее использовать тэг <p>.

Пример 2:

Следующий пример показывает как, используя CSS, убрать тэги <div>, заменив их одним тэгом <span>. Оба они дают одну и ту же разметку.

4. Форматирование (смещение) вашего кода

Всегда следует форматировать ваш исходный код (т.е. смещать вправо вложенные элементы), чтобы было понятнее и легче читать и редактировать его. Если вы используете Adobe Dreamweaver, вы можете легко отформатировать код, нажав Commands > Apply Source Formatting (из меню приложений).

5. Комментируйте закрывающие тэги </div>

При создании шаблонов для различных платформ (например, тем для Wordpress), шаблон вероятнее всего будет разбит на несколько файлов: index.php, header.php, sidebar.php и footer.php. Следовательно, всегда следует давать комментарии к закрывающим тэгам </div>, чтобы вы не запутались. К примеру, когда я вижу </div><!-- /wrapper -->, я сразу понимаю, что это закрывающий тэг для <div id="wrapper">.

Пример:

Обычно я вставляю комментирующий HTML тэг сразу после закрывающего тэга </div>. Я использую косую черту, чтобы обозначить, что это закрывающий тэг.

Заключение

  • Сведите к минимуму использование тэгов <div>.
  • Тэг <div>  следует использовать только для главных разделов вашего шаблона, таких как: верхний колонтитул, содержимое, боковая панель, нижний колонтитул.
  • Содержимое страницы должно быть выполнено в семантическом HTML, без использования тэгов <div>.
  • Отформатируйте ваш исходный код и поставьте метки на закрывающих тэгах </div>.

 


Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»


Оцените, пожалуйста, эту статью:

  • Currently 5.00/5

Рейтинг: 5.0/5 (голосов: 1)

  Опубликовано: 17 февраля 2010 | Просмотров: 19343 | Страница для печати  

Читать комментарии [16] на форуме.

Оставить комментарий
Ваше имя:

Проверка на человечность:

Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.


  О нас Советы Уроки Карта уроков по Фотошоп Уроки по Adobe Illustrator Клипарты Форум Блог админа Реклама на сайте