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

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

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

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

Блок breadcrumbs

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

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

Блок user1

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

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

Блок header

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

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

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

Блок user2

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

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

Блок left и right

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

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

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

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

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

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

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

Блок content

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

Блок «user3»

Изначально блок user3 предназначен для вывода модуля нижней навигации по сайту breadcrumbs («хлебные крошки»). В административной панели Joomla при создании модуля нижней навигации  mod_breadcrumbs, вы должны указать позицию «user3».

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

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

Блок bottom

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

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

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

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

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

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

Блок bottommenu

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

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

Блок footer

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

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

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

 

Комментарии 

 
# HIGH DRAW 02.04.2011 01:57
Здравствуйте, скачал ваш шаблон, установил как и куда указано, заполнил как в описании search, модуль навигации и горизонтальное меню, но увы, на сайте по-прежнему ничего не изменилось, осталась стандартная шапка джумла, поле для ввода логина и пароля и пр.
Почему header после установки шаблона не стал тем, что в шаблоне голубой, и все остальные пункты что заполнил вообще не появились?

Путь у меня такой: C:\WebServers\h ome\localhost\w ww

в данном каталоге находятся файлы джумлы и папки.

Шаблон соответственно находится здеси: C:\WebServers\h ome\localhost\w ww\templates\li kom

открывается сайт пропиской в браузере простой строки localhost/

Жду ответа, заранее спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# HIGH DRAW 02.04.2011 12:44
Сейчас зашёл в менеджер шаблонов, и изменил в поле default значение на all. После этого появилась шапка, но в ней написано, что фатальная ошибка произошла:

"Fatal error: Call to a member function getCfg() on a non-object in Z:\home\localho st\www\template s"

Подскажите пожалуйста что это значит и как это исправить.
Ответить | Ответить с цитатой | Цитировать
 
 
# HIGH DRAW 02.04.2011 12:58
Теперь ещё непонятней вещь прозошла:

Добавил меню item в topmenu, после этого сайт вообще перестал отображаться, вылезает просто красная ошибка в опере:
403 - You are not authorised to view this resource.

Попробовал вообще удалил этот menu item, не помогло, ошибка осталась, как ни странно.

Что с этим делать?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 03.04.2011 11:00
Шаблон работает на все 100%. Очень рекомендую воспользоваться видео - уроками Евгения Попова по Joomla. Там очень подробно рассказано , как создавать новый проект.
Для начала нужно было создать базу данных проекта, потом в папке WWW создать подпапку с название сайта, туда установить joomla, пристегнуть базу данных и потом уже устанавливать шаблон. После установки зайти в менеджер шаблонов через админпанель и выбрать Likom по умолчанию. У вас такие ошибки вылазят, потому, что вы неправильно организовали свой сайт на локальном сервере. Еще раз настоятельно рекомендую уроки Попова. На мой взгляд - это просто находка для чайников, разжевано все.
Ответить | Ответить с цитатой | Цитировать
 
 
# HIGH DRAW 12.04.2011 18:06
Я бы может и прошёл их, если бы они были бесплатные, да как-то не очень логично предлагать их мне, учитывая что я выбрал по вашему путеводителю путь создания сайта самостоятельно, учитывая сколько стоит создание сайта, например, в веб-студии. Но ладно, спасибо, разберёмся!
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 14.04.2011 19:57
Создание сайта самостоятельно, предусматривает , что вы должны самостоятельно изучать необходимый материал. Чтобы вы не метались по интернету в поисках этого материала, я взяла на себя смелость порекомендовать наиболее подходящие для начинающих материалы. Уроки этого раздела напревлены на то, чтобы помочь чайникам разобраться, как и каким образом создается шаблон. Ну а если вы не хотите ничего изучать, то тут уже вам никто не поможет. Увы, готовых решений нет, не хотите напрягаться самостоятельно. обратитесь к тем , кто сделает это за деньги.
Ответить | Ответить с цитатой | Цитировать
 
 
# HIGH DRAW 07.05.2011 14:01
Суть в том, что я умею создавать сайты, и HTML+CSS хорошо знаю, ещё в школе создавал сайты, используя эти технологии, не говоря о том, что в универе проходили, но я не знаком с вёрсткой на joomla, вот и хотел изучить, мне это нужно.
шаблон мне впринципе удалось запустить более-менее, единственный возник ещё один вопрос - как убрать название сайта из шапки сайта? Смотрел index.php, но ничего не помогло.
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 09.05.2011 09:32
Без обид, видно плохо Вас в школе и в универе учили. Вы хорошо изучили файл index.php ,что у нас там в тег div id="header" заключено? Ни код ли вывода названия сайта, я все прокомментирова ла подробно. Будьте внимательны.
Ответить | Ответить с цитатой | Цитировать
 
 
# HIGH DRAW 24.05.2011 22:14
:) Да я был не только в этом месте:



А ещё и в файл конфигурации залез, и там пробовал убирать вообще пункт имени либо изменять, уже не помню, но суть в том что не помогло. Проблема в том, что php нас не особо учили в универе, но не суть. Так что нужно просто убрать всю строку, которая заключена в тэгах h1? Хмм, странно, что я не догадался вовсе убрать этот пункт, если этим всё решается. А почему вы не сказали, что видеокурс Попова можно без проблем скачать на торрентах в Интернете, я уже скачал Слава Богу, вы тут его рекламируете вовсю, нет чтоб хоть намекнуть. Ладно. Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# HIGH DRAW 24.05.2011 22:15
почему-то не вставился участок кода, ну короче там писалось то что внутри тэгов h1
Ответить | Ответить с цитатой | Цитировать
 
 
# Val 10.04.2012 23:11
Здравствуйте. Наткнулся на Ваши уроки и сразу нашел их очень полезными, но вот не понятно:
Создавая горизонтального меню, вы должны дать ему название topmenu
Но, при создании меню нужно ввести три параметра: Заголовок, Тип меню и Описание. Что из них является названием, которое нужно назвать topmenu?
Дальше: при создании модуля горизонтального меню mod_mainmenu, вы должны определить ему позицию «user2», выбрать название меню - «topmenu», и задать стиль меню «список». Где выбрать название меню - «topmenu»? И где задать стиль меню «список»? Кстати, я установил Ваш универсальный шаблон на версию джумлы 1.7, может быть в этом дело? Там совсем другие пункты и названия?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 11.04.2012 16:04
На Joomla 1.7. надо создать меню в менеджере меню. а потом при создании модуля для вывода меню просто в основных параметрах выбрать нужное меню и не забыть в дополнительных параметрах указать суффикс CSS-класса модуля
Ответить | Ответить с цитатой | Цитировать
 
 
# Diana 13.04.2012 13:24
Здравствуйте! Пытаюсь освоить Joomla по вашим урокам. Возник вопрос по этому уроку. Здесь описаны 11 блоков, а в файле templateDetails .xml в position только 9, т.е. нет блоков header и content. Они не обязательны? Тогда почему в уроке 2 указано, что "этот файл должен содержать перечень всех файлов шаблона и позиций для модулей". заранее спасибо за ответ.
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 14.04.2012 06:22
Все правильно, в файле templateDetails .xml должны быть указаны позиции для модулей. В блоке header не выводится ни один модуль, только название сайта. Посмотрите внимательно файл index.php позиции для вывода модулей определяются командой if($this->countModules('название позиции')
в блоке header подобной команды нет.
В блоке content выводится компонент контента сайта командой jdoc:include type="component" style="xhtml"
Еще раз повторю, что файле templateDetails .xml указываются только позиции для модулей.
Ответить | Ответить с цитатой | Цитировать
 
 
# Diana 17.04.2012 09:40
Спасибо за подробный ответ. Стало всё понятно.
Ответить | Ответить с цитатой | Цитировать
 
 
# ilianna.ru 16.08.2013 13:06
Люблю жумла
Ответить | Ответить с цитатой | Цитировать
 
 
# Лидия 11.09.2013 19:25
Хм...А почему мне не ответили? :o
Я вам писала, вы всем ответили, а на мой вопрос--не ответили!
Ответить | Ответить с цитатой | Цитировать
 
 
# олеся 19.09.2013 08:09
Здравствуйте. А почему у меня блок right выводится не справа а внизу под user3?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 26.09.2013 18:42
Вы накосячили с шириной блоков.
Ответить | Ответить с цитатой | Цитировать
 
 
# Freshik 18.01.2014 17:31
Создаю сайт на основе вашего шаблона.
Появилась вот такая проблема : при выводе материала блогом, футер перепрыгивает в контейнер "контент100" а на остальных страницах все нормально ...
Подскажите как исправить ???
Ответить | Ответить с цитатой | Цитировать
 
Главная Разработка шаблона сайта для joomla 1.5 Блочная верстка шаблона Joomla. Урок 3