Архивы материалов Март 31, 2010

Как укротить блоки

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

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

<body>
<!-- Хэдер в отдельной таблице -->
 <table>
  <tr>
   <td>
    HEADER
   </td>
  </tr>
 </table>
<!--// Хэдер в отдельной таблице -->
<!-- Контент и меню в отдельной таблице -->
 <table>
  <tr>
   <td>
    LEFT MENU
   </td>
   <td>
    CONTENT
   </td>
   <td>
    RIGHT MENU
   </td>
  </tr>
 </table>

Структура HTML. Часть 3: виды вёрстки — табличная и блочная

Этот обзор-статья повествует об актуальных на сегодняшний день видах вёрстки. Здесь можно выделить следующие направления:

  1. Блочная — опора контента, или каркас, формируемый из элементов <div>. (Еще её называют "дивной";)
  2. Табличная — структуру сайта определяют таблицы, строки и столбцы: <table> <thead> <tr> <td>
  3. Комбинированная — симбиоз таблиц и блоков.

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

Структура HTML. Часть 2: секция

В прошлой части мы рассмотрели документа и узнали о предназначении и важности элемента <!DOCTYPE ...>.

В этой статье подробно рассмотрим <head> секцию. Её еще принято называть "головой" документа.

Вспоминаем нашу схемку:head-секция в структуре html документа