Создание шаблонов Joomla - [5]
Рис. 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!
Структура шаблона
Помимо специального заголовка, для шаблона необходима структура. Создать структуру можно при помощи таблиц или тегов
Таблица
Чтобы создать таблицу можно воспользоваться главным меню Dremweaver, выбрав в нем Вставить | Таблица (Insert | Table). Опции Dreamweaver позволяют создавать таблицы любой сложности и структуры. Для примера мы продемонстрируем создание простой таблицы. Выберите цвет для таблицы по своему вкусу.
Рис. 17: Создание простой таблицы
Внеся некоторые добавления в таблицу (см. Листинг 5), вы получите код, аналогичный этому:
Рис. 18 Структура таблицы
Теперь необходимо сохранить файл. Создайте новую директорию для шаблона Dremweaver: [ПутьКJoomla!]/templates/joomla150_book_dw. Сохраните файл под названием index.php. Там же создайте поддиректории css и images.
Разместите все графические файлы, которые вы планируете использовать в данном шаблоне, в папке images. Для создания и редактирования графических объектов можно воспользоваться коммерческой программой Photoshop или бесплатной Gimp.
Рис. 19: Структура директорий шаблона
CSS файл необходимо разместить в директории CSS. Он должен называться templatecss.
CSS файл можно создать с помощью Dreamweaver или копировать из другого шаблона.
При создании css файла в Dreamweaver, в заголовке вашего шаблона автоматически
появится ссылка на этот файл:
Однако, для правильной работы шаблона необходимо указать абсолютный путь к css файлу начиная с директории tremplates, как мы делали ранее (см. Листинг 5). Для простоты работы с тестовым шаблоном также рекомендуется использовать существующий CSS файл с уже объявленными классами Joomla! Для этого можно копировать CSS файл или его содержимое из шаблона rhuk_milkyway в соответствующую директорию нашего шаблона.
Вставка модулей Joomla!
Теперь у нас есть основа для вставки модулей. Переместите курсор к той ячейке таблицы шаблона, в которой вы хотите разместить, например, поле поиска и нажмите кнопку Вставить поиск (Insert Search).
