Разновидности CSS верстки (табличная, блочная), где и как применять

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

Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты. Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки.
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...)  разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.

Следует отметить, что верстка это процесс творческий, не такой конечно как отрисовка макета в фотошоп но, тем не менее, доля творчества в этом есть особенно на начальном этапе, далее с ростом опыта процесс верстки можно механизировать. Качество верстки оценивается по тому, насколько сверстанный сайт отличается от макета.

Виды верстки


Как заявлено в названии верстка бывает блочная или табличная. В блочной верстке элементы сайта структурируются с помощью блоков (div), в табличной верстке обходятся таблицами (table).

Табличная верстка

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

типовая структура сайта

типовая структура сайта

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

<table width="задаем нужную ширину (100% или xxx)">
 <tr>
  <td colspan="2">
   шапка
  </td>
 </tr>
 <tr>
  <td width="задаем ширину контентной части">
   контент
  </td>
  <td>
   сайдбар
  </td>
</tr>
<tr>
 <td colspan="2">
  футер
 </td>
</tr>
</table>

таблице следует задавать конкретную фиксированную ширину, если макет имеет фиксированную ширину или 100%, если макет резиновый, в этом случае таблица будет растягиваться по ширине экрана в зависимости от разрешения монитора.

Достоинства и недостатки табличной верстки:

  • Проста в понимании, не требует более глубоких знаний HTML и CSS (+)
  • Интуитивно понятна при построении, минимум CSS правил (+)
  • Трудно разбираться в HTML коде при более сложной структуре сайта (-)
  • Пока вся таблица не загрузиться она не будет показана на экране (-)
  • Сложный дизайн с перекрытием элементов не реализуем (-)
  • Много лишнего кода (-)

Остановимся поподробнее на 4-ом пункте. Дело в том, что HTML таблицы устроены таким образом, что браузер не может знать заранее как рисовать таблицу с ее содержимым, пока оно незагружено, до тех пор, пока последний рисунок, находящийся в таблице не будет загружен, таблица не будет показана на экране браузера, что может стать причиной ухода пользователей с сайта не дождавшись отображения страницы, поскольку посетитель не видит ничего на экране некоторое время. Создается впечатление будто сайт тормозит, на самом деле браузер ждет пока все элементы таблицы будут загружены.

блочная верстка


Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit).  Если блоку указать свойство float:left, то он будет выровнен по левому краю, а все остальные блоки будут игнорировать его, как будто этого блока нет, за исключение текста, остальные блоки, которым задано это же свойство будут обтекать его справа, на сколько это позволяет ширина экрана или элемента внутри которого они находятся. Следует заметить, что любой элемент можно сделать блочным, заданием ему свойства display:block, изначально только элементы div по умолчанию считаются блочными элементами, для не блочных элементов (span, p) свойство float игнорируется и такие элементы располагаются как обычно последовательно сверху вниз. Чтобы свойство float не игнорировалось необходимо задать элементы свойство display:block.

float:right выровнит блок по правому краю, а все остальные блоки будут игнорировать его, либо обтекать, если им задано это же свойство и если в коде идут подряд два или несколько блоков с указанным свойством, то первым вправо встанет тот блок, который идет первым в коде, остальные обтекают его слева.

Свойство  float:none отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both.  Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.

float:inherit - задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).

Нужны конкретные примеры, чувствую не убедительно, получается.  Давайте создадим простой пример, для начала основу, красный блок с шириной 400 пикс. высотой 350 пикс. и выровним его посередине экрана.

<div style="border:1px solid red; width:400px; height:350px; margin:auto;">
</div>

теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.

<div style="border:1px solid red; width:400px; height:350px; margin:auto;">
  <div style="border:1px solid green; width:100px; height:100px;">
  </div>
  <div style="border:1px solid grey; width:100px; height:120px;">
  </div>
  <div style="border:1px solid blue; width:100px; height:100px;">
  </div>
</div>

Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left, чтобы серый и голубой блоки игнорировали его.

<div style="border:1px solid red; width:400px; height:350px; margin:auto;">
  <div style="border:1px solid green; width:100px; height:100px; float:left;">
  </div>
  <div style="border:1px solid grey; width:100px; height:120px;">
  </div>
  <div style="border:1px solid blue; width:100px; height:100px;">
  </div>
</div>

как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.

<div style="border:1px solid red; width:400px; height:350px; margin:auto;">
  <div style="border:1px solid green; width:100px; height:100px; float:left;">
  </div>
  <div style="border:1px solid grey; width:100px; height:120px; float:left;">
  </div>
  <div style="border:1px solid blue; width:100px; height:100px; float:left;">
  </div>
</div>

Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left, но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both;

<div style="border:1px solid red; width:400px; height:350px; margin:auto;">
  <div style="border:1px solid green; width:100px; height:100px; float:left;">
  </div>
  <div style="border:1px solid grey; width:100px; height:120px; float:left;">
  </div>
  <div style="border:1px solid blue; width:100px; height:100px; clear:both;">
  </div>
</div>

Далее можете поэкспериментировать со свойством float:right;
Давайте воспроизведем типовую структуру сайта при помощи блоков.

<div style="border:1px solid red; width:400px; height:350px; margin:auto;">
  <div style="border:1px solid green; width:398px; height:100px;">
header
  </div>
  <div style="border:1px solid grey; width:198px; height:120px; float:left;">
контент
  </div>
  <div style="border:1px solid blue; width:198px; height:120px; float:left;">
сайдбар
  </div>
  <div style="border:1px solid green; width:398px; height:100px; clear:both;">
foter
  </div>
</div>
header
контент
сайдбар
footer

Вот такая структура получилась, при задании ширины блокам учитывался тот факт, что рамка 1 пикс. увеличивает размеры блока, поэтому размер хедера задан 398 пикс. а не 400 пикс.

Достоинства и недостатки блочной верстки:

  • Меньший вес страницы за счет меньшего кода (+)
  • Реализация сложного дизайна с перекрывающимися блоками (+)
  • Трудно освоить, табличная верстка проще (-)
  • Чаще приходится решать вопросы кроссбраузерности. блоки могут перекрываться при изменении разрешения экрана, масштабировании (-)

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

На этом все дорогие читатели, заходите по-чаще.

Отличный видеоурок по CSS (практикум)


Похожие статьи:
↑ Наверх ↑
  • Комментарии

Прокомментировать

Подписаться, не комментируя