Создание шаблонов Joomla - страница 6

Здесь можно установить 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.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 в соответствующую директорию нашего шаблона.