Блочная верстка шаблона. Урок 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-формата, макет главной страницы. Нужно сделать её шаблоном и установить этот шаблон на главную страницу. Подскажите как это сделать
Ответить | Ответить с цитатой | Цитировать
 

Интересные статьи

Как сделать шаблон с нуля для Joomla 2.5 и 3.0

Как сделать шаблон с нуля для Joomla 2.5 и 3.0

На горизонте замаячила Joomla 3.0. За разработчиками этого движка трудно угнаться, но мы попытаемся. Будем разбираться как сделать шаблон для Joomla 2.5 и 3.0 с нуля. Для тех кто смутно догадывается ч...

Подробнее

Свой бизнес в Интернете или как заработать на видео уроках

Свой бизнес в Интернете или как заработать на видео уроках

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

Подробнее

Как сделать интернет - магазин

Обсуждая создание собственного бизнеса в Интернете, невозможно обойти тему интернет - магазинов. Собственное дело – мечта, пожалуй, каждого молодого человека в нашей стране, никто не хочет работать на...

Подробнее

Как заработать на Youtube

Как заработать на Youtube

В настоящее время YouTube является самой крутой интернет - площадкой для бизнеса. Изначально сервис YouTube создавался как сайт, на который пользователи могли загружать различные видео-ролики  дл...

Подробнее
Каталог@Mail.ru - каталог ресурсов интернет