Найдя ошибку - выделите ее и нажмите Ctrl+Enter

Виды вёрстки

12 апреля 2010 г.

Любому сайту, который выглядит сложнее листа формата А4 с текстом, необходим каркас. Разметка, только уже не гипертекста, а элементов страницы. Нечто вроде полок и стеллажей, на которых вы разложите всю свою информацию, текст, картинки и прочие объекты.

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

Вёрстка – процесс формирования страниц (макета) путём компоновки текстовых, графических и прочих элементов.

В сети можно встретить несколько прилагательных, употребляющихся со словом верстка:

  1. Дивная.
  2. Блочная.
  3. Табличная.
  4. Вёрстка фреймами.
  5. Семантическая.

Стоит обратить внимание на блочную (она же дивная - от названия контейнера <div>) и табличную (<table>) верстку. Вёрстка фреймами - это атавизм. В ряде случаев его можно и стоит применять, но в современном сайтостроении этому способу отводят место в музее. Семантическая (по моему скромному разумению) - это извращенная философия, а никак не практическая реализация вёрстки. Поэтому расскажу я о табличной и блочной верстке исключительно.

У таблицы есть следующие основные конструктивные элементы (есть и второстепенные):

  1. <THEAD> - группа рядов в шапке таблицы.
  2. <TFOOT> - группа рядов в подвале таблицы.
  3. <TBODY> - группы рядов, составляющих тело таблицы.
  4. <CAPTION> - заголовок таблицы.
  5. <COL> - столбец таблицы.
  6. <COLGROUP> - группа столбцов.
  7. <TR> - ряд ячеек таблицы.
  8. <TH> - ячейка заголовка столбца.
  9. <TD> - ячейка таблицы.

Каркас из таблицы можно построить, например, следующий:

t h e a d
t f o o t
t b o d y
сайдбар
t b o d y
контент

Код этого примера:

<table style="width:70%; margin:20px auto; border:2px solid #FF4500;">
  <thead>
    <tr>
      <td colspan="2" style="background:gold; height:80px;">
        <b>t h e a d</b>
      </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2" style="background:gold; height:20px;">
        <b>t f o o t</b>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td width="20%" height="300px" style="background:white;text-align:left;" valign="top">
        t b o d y<br>сайдбар
      </td>
      <td width="80%" style="background:#FFF4BF;text-align:center;" valign="top">
        t b o d y<br>контент
      </td>
    </tr>
  </tbody>
</table>

<tfoot> должен следовать за <thead> и лишь потом идет <tbody>, потому что обозреватель сначала рассчитывает размер верхнего и нижнего блока сайта, а все оставшееся пространство идет под контейнер <tbody>. Шапка и подвал присутствуют в таблице в единственном экземпляре, тел может быть сколько угодно. Подробности по атрибутам и значениям смотрите в спецификации.

Официальная спецификация

Перевод Пирамидина А.

Спецификация HTML 4 (W3C)

Спецификация HTML 4 (перевод)

Блочная (div'ная) вёрстка

Теперь поговорим о блочной верстке. С блоками все немного сложнее, поскольку каждый из них по отдельности является независимым объектом, а не частью чего-то более глобального, как ячейки таблицы. Поэтому новичку с блоками придётся чуть потруднее, т.к. каждый из них придётся позиционировать и настраивать при помощи css-стилей.

Блок запросто может наложиться на соседний, спихнуть соседа по странице вниз или за пределы экрана. Поэтому при блочной вёрстке следует быть куда более внимательным к любой мелочи, нежели при табличной. Один забытый пиксель (рамки, отступы, различная трактовка обозревателями и прочее) может обернуться катастрофой.

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

Элементы div и span в сочетании с атрибутами id и class предоставляют общий механизм для добавления структуры к документу. Эти элементы определяют содержимое как инлайн (span) или уровня блока (div), но не навязывают других идиом представления содержимого.

Спецификация HTML 4.01 в переводе Пирамидина A.

Ниже я приведу пример использования блочной верстки, повторив табличный пример:

h e a d e r
div
сайдбар
div
контент
f o o t e r

Код этого примера:

<div style="width:70%; margin:20px auto; border:2px solid #FF4500;">
  <div style="background:gold; height:80px; padding:5px;">
    <b>h e a d e r</b>
  </div>
  <div style="width:20%; height:300px; background:white; 
              text-align:left; float:left; padding:5px;">
    div<br>сайдбар
  </div>
  <div style="height:300px; background:#FFF4BF; text-align:center;  padding:5px;">
    div<br>контент
  </div>
  <div style="background:gold; height:20px; padding:5px;">
    <b>f o o t e r</b>
  </div>
</div>

Отмечу, что и блочную и табличную верстку применять целесообразно и комбинировать в том числе. Главное, чтобы это было целесообразно. Но блоки всё-таки гибче и дают больше возможностей. Поэтому когда мне нужно использовать в вёрстке те преимущества, которые имеют таблицы перед блоками, я просто использую для блоков свойство

div { display:table; }

Ознакомьтесь с этим разделом спецификации CSS:

Перечень css-свойств:

Спецификация CSS (W3C)

Спецификация CSS (перевод)

В заключение отмечу, что собственных атрибутов в спецификации 4-ой версии (кроме id и class) блоки не имеют. Всё управление блоками осуществляется через css-свойства. Посмотреть их можно опять же в спецификации:

Перечень css-свойств:

Спецификация CSS (W3C)

Спецификация CSS (перевод)

Если материалы сайта оказались для вас полезными, можете поддержать дальнейшее развитие ресурса, оказав ему (и мне ) моральную и материальную поддержку.

Поддержи Nevor.ru

руб.
Оставьте комментарий
Ник-нейм*:
Подписаться на комментарии (впишите e-mail):

Введите код с картинки:
* — Поля, обязательные для заполнения
Похожие статьи
оптимизация кода

В процессе написания кода невозможно обнаружить все ошибки и исправить их. Написание кода, особенно в больших объёмах, дело монотонное, в чём-то нудное и часто повторяющееся, поэтому глаз замыливается. Поиск и исправление ошибок является лично для меня отдельной финишной процедурой. Кроме явных ошибок часто всплывают нелогичные участки кода, которые тоже приходится переписывать, упрощать и упразднять.

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

20 февраля 2010 г.

Яндекс.Метрика

Мониторинг доступности сайта Host-tracker.com