Создание шаблонов Joomla
- Название:Создание шаблонов Joomla
- Автор:
- Жанр:
- Издательство:неизвестно
- Год:неизвестен
- ISBN:нет данных
- Рейтинг:
- Избранное:Добавить в избранное
-
Отзывы:
-
Ваша оценка:
Создание шаблонов Joomla краткое содержание
Создание шаблонов 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. Он должен называться templat e 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
hagen@cocoate.com
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 позволяет просмотреть результаты редактирования шаблона сразу после его сохранения. Вы также можете настроить Dreamweaver на автоматическое обновление измененного шаблона, находящегося на FTP или WebDAV сервере! Для этого в Dreamweaver необходимо указать путь к файлам Joomla! и ввести информацию, необходимую для подключения к удаленному серверу.
Рис. 25 Работа над сайтом в Dremweaver
Шаблоны и теги
Joomla! до версии 1.5.0 (включительно) все еще может работать с таблицами при создании шаблонов. Однако, в последующих версиях Joomla! эта функциональность будет полностью убрана в целях реализации требований об устранении ограничений. Тег
Тег
Один из базовых шаблонов, rhuk_milkyway, использует именно такую технологию. Он не содержит таблиц (тег
), вместо этого структура шаблона определяется тегамиРазмещение модуля «в деталях»
Давайте ближе рассмотрим панель модуля, расположенную слева:
Рис. 26: Модуль, расположенный слева
В HTML коде файла index.php имеется следующий фрагмент:
В форматировании тега
Контент между тегами и отображается только если выполняются условия параметров. В данном случае отображение будет зависеть от наличия модуля или модулей в положении «слева» (left). Если таких модулей нет, общая разметка шаблона динамически изменится, чтобы заполнить пустое место.
В нашем случае имеется три модуля.
CSS идентификатор левой колонке выглядит в CSS файле следующим образом:
#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}
Если вы посмотрите на исходный код страницы, отображаемой в веб браузере (нажать правой кнопкой на странице и выбрать Просмотреть исходный код страницы (View Page Source)), то увидите, что jdoc запрос Joomla! сгенерировал на самом деле значительно больший объем кода.
Листинг 7: Выдержка из исходного кодаHTML страницы
… дополнительные HTML команды
… дополнительные HTML команды
В данном фрагменте кода особо отметим CSS класс module_menu. Описание данного класса в CSS файле выглядит следующим образом:
div.module_menu {
background: url(../images/mw_box_blue_br.png)
100% 100% no-repeat;
… дополнительные команды …
}
div.module_menu div {
background: url(../images/mw_box_blue_bl.png)
0 100% no-repeat;
}
div.module_menu div div {
background: url(../images/mw_box_blue_tr.png)
100% 0 no-repeat;
}
div.module_menu div div div {
background: url(../images/mw_box_blue_tl.png)
0 0 no-repeat;
padding: 10px;
padding-top: 30px;
padding-bottom: 15px;
width: auto;
}
div.module_menu div div div div {
background: none;
padding: 0;
}
Интервал:
Закладка:
