УРОК 3

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

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

Блок 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.