При создании шаблона Myblog была использована блочная верстка или блоковая модель CSS, которая позволяет не только создавать  блоки при помощи тега <DIV>, но и точно позиционировать их на экране и задавать стиль оформления блока при помощи таблиц стилей CSS. Созданный подобным образом код страниц, значительно меньше по объему и логичнее по своей структуре, его проще читать и редактировать. Сейчас рулит блочная верстка, таблицы уже в прошлом.

Давайте разберем, из каких блоков состоит шаблон.

Блоковая разметка шаблона

Блок page

Черным цветом выделена страница сайта, в которой и располагается все содержимое. DIV или блок страницы называется page. Станица имеет фиксированную ширину 950px.

Блоки art_top и art_bot

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

Блок header

Блок предназначен для вывода графического файла шапки сайта header.png, который находится в папке image шаблона. Файл будет выведен автоматически, т.к. его размещение прописано в таблице стилей CSS файла template.css.

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

Блок имеет фиксированную высоту и не сворачивается.

Блок topmenu

Блок синего цвета предназначен для вывода горизонтального меню сайта. Создавая горизонтального меню, вы должны дать ему название topmenu . Далее, при создании модуля горизонтального меню mod_mainmenu, вы должны определить ему позицию «topmenu», выбрать название меню - «topmenu», и задать стиль меню «список». Также необходимо задать дополнительные параметры модуля – в блоке «Суффикс класса модуля» напишите суффикс - _topmenu.

Это обязательно!!! Запомните, этот суффикс используется только для горизонтального меню!

Блок имеет фиксированную высоту и в нем в качестве background используется графический файл, поэтому блок не сворачивается, даже если вы не захотите выводить меню в позиции «topmenu» .

Блок bloknot

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

Так, как блокнот должен растягиваться в высоту, в соответствием с помещенным в него контентом, то верстка блокнота осуществляется при помощи трех разных блоков bloknot_top, bloknot_bg, bloknot_bot, которые находятся внутри блока  bloknot.

Блок bloknot_top

Этот блок обозначен зеленым цветом. В нем выводится графический файл верха блокнота bloknot_top.png.

Блок имеет фиксированную высоту 50px и не сворачивается.

На фоне этого блока могут размещаться блок навигации breadcrumbs и блок поиска по сайту search.

Блок bloknot_bg

Этот блок является листом нашего блокнота. Лист должен растягиваться в высоту, поэтому background блока будет формироваться многократным повторением графического файла bloknot_bg.png.

Блок bloknot_bot

Этот блок обозначен светло – зеленым цветом. В нем выводится графический файл низа блокнота bloknot_bot.png.

Блок имеет фиксированную высоту 50px и не сворачивается.

На фоне этого блока может быть размещено нижнее малое меню сайта botmenu.

Блок breadcrumbs

Блок желтого цвета предназначен для вывода модуля навигации по сайту breadcrumbs («хлебные крошки»). В административной панели Joomla при создании модуля навигации mod_breadcrumbs, вы должны указать позицию «breadcrumbs». Также необходимо задать дополнительные параметры модуля – в блоке «Суффикс класса модуля» напишите суффикс - _nav. Это обязательно!!!

Как уже было сказано выше, этот блок находится внутри блока bloknot_top, который имеет фиксированную высоту и не сворачивается. Если вы не разместили  в позиции «breadcrumbs» модуль навигации, то блок breadcrumbs свернется, при этом блок bloknot_top останется неизменным и дизайн не нарушится.

Блок search

Блок синего цвета предназначен для вывода модуля поиска по сайту, находится на одной линии с блоком breadcrumbs и вместе с ним входит в блок bloknot_top . В административной панели Joomla при создании модуля поиска mod_search, вы должны указать позицию «search». Также необходимо задать дополнительные параметры модуля – в блоке «Суффикс класса модуля» напишите суффикс - _ search.

Если вы не разместили  в позиции «search» модуль поиска , то блок search свернется, при этом блок bloknot_top останется неизменным и дизайн не нарушится.

Блок content

Блок сиреневого цвета предназначен для вывода контента имеет ширину 650px и любую высоту. Предназначен для вывода контента. Находится внутри блока bloknot_bg,  поэтому фоном контента является многократно повторяющийся графический файл bloknot_bg.png. Если на странице нет контента, то блок content сворачивается, а вместе с ним и блок  bloknot_bg.  Имейте это ввиду!

Необходимо отметить, что внутри блока content находятся еще два блока user1 и user2, предназначенных для вывода модулей.

Блоки right , user1 и user2

Эти блоки предназначены для вывода различных модулей предлагаемых в административной панели Joomla например:

• Модуль авторизации;
• Модуль «Последние новости»;
• Модуль статистики;
• Модуль RSS – новостей;
• Модуль «Опрос»;
• Модуль «Кто на сайте»;
• Модуль с произвольным HTML-кодом, где вы можете разместить, объявления или рекламу;
• И много других модулей по вашему выбору.

В административной панели Joomla при создании какого либо  модуля вы должны указать позицию для его вывода «right» , «user1» или «user2».

Если в позициях «user1 » или  «user2» не будет выведено ни одного модуля, то блоки сворачиваются и становятся невидимыми.

Если в позиции «right » не будет выведено ни одного модуля, то блок не свернется и колонка шириной 300px будет пустой имейте это ввиду.

В позиции «right » выводится главное вертикальное меню блога. Создавая вертикальное меню, вы должны дать ему название vertmenu . Далее, при создании модуля меню mod_mainmenu, вы должны определить ему позицию «right», выбрать название меню - «vertmenu», и задать стиль меню «список». Также необходимо задать дополнительные параметры модуля – в блоке «Суффикс класса модуля» напишите суффикс - _vertmenu .

Это обязательно!!! Запомните, этот суффикс используется только для вертикального меню!

Блок botmenu

Блок серого цвета предназначен для вывода горизонтального нижнего меню сайта. Создавая горизонтального нижнее меню, вы должны дать ему название menubot . Далее, при создании модуля меню mod_mainmenu, вы должны определить ему позицию «botmenu», выбрать название меню - «menubot», и задать стиль меню «список». Также необходимо задать дополнительные параметры модуля – в блоке «Суффикс класса модуля» напишите суффикс - _botmenu .

Это обязательно!!! Запомните, этот суффикс используется только для нижнего горизонтального меню!

Как уже было сказано выше, этот блок botmenu находится внутри блока bloknot_bot, который имеет фиксированную высоту и не сворачивается. Если вы не разместили  в позиции «botmenu» горизонтальное меню, то блок botmenu свернется, при этом блок bloknot_bot останется неизменным и дизайн не нарушится.

Также в позиции botmenu вы можете вывести нижнюю навигацию по сайту.

Блок footer

Блок footer голубого цвета вытянут по высоте таким образом, чтобы было видно изображение в блоке art_bot. Т.к. блок имеет фиксированную высоту то он не сворачивается.

Блок copyright

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

При создании модуля вы должны определить ему позицию «copyright» и суффикс  _ copyright.

Если вы не разместили модуль,  в позиции «copyright», то блок свернется!

В следующем уроке мы тщательно изучим самый главный файл, содержащий код страницы – index.php.