Блочная верстка шаблона. Урок 1

Как было сказано в предыдущей статье при создании шаблона мы будем использовать блочную верстку при помощи тегов <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

 

Комментарии 

 
# Владимир 24.07.2013 09:19
А где кнопка "мне нравится"?
Ответить | Ответить с цитатой | Цитировать
 
 
# Alex 14.11.2015 11:45
Не знаю как у Вас, но у меня адблок нашёл аж 17 кнопок "мне нравится" на этой страничке :-)
Ответить | Ответить с цитатой | Цитировать
 
 
# Леонид 27.07.2013 15:09
А как убрать название сайта, в админке изменяется только его название
Ответить | Ответить с цитатой | Цитировать
 
 
# Дмитрий 20.11.2013 11:09
Важно! Имена блоков не должны начинаться с цифры!
Ответить | Ответить с цитатой | Цитировать
 
 
# Анастасия 26.01.2014 22:28
НЕхрена непонятно!
Ответить | Ответить с цитатой | Цитировать
 
 
# Евгений 19.02.2014 21:22
Цитирую Анастасия:
НЕхрена непонятно!

ты НУБ! :lol:
Ответить | Ответить с цитатой | Цитировать
 
 
# Олежо 25.07.2014 23:13
Интересно. Спасибо. Если кто интерессуется как продвигать сайт, заходите на мой сайт http://olezhkin-blog.info/
Ответить | Ответить с цитатой | Цитировать
 
 
# Max 06.05.2014 13:13
:lol: если не понятно, меняй проффесию
Ответить | Ответить с цитатой | Цитировать
 
 
# Евген 21.05.2014 11:45
Цитирую Max:
:lol: если не понятно, меняй проффесию

Причем сразу на президента)))
Ответить | Ответить с цитатой | Цитировать
 
 
# eazy-e 15.03.2014 19:54
Цитирую Евгений:
Цитирую Анастасия:
НЕхрена непонятно!

ты НУБ! :lol:

))
Ответить | Ответить с цитатой | Цитировать
 
 
# renserg 01.11.2014 07:08
Цитирую eazy-e:
Цитирую Евгений:
Цитирую Анастасия:
НЕхрена непонятно!

ты НУБ! :lol:

))

да в натуре
Ответить | Ответить с цитатой | Цитировать
 
 
# renserg 01.11.2014 07:10
а как на счет Dreamweaver?
Ответить | Ответить с цитатой | Цитировать
 
 
# Александр2813 12.03.2016 16:01
Здравствуйте! У меня есть картинка jpg-формата, макет главной страницы. Нужно сделать её шаблоном и установить этот шаблон на главную страницу. Подскажите как это сделать
Ответить | Ответить с цитатой | Цитировать
 
 
# Антон 12.02.2017 03:02
Здравствуйте! А я хочу, чтоб блоки были в моем порядке.. В общем попробую сделать по вашей методике, но с моими размерами и блоками.
Ответить | Ответить с цитатой | Цитировать