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

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

Установка

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

(http://developer.joomla.org/sf/frs/do/viewRelease/projects.joomlasolutions/frs.dreamweaverjoomla templateextejoomladreamweaverext 10). Запустите 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: Создание простой таблицы

Внеся некоторые добавления в таблицу (см. Листинг 5), вы получите код, аналогичный этому: