Листинг 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/.
Инсталляция с помощью Установщика шаблонов (Template Installer) Joomla!
После создания пакета шаблона и удаления всех его предыдущих версий можно перейти к инсталляции нового шаблона (в главном меню админчасти выберите Extensions | Install/Uninstall).
Здесь можно установить zip пакет с вашим шаблоном. Выберите файл joomla150_book.zip и нажмите кнопку Загрузить файл и установить (Upload File & Install). Инсталлятор сообщит об успешной установке, также на экране отобразится описание XML файла шаблона.
Рис. 10: Установка пакетного файла шаблона
Если вы перейдете к Менеджеру шаблонов, то увидите, что новый шаблон появился в списке и доступен для использования.
Создание шаблоном с расширением Dreamweaver
HTML редактор Dreamweaver позволяет создавать файлы с определенным расширением. Система Joomla!способна «понимать» такие файлы, что позволяет создавать шаблон полностью в Dreamweaver. Для работы необходима версия Dreamweaver MX 2004 или выше, в котором также нужно установить Template Builder Extension.
Установка
Загрузите файл joomlasolutions1.0.mxp
(http://developer.joomla.org/sf/frs/do/viewRelease/projects.joomlasolutions/frs.dreamweaverjoomlatemplateextejoomladreamweaverext10). Запустите 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!
Рис. 15: Вставка заголовка Joomla!
Теперь в нашем файле имеется код заголовка, необходимый при создании шаблонов Joomla!, который ранее мы вносили вручную.
Рис. 16: Код заголовка, необходимый для Joomla!
Структура шаблона
Помимо специального заголовка, для шаблона необходима структура. Создать структуру можно при помощи таблиц или тегов <div>. Далее мы опишем создание табличной версии структуры. Если в Dremweaver все еще активирован режим разметки (layout mode), закройте его.
Таблица
Чтобы создать таблицу можно воспользоваться главным меню Dremweaver, выбрав в нем Вставить | Таблица (Insert | Table). Опции Dreamweaver позволяют создавать таблицы любой сложности и структуры. Для примера мы продемонстрируем создание простой таблицы. Выберите цвет для таблицы по своему вкусу.
Рис. 17: Создание простой таблицы