![[Nevor.ru]](../images/logo.jpg){kind=logo}
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Табличная и блочная верстка.редакция 06.06.10 Сайту в большинстве случаев необходим каркас. Нечто вроде полок, на которых вы разложите всю свою информацию, текст, картинки и прочие объекты. В сети можно встретить несколько прилагательных, употребляющихся со словом верстка: "дивная", табличная, семантическая, блочная... стоит обратить внимание на блочную (она же "дивная"(от названия контейнера <DIV>) и табличную (<TABLE>) верстки. Сюда же можно добавить верстку сайта с помощью фреймов. Поскольку фреймы, как я уже неоднократно говорил ранее, разговор отдельный, то затрагивать данный тип верстки я сейчас не буду. Семантическая - это извращенная философия (мое личное мнение) о правильности верстки сайта, а не его практическая реализация. Поэтому расскажу о реализации табличной и блочной верстки на практике. Таблица содержит в себе следующие конструктивные элементы: <THEAD> - группа рядов верха <TFOOT> - группа рядов низа <TBODY> - группы рядов центра <CAPTION> - заголовок таблицы <COL> - столбец таблицы <COLGROUP> - группа столбцов <TR> - ряд ячеек таблицы <TH> - ячейка заголовка столбца <TD> - ячейка таблицы Каркас из таблицы строится следующим образом:  Код этого примера следующий: ...<STYLE>
TD.border {border:solid blue 4px; font-weight:bold;}
TABLE.border {border:solid red 4px}
</STYLE></HEAD>
<BODY>
<TABLE width="100%" height="100%" class="border">
<THEAD><TR>
<TD width="30%" height="100" class="border" align="center">
T H E A D
</TD>
<TD width="40%" class="border" align="center">
T H E A D
</TD>
<TD width="30%" class="border"align="center">
T H E A D
</TD>
</TR></THEAD>
<TFOOT><TR>
<TD width="100%" height="100" class="border"
align="center" colspan="3" >
T F O O T
</TD>
</TR></TFOOT>
<TBODY><TR>
<TD class="border" align="center">
T B O D Y
</TD>
<TD class="border" colspan="3" align="center">
T B O D Y
</TD></TR></TBODY>
</TABLE></BODY></HTML>
А вот что получается в результате выполнения кода:  <TFOOT> должен следовать за <THEAD> и лишь потом идет <TBODY>, потому что обозреватель сначала рассчитывает размер верхнего и нижнего блока сайта, а все оставшееся пространство идет под контейнер <TBODY>. Обратите внимание на атрибут "height" контейнера <TABLE>. Согласно спецификации такого атрибута таблица не имеет, он есть только у ячеек. Однако в ячейках он не срабатывает и высота ячейки привязана к высоте ее содержимого. Поэтому приходится использовать этот несуществующий атрибут, чтобы растянуть таблицу на всю область просмотра. Также обратите внимание на атрибут "colspan". Максимальное число ячеек в этой таблице равно трем (верхний блок). Средний и нижний блоки имеют две и одну ячейку соответственно. Атрибут "colspan", суммирует ширину ячеек. Подробнее об этом и об элементах таблицы читайте тут. Чтобы было более понятнее и нагляднее, я сверстал шаблон сайта специально для этой главы и выполнил его двумя способами - табличной вёрсткой и блочной. Ознакомиться с табличным вариантом примера можете, перейдя по этой ссылке.  table'тный ёжик Блочная (div'ная) вёрстка. Теперь поговорим о блочной верстке. С блоками все немного сложнее, поскольку каждый из них по отдельности является независимым объектом, а не частью. Поэтому блоки "DIV" очень любят "потолкаться", "наезжать" и "разъезжаться". Если не ставить их "впритирку", использовать одинаковые фоновые цвета для фона документа и блока или не использовать фон у блоков вообще, а также не использовать рамки, то проблем почти не возникает. А вот сделать что-то подобное верхнему примеру уже проблематично. По крайней мере новичку. В отличие от ячеек, блоки запросто могут наложиться друг на друга, если им вдруг станет тесно. Или не поделят расстояние в пару пикселей из-за использования рамок и разъедутся вверх-вниз, хотя должны находиться на одной линии. Простое желание пользователя увеличить шрифт для удобства чтения может обернуться катастрофой. Отмечу, что и блочную и табличную верстку применять целесообразно, все зависит от поставленной цели и области их применения. И не слушайте никого, кто говорит что блочная верстка это панацея, а табличная безнадежно устарела. Прочих колдунов, сыплющих заклинаниями семантика и семантическая вообще вышвыривайте в окно. Ниже я приведу пример использования блочной верстки. Как видите, этот каркас уже не растягивается и его габариты зависят от содержимого. Но в целом это уже можно считать рабочей моделью. Код этого примера:
...<STYLE type="text/css">
BODY,HTML {margin:0; padding:0;}
BODY {min-width:750px;}
#main {background:#D27026; margin:0 auto; width:750px;}
#header {background:#99ABE8;}
H1,H2 {margin:0; padding:5px;}
#navigate {background:white; padding:5px;}
#content {background:#00793D; float:left; width:80%;
font-weight:bold; color:white;}
#menu {background:#D27026; float:right;
width:20%; font-weight:bold; color:white;}
#footer {background:#cc9; clear:both;}
</STYLE></HEAD>
<BODY>
<DIV id="main">
<DIV id="header" align="center"><H1>В Е Р Х</H1></DIV>
<DIV id="navigate" align="center">н а в и г а ц и я</DIV>
<DIV id="content" align="center">
<H2>И Н Ф О Р М А Ц И Я</H2>
<P>
***<BR>***<BR>***<BR>
***<BR>***<BR>***<BR>***
</P>
</DIV>
<DIV id="menu" align="center">боковое<BR>меню</DIV>
<DIV id="footer" align="center"><H1>Н И З</H1></DIV>
</DIV> <!-- закрывающий тег <DIV id="main"> -->
</BODY></HTML>
Это не так много, как мне хотелось бы написать, однако достаточно для того, чтобы вы могли создавать сайты сами. Опять же для наглядности можете посмотреть на шаблон "ёжик в тумане", свёрстанный уже при помощи блоков. Оценить удобство и отметить недостатки. Соотнести размеры и удобочитаемость кода обоих вариантов. Вот ссылка на блочный шаблон.  div'ный ёжик Следующая глава - последняя, в ней я поделюсь информацией о том, как искать и исправлять ошибки в коде. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![[наверх]](../images/row.gif)
