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