Как было сказано в предыдущей статье при создании шаблона мы будем использовать блочную верстку при помощи тегов <DIV>.

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

Схематическая блоковая разметка шаблона

Блок «logo»

В этом блоке будет выводиться логотип сайта. Блок будет иметь фиксированные размеры: ширина 600px, высота 60рх. (исходим из того что ширина шаблона 950рх) и не сворачиваться.

Блок «user1»

Блок предназначен для вывода модуля поиска по сайту. Он будет иметь фиксированные размеры: ширина 350рх, высота 60рх и не сворачиваться.

Блок «user2»

Блок предназначен для вывода горизонтального меню сайта. Он будет иметь  ширину 950рх, а высота будет зависеть от высоты модуля меню, который будет выводиться в этой позиции. Если в этом блоке не будет выводится горизонтальное меню, то блок будет сворачиваться.

Блок «header»

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

Блок будет иметь ширину 100%, т.е. 950рх, а высоту в зависимости от того, что в нем будет располагаться. Да и сделаем так, чтобы блок сворачивался, когда в нем ничего не выводится.

Блок «user3»

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

Блок left и right

Эти блоки предназначены для вывода различных модулей. Зафиксируем у них только ширину 200рх, а высота будет меняться в зависимости от контента.

Если в позициях «left » или  «right» не будет выведено ни одного модуля, то блоки будут сворачиваются и станут невидимыми. Таким образом, можно сделать сайт с двумя боковыми колонками, одной или вообще без колонок.

Блок content

Этот блок предназначен для вывода основного контента сайта – статей и материалов.  Этот блок самый большой. Все материалы, а также компоненты сайта, выводятся в него автоматически, без вашего участия. Ширина этого блока будет 550рх при двух включенных колонках (950-200-200), 750px (950-200) если опубликована только одна колонка и 950рх, если обе колонки скрыты.

Блок footer

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

Вот такие наши планы. На следующем уроке начнем потихоньку кропать код самого главного файла шаблона index.php.