Для создания и редактирования графических объектов можно
воспользоваться коммерческой программой Photoshop или бесплатной Gimp.
Рис. 19: Структура директорий шаблона
CSS файл необходимо разместить в директории CSS. Он должен называться template_css.
CSS файл можно создать с помощью Dreamweaver или копировать из другого шаблона.
При создании css файла в Dreamweaver, в заголовке вашего шаблона автоматически
появится ссылка на этот файл:
Однако, для правильной работы шаблона необходимо указать абсолютный путь к css
файлу начиная с директории tremplates, как мы делали ранее (с.м. Листинг 5). Для
простоты работы с тестовым шаблоном также рекомендуется использовать
существующий CSS файл с уже объявленными классами Joomla! Для этого можно
копировать CSS файл или его содержимое из шаблона rhuk_milkyway в соответствующую
директорию нашего шаблона.
Вставка модулей Joomla!
Теперь у нас есть основа для вставки модулей. Переместите курсор к той ячейке таблицы
шаблона, в которой вы хотите разместить, например, поле поиска и нажмите кнопку
Вставить поиск (Insert Search).
Рис. 20: Вставка поля поиска
Поле поиска появится в соответствующей части шаблона, а необходимый для его работы
HTML код и JavaScript будут добавлены к нашему исходному коду:
Рис. 21: Поле поиска в шаблоне
Таким же методом вы можете вставить в шаблон любой динамический элемент Joomla!
Рис. 22: Шаблон с модулями Joomla!
Сайт «в живую»
Чтобы получить возможность работать с только что созданным шаблоном в Joomla!,
необходимо создать файл templateDetails.xml. Базовая версия без картинок выглядит так:
joomla150_book_dw
0.1
28.07.2006
Hagen Graf
GNU/GPL
http://www.cocoate.com
0.1
… Description … Dreamweaver Version
index.php
templateDetails.xml
template_thumbnail.png
css/template.css
После создания XML файла вы сможете выбрать новый шаблон в Менеджере шаблонов
(Template Manager) административной части Joomla! Установите шаблон в качестве
шаблона по умолчанию и загрузите ваш сайт Joomla! в веб обозревателе.
Рис. 23: Менеджер шаблонов с вашим собственным шаблоном
Рис. 24: Ваш сайт с вашим шаблоном
Далее, пользуясь широкими возможностями Dreamweaver вы можете продолжить работу
над усовершенствованием дизайна и программной части шаблона. Dramweaver позволяет
просмотреть результаты редактирования шаблона сразу после его сохранения.
|
5th Фев 2011
|
Теги:
|