Блочная верстка шаблона для Joomla 2.5

УРОК 3

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

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

Блочная верстка шаблона Joomla

Блок breadcrumbs

Блок предназначен для вывода модуля навигации по сайту. В административной панели Joomla 2.5 при создании модуля «Навигатор сайта» вы должны указать позицию «breadcrumbs». Заголовок модуля необходимо скрыть.

Блок имеет фиксированную высоту и не сворачивается. Если вы не разместили  в позиции «breadcrumbs» модуль навигации, то блок будет иметь пустое поле!

Блок user1

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

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

Блок header

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

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

Блок имеет фиксированную высоту и не сворачивается. Если вы не разместили  в блоке графический файл, он будет иметь пустое поле!

Блок user2

Блок предназначен для вывода горизонтального меню сайта. Создавая меню в менеджере меню, вы должны дать ему заголовок «Горизонтальное меню» и  определить тип меню topmenu (это системное имя) . Далее, при создании модуля меню в менеджере модулей , вы должны определить ему позицию «user2»,  в основных параметрах выбрать название меню «Горизонтальное меню». Также необходимо задать дополнительные параметры модуля в блоке «Суффикс CSS-класса модуля» написать  tabs. Это обязательно!!! Запомните, этот суффикс используется только для горизонтального меню! Заголовок модуля необходимо скрыть.

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

Блок left и right

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

Первым делом в одном из этих блоков необходимо вывести главное вертикальное меню сайта. Создавая меню в менеджере меню, вы должны дать ему заголовок «Вертикальное меню» и  определить тип меню mainmenu (это системное имя) . Далее, при создании модуля меню в менеджере модулей , вы должны определить ему позицию позицию «left » или  «right», на ваше усмотрение. В основных параметрах выбрать название меню «Вертикальное меню».

Если вы хотите иметь главное меню, с оформлением, как на скриншоте шаблона,   тогда необходимо задать дополнительные параметры модуля в блоке «Суффикс CSS-класса модуля» написать  menu. Это обязательно!!! Запомните, этот суффикс используется только для вертикального меню! Заголовок модуля необходимо скрыть.

Если вы не укажите суффикс меню, то его оформление главного меню будет похоже на обыкновенный список ссылок!

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

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

Блок content

Этот блок предназначен для вывода основного контента сайта – статей и материалов.  Этот блок самый большой. Все материалы, а также компоненты сайта, выводятся в него автоматически, без вашего участия.

Блок «user3»

Изначально блок user3 предназначен для вывода модуля нижней навигации по сайту. В административной панели Joomla при создании модуля «Навигатор сайта» вы должны указать позицию «user3». Заголовок модуля необходимо скрыть. Также можно задать дополнительные параметры модуля в блоке «Суффикс CSS-класса модуля» написать  nav.

Также в позиции «user3»  можно вывести любой другой модуль на ваше усмотрение.

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

Блок bottom

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

В шаблоне предусмотрено оформление трех типов модулей с произвольным кодом:

Первый тип с суффиксом  _custom для вывода в позициях «left » и «right», и имеющий оформление аналогичное основным модулям Joomla 2.5.

Второй тип с суффиксом foot для вывода в позиции «footer».

Третий тип с суффиксом _bot для вывода в позиции «bottom».

В позиции «bottom» выводятся модули с произвольным HTML-кодом, имеющие суффикс  _bot

В этом блоке можно разместить несколько модулей, они будут выстраиваться в горизонтальную линию. Если суммарная ширина модулей превысит ширину страницы, модули будут выстраиваться во вторую линию. Следите за корректным отображением, если выводите несколько модулей в позиции  «bottom».

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

Блок bottommenu

Блок предназначен для вывода нижнего горизонтального меню сайта. Создавая меню в менеджере меню, вы должны дать ему заголовок «Нижнее горизонтальное меню» и  определить тип меню menubot (это системное имя) . Далее, при создании модуля меню в менеджере модулей , вы должны определить ему позицию «bottommenu»,  в основных параметрах выбрать название меню «Нижнее горизонтальное меню». Также необходимо задать дополнительные параметры модуля в блоке «Суффикс CSS-класса модуля» написать  menubot. Это обязательно!!! Запомните, этот суффикс используется только для нижнего горизонтального меню! Заголовок модуля необходимо скрыть.

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

Блок footer

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

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

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

 

Комментарии 

 
# Лидия 31.08.2013 07:39
Вопрос по пункту:Блок user2
Все сделала, как написано.
В менеджере меню, дала заголовок «Горизонтальное меню» и определила тип меню topmenu, также определила позицию «user2», в основных параметрах выбрала название меню «Горизонтальное меню», прописала «Суффикс CSS-класса модуля» --tabs. Но пункты меню располагаюся вертикально, идут вниз, а не по горизонтали..Почему?
Кстати, еще: почему важно использовать суффикс tabs и что такое суффикс? И что такое tabs.
Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 16.09.2013 17:25
При помощи суффикса tabs мы задаем особый стиль оформления модуля и прописываем его в таблицах стилей. Суффикс может быть любой, какой захотите, главное приписать в таблицах стилей, как будет оформлен модуль с заданным суффиксом.
Ответить | Ответить с цитатой | Цитировать
 
 
# Лидия 17.09.2013 07:59
О, наконец-то, вы ответили.))))
Я уже разобралась.
Я этот урок уже "до дыр" зачитала и изучила. И уже почти сделала сайт на основе вашего шаблона.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ольга 10.12.2013 00:06
Стала делать: «Вертикальное меню» и определить тип меню mainmenu (это системное имя) и вот, что мне написала Joomla при сохранении. "Сохранить не удалось из-за ошибки: Тип меню существует: mainmenu"
Что это может быть?
Спасибо
Ответить | Ответить с цитатой | Цитировать
 
Главная Разработка шаблона сайта для Joomla 2.5 Блочная верстка шаблона для Joomla 2.5

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

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

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

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

Подробнее

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

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

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

Подробнее

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

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

Подробнее

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

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

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

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