пособие для чайников
Блочная верстка шаблона для Joomla 2.5 |
УРОК 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.
|
Комментарии
Все сделала, как написано.
В менеджере меню, дала заголовок «Горизонтальное меню» и определила тип меню topmenu, также определила позицию «user2», в основных параметрах выбрала название меню «Горизонтальное меню», прописала «Суффикс CSS-класса модуля» --tabs. Но пункты меню располагаюся вертикально, идут вниз, а не по горизонтали..Почему?
Кстати, еще: почему важно использовать суффикс tabs и что такое суффикс? И что такое tabs.
Спасибо.
Я уже разобралась.
Я этот урок уже "до дыр" зачитала и изучила. И уже почти сделала сайт на основе вашего шаблона.
Что это может быть?
Спасибо