Разметка шаблона

Схематически типовая разметка шаблона выглядит примерно следующим образом:

Чтобы избежать путаницы с названиями (дальше вы поймёте почему), предлагаем применить к ячейкам таблицы название «область» и числовое обозначение. Здесь и далее мы будем рассматривать т.н. «общепринятый» подход, т.е. тот, который чаще всего применяется на сайтах и порталах по уже сложившейся негласной традиции.

РЕКОМЕНДАЦИЯ: если вы не планируете автоматическое изменение размера в зависимости от разрешения экрана и разрабатываете шаблон с фиксированной шириной под ширину экрана 800 точек, то применение области № 4 не желательно из-за того, что она будет «отбирать» полезное пространство экрана у области № 3, куда будет выводится основной контент вашего сайта.

Область 1 « это header (заголовок). Здесь чаще всего располагаются:

• логотип(ы)
• флэш-ролики
• вспомогательное меню
• панель навигации
• поиск по сайту

В областях 2 и 4 располагаются второстепенные модули, выводящие на экран небольшие блоки информации, например:

• основное и контекстное меню
• меню пользователя
• новостные и RSS ленты
• различные информаторы
• календари
• и многое другое

Область 3 - самая большая из всех по площади. Здесь выводится т.н. «контент» — статьи (материалы), содержимое компонентов (например, магазины, музыкальные коллекции или, скажем, форум).

Область 5 - footer. Предназначена для вывода нижнего колонтитула, копирайтов, баннеров.

Разметку областей 1 и 5 можно выполнять как в одной общей таблице, так и в разных. Вот примеры вариантов:

а) общая таблица

<table>
       <tr>
             <td colspan="3"> позиция 1 </td>
       </tr>
       <tr>
             <td width="15%"> позиция 2 </td>
             <td width="70%"> позиция 3 </td>
             <td width="15%"> позиция 4 </td>
       </tr>
       <tr>
             <td colspan="3"> позиция 5 </td>
       </tr>
</table>

и

б) три независимых таблицы

<table>
       <tr>
             <td> позиция 1 </td>
       </tr>
</table>

<table>
       <tr>
             <td width="15%"> позиция 2 </td>
             <td width="70%"> позиция 3 </td>
             <td width="15%"> позиция 4 </td>
       </tr>
</table>

<table>
       <tr>
             <td> позиция 5 </td>
       </tr>
</table>