[16-01-2009] Джо

Простая верстка сайта блоками div

Вопрос "чем лучше верстать сайты, таблицами ( тег table ) или блоками div?", для большинства вебмастеров, похоже, себя исчерпал. Те огромные преимущества, которые дает верстка блоками div, уже не уничтожаются безобразно-разнообразной интерпретацией разных браузеров. Основные браузеры ( последние версии ) более-менее адекватно и однообразно отрабатывают протокол XHTML 1.0 . Спасибо им, а нам хорошо бы максимально упростить процесс верстки сайта и тратить на нее ( верстку ) поменьше времени.

Если глубоко задуматься, можно сформулировать некие принципы единого подхода к html - css верстке сайтов. Я задумался и вот что получилось:

  • число html тегов, вариантов их использования и комбинаций избыточно велико. Представляется разумным ограничиться основными визуальными элементами web-страниц и реализующими их html тегами;
  • в теге a использовать только атрибуты href, name, title, target со значением "_blank" и rel со значением "nofollow";
  • в теге img использовать только атрибуты src, title и alt;
  • в тегах ul, li, p, strong, span, table, tr атрибутов не использовать, использовать атрибуты id и class только если нельзя этого избежать;
  • в тегах td, th использовать только атрибуты colspan, rowspan, использовать атрибуты id и class только если нельзя этого избежать;
  • в теге form использовать только атрибуты method и action, использовать атрибуты id и class только если нельзя этого избежать;
  • в теге input использовать только атрибуты type, name, id, maxlength, size, value;
  • в теге textarea использовать только атрибуты cols, rows, name;
  • в теге div в случае основных окон ( хедер, футер, 1-4 основные колонки сайта и т. п. оригинальные окна с неповторяющимися параметрами ) использовать атрибут id;
  • в теге div в случае неосновных окон и окон с повторяющимися параметрами либо не использовать атрибуты, либо использовать атрибут class;
  • стили css записывать в виде #header ul li a strong{ ... }, группировать их по вложенности тегов, максимально использовать сокращенную запись.

Следует сказать пару слов об xhtml. Не будет особой беды, если, указать в начале страницы протокол xhtml и использовать нотацию html. Однако, на мой взгляд, и переход на нотацию xhtml труда не представляет. Это всего лишь 2 коротких правила:

  • все теги пишутся строчными буквами;
  • все теги должны быть закрыты.

Одиночные теги в нотации xhtml выглядят так:

<img src="" alt="" />

<br />

Ну вот, короткое изложение теории "структурной верстки" закончено. Начинающим рекомендую заглянуть, к примеру, сюда, сразу станет понятно, какую кучу всего не придется изучать, если следовать моей замечательной теории.

Естественно, теги table, form, визуальные элементы - списки и меню, и последнее правило про css заслуживают более подробного рассмотрения. А стало быть - продолжение следует.

Обсудим?

перейти на обсуждение в форуме

* - обязательно заполнить

Комментарий

*Имя

E-mail

*Код: 

*Текст комментария:

Самые популярные статьи