Создание шаблонов Joomla (fb2) читать постранично, страница - 4
[Настройки текста] [Cбросить фильтры]
Рис. 4: Вид в веб обозревателе
Внедрение модуля Joomla!
Внедрение модуля Joomla! проводится с помощью команд, встроенных в HTML код. Это могут быть и старые команды Joomla! 1.0.x или Mambo 4.5.x, или новые команды patTemplate. Класс patTemplate служит для дифференцирования PHP и HTML кода. Для интеграции в шаблон различных элементов, Joomla! использует объект типа jdoc. Если, вместо тега <title>, вы вставите в заголовок файла index.php следующую строку, в окне веб обозревателя при загрузке вашего сайта корректно отобразятся иконка сайта, заголовок страницы и символ источника новостей (Newsfeed symbol):<head> <jdoc:include type="head" /> </head>
Рис. 5: Иконка сайта и заголовок страницы
Если вы откроете исходный код этой страницы, то заметите, что Joomla! копировала все метаданные, введенные через панель администратора в HTML код. В дополнение к этому источники RSS также были интегрированы в страницу в виде тегов ссылок, отображаемых как символы источников новостей (Newsfeeds) в веб обозревателях, поддерживающих данную технологию (Firefox, Opera и т.д.).
Листинг 4: Метаданные Joomla!
<head> <title>Joomla 1.5.0 – Home</title> <meta name="generator" content="Joomla! 1.5" /> <meta name="description" content="Joomla! – the dynamic portal engine and content management system" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="joomla, Joomla" /> <link href="http://localhost/Joomla150/feed.php?option=comfrontpage& Itemid=1&format=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> <link href="http://localhost/Joomla150/feed.php?option=comfrontpage& Itemid=1&format=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> <link href="favicon.ico" rel="shortcut ico" rel="shortcut icon" type="image/x-icon" /> </head>
Если данный фрагмент кода работает, можно перейти к другим важным объектам jdoc.
Например, команда <jdoc:includetype="modules"name="top"style="-1" /> получает тип вставляемого объекта в качестве параметра (в данном случае это “modules”). Параметр “name” определяет положение модуля. (top, right, left, user1 и т.д.). Установить положение модуля можно также в административной части Joomla! (Extensions | Module Managers, категория Position). Список всех возможных позиций можно посмотреть в Extensions | Templates | Module Positions. Последний параметр “style” содержит значение, которое определяет тип HTML кода, передаваемый модулем. Например, значение –1 передает «чистый» HTML без использования контейнерных тегов <div>.
Параметр Отображение 1 Горизонтальное меню -1 «Чистое» отображение без использования начального и замыкающего тегов <div> -2 Отображение в виде XHTML -3 форматирования круглых углов Таблица 1: Параметры модуля
Описание возможных вставок в index.php объектов jdoc можно увидеть в следующем листинге:
Листинг 5:index.php сjdoc вставками
<html> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="templates/{TEMPLATE}/css/template.css" type="text/css" /> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="780" border="1"> <!– Section 1 –> <tr> <!– Part 1 –> <td colspan="2" height="89" bgcolor="#F5C228"> </td> <!– Part 2 –> <!– Section 3 –> <tr bgcolor="#FFCC33"> <!– Part 7 –> <td colspan="3" height="40"> <jdoc:include type="modules" name="footer" style="-1" /> </td> </tr> </table> </body> </html>
Если вы загрузите ваш сайт в веб обозревателе теперь, то увидите что благодаря изменениям, внесенным нами в HTML код, сайт наполнился динамическим контентом. Конечно, до визуального совершенства еще далеко, но сайт уже работает:
Рис. 6: Шаблон с динамическими данными
Теперь перейдем к CSS форматированию, чтобы улучшить внешний вид нашего сайта. Копируйте следующий код в файл template.css. В данном фрагменте кода мы определяем, что шрифтом по умолчанию будет Arial, ссылки не будут подчеркиваться, а при наведении на них курсора изменят цвет и толщину букв.
Листинг 6: template.css
body { font-family: Arial, Helvetica, Sans Serif; } a:link, a:visited { color: #ff6600; text-decoration: none; font-weight: bold; font-size: 15px; } a:hover { color: #C43C03; text-decoration: none; font-weight: bold; font-size: 15px; }
Эти изменения значительно улучшат внешний вид нашего сайта. На рисунке внизу курсор мыши указывает на ссылку «More About Joomla», шрифт при этом меняет цвет и толщину:
Рис. 7: Шаблон с CSS файлом
Данный шаблон состоит из HTML таблиц. Однако, в настоящее время рекомендуется избегать использование HTML таблиц, так как они ограничивают возможности разметки страниц и размещения на них объектов контента. В дополнение к этому, на нашем сайте пока нет ни одной картинки. Тем не менее, основные вопросы создания шаблонов Joomla!
Последние комментарии
10 минут 40 секунд назад
39 минут 17 секунд назад
45 минут 46 секунд назад
2 часов 21 минут назад
3 часов 48 минут назад
5 часов 28 минут назад