Создание шаблонов Joomla

-2 Отображение в виде XHTML

-3 форматирования круглых углов

Таблица 1: Параметры модуля

Описание возможных вставок в index.php объектов jdoc можно увидеть в следующем листинге:

Листинг 5:index.php сjdoc вставками

Если вы загрузите ваш сайт в веб обозревателе теперь, то увидите что благодаря изменениям, внесенным нами в 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! нами решены. Остается только заархивировать шаблон в установочный пакет.

Для того, чтобы вашим шаблоном смогли воспользоваться другие, необходимо запаковать его в zip архив. Перед этим следует создать картинку предварительного просмотра шаблона (template_thumbnail.png) размером 227 на 162 пикселя. Эта картинка отобразится при наведении курсора мыши на название шаблона в Менеджере шаблонов (Template Manager):

Рис. 8: Картинка предварительного просмотра шаблона joomla150_book

Теперь запакуйте все файлы шаблона joomla150_book в zip архив , сохраняя структуру каталогов. Также выберите все файлы и папки директории [ПутьКJoomla!]/templates/joomla150_book/и запакуйте их в архив joomla156_book.zip. Создайте резервные копии этих архивов.

Теперь можно передавать пакет шаблона другим пользователям или устанавливать его самому. Если вы хотите попробовать установить шаблон из пакета, необходимо сначала удалить уже имеющийся шаблон joomla150_book, однако перед удалением нужно установить другой шаблон по умолчанию. В главном меню административной части Joomla! выберите Extensions | Template Manager. В появившемся окне выберите желаемый шаблон и нажмите кнопку По умолчанию (Default). Теперь можно деинсталлировать шаблон. В главном меню административной части Joomla! выберите Extensions | Install/Uninstall. Перейдите на закладку «Шаблоны» (Templates). Выберите шаблон joomla150_book и нажмите кнопку Деинсталлировать (Uninstall).

Рис. 9: Деинсталляция шаблона

Также для удаления шаблона достаточно просто удалить директорию

[ПутьКJoomla!]/templates/joomla150_book/.

После создания пакета шаблона и удаления всех его предыдущих версий можно перейти к инсталляции нового шаблона (в главном меню админчасти выберите Extensions | Install/Uninstall).

Здесь можно установить zip пакет с вашим шаблоном. Выберите файл joomla150_book.zip и нажмите кнопку Загрузить файл и установить (Upload File & Install). Инсталлятор сообщит об успешной установке, также на экране отобразится описание XML файла шаблона.

Рис. 10: Установка пакетного файла шаблона

Если вы перейдете к Менеджеру шаблонов, то увидите, что новый шаблон появился в списке и доступен для использования.

HTML редактор Dreamweaver позволяет создавать файлы с определенным расширением. Система Joomla!способна «понимать» такие файлы, что позволяет создавать шаблон полностью в Dreamweaver. Для работы необходима версия Dreamweaver MX 2004 или выше, в котором также нужно установить Template Builder Extension.

Загрузите файл joomlasolutions1.0.mxp

(http://developer.joomla.org/sf/frs/do/viewRelease/projects.joomlasolutions/frs.dreamweave rjoomla templat eexte jooml adreamweaver ex t1 0). Запустите Dreamweaver, в главном меню программы выберите Команды | Управление расширениями (Commands | Manage Extensions). На экране появится Менеджер расширений Макромедиа (Macromedia Extension Manager). Выберите необходимый файл и нажмите Установить (Install):

Рис. 11: Установка нового расширения в Dreamweaver

Для активации расширения необходимо перезапустить Dreamweaver. Создайте новый документ динамического типа (Dynamic page type). Для этого в главном меню выберите Файл | Новый | Динамическая страница | PHP (File | New | Dynamic Page | PHP)

Рис. 12: Настройка нового документа Dreamweaver

После того, как файл был создан, в верхней части экрана вы увидите всплывающее меню со списком наборов инструментов для работы с различными типами файлов. Выберите элемент Joomlasolutions1:

Рис. 13: Выбор набора инструментов для работы с шаблонами

Данный набор инструментов содержит кнопки, позволяющие добавлять различные элементы шаблонов. Первым делом необходимо перейти на закладку Код (Code), удалить заголовок, сгенерированный Dreamweaver, и заменить его заголовком Joomla!

Рис. 14: Удаление заголовка

После этого нажмите на кнопку Вставить заголовочный код (InsertHeaderCode). При этом на странице появится заголовок, типичный для шаблонов Joomla!