Создание шаблонов – пожалуй, одно из самых приятных занятий, с
которым можно столкнуться в процессе разработки сайта под управлением CMS Joomla!. Наши идеи могут быть легко воплощены в жизнь, никаких
преград перед нами не стоит.
Для чего нужен шаблон joomla?
- Создает расположение элементов страницы
- Отображает все системные и модульные позиции cms
- Обеспечивает функционирование пользовательской части
- Задает определенные стили форматирования текста
Шаблон состоит из
- файла index.php, определяющий базовую разметку страницы вашего сайта
- файл CSS-стилей, который отвечает за оформление блоков страницы (цвета, размеры шрифтов и т.п)
- XML-файл для установки шаблона
- Файл графического предпросмора Приведенный выше список является
обязательным для того, чтобы шаблон был установлен через панель
администратора.
Шаблон может содержать значительно большее число файлов.
Подготовка к созданию
Для начала нам потребуется создать
структуру папок самого шаблона. Удобнее
всего начать создание непосредственно
на denwer
или аналоге.
Таким образом мы сможем
следить за всем процессом локально.
Все шаблоны
располагаются в /templates/
Создаем свою папку
(допустим my)
В папке my делаем
папки /css, /images, в которых мы будем хранить
файлы стилей и картинки
В корневой дирректории
шаблона требуется создать 2 файла:
index.php и templateDetails.xml; В папке /css создаем
файл template_css.css
-
"Нарезка" макета
Первым этапом верстки
является "нарезка" дизайн-макета
любым слайсером, схожим с тем, что имеется
в Adobe Photoshop и Image Ready.
Тут научить ничему
нельзя, так как требуется понимание
структуры и метода верстки.
Я решил показать, как
выгдлядел мой сайт в состоянии разбиения
на фрагменты.
Итоги работы со
слайсером
На данном этапе мы
закончили один из самых важных моментов
подготовки для верстки нашего с Вами
шаблона, а именно сейчас мы "нарезали"
элементы оформления.
Результаты данной работы не могут
быть заменены средствами css и html, при
сохранении изображений использовалось
80% качество jpg, что позволило использовать
~ 22кб на графику. Остальные же элементы
будут использованны через css стили.
Создание базового
css файла
Так как мы будем стараться
придерживаться критериев современного
понятия верстка, то основную часть
нашего шаблона вынесем в файл
template_css.css, который был нами уже создан
и ждет своего часа.
Напомню, что требуемые файлы для
нормального функционирования шаблона
- это
index.php
templateDetails.xml
template_css.css
Структура шаблона
предполагает наличие папок /css и /images,
файл index.php и templateDetails.xml располагаются
в корне шаблона, template_css.css в папке /css, в
папку /images мы сохраним все картинки,
нарезанные слайсером. Для удобства
картики мы будем сохранять с человечески
понятными именами.
Содержимое файла
index.php
<?php
defined( "_VALID_MOS"
) or die( "Прямой
вызов файла запрещён." );
// запрет прямого вызова
шаблона
$iso =
explode(
'=', _ISO
);
echo '<?xml
version="1.0" encoding="'.
$iso[1]
.'"?' .'>';
?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <!--
тип страницы -->
<head>
<?php
mosShowHead();
// так задается вывод
метатегов ?>
<meta
http-equiv="Content-Type" content="text/html; <?php
echo _ISO;
?>"
/>
<link href="<?php
echo $mosConfig_live_site;
// это у нас url сайта
?>/templates/<?php
echo $cur_template;
// имя шаблона, можно
вписывать и имя папки ?>/css/template_css.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<!-- последующий html код
-->
</body>
</html>
Файл templateDetails.xml
<?xml
version="1.0"
encoding="windows-1251"?>
<mosinstall type="template"
version="1.0.x">
<name>mytemplate</name>
<creationDate>17/03/2008</creationDate>
<author>poizon</author>
<copyright>GPL</copyright>
<authorEmail>
Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script
Этот
e-mail защищен от спам-ботов. Для его
просмотра в вашем браузере должна быть
включена поддержка Java-script </authorEmail>
<authorUrl>http://eldia.org.ua</authorUrl>
<version>1.0</version>
<description>Описание шаблона</description>
</mosinstall>
Но в данном случае
шаблон не может быть установлен через
администраторскую панель, но тем неменее
при прямой закачке в папку templates будет
прекрасно работать
Содержимое
файла template_css.css пока что сделаем таким
html,
body {
background:#ffe4cd; /* цвет фона страницы
*/
margin:0; /* прижатие к сторонам браузера
*/
color:#333333; /* цвет текста по-умолчанию
*/
font-size:11pt; /* размер шрифта */
font-family:Arial, Helvetica, sans-serif; /* используемые
шрифты на странице */
}
Если цвет фона страницы стал кремового
цвета, то значит стили подключены верно
и можно продолжать дальнейщую работу.
Создадим меню
Для того, чтобы создать
меню в joomla нам потребуется модуль меню
и используемые им стили css. Лично я
предпочитаю использовать модуль от
Mitrich (mod_mljoostinamenu).
В настройке данного модуля требуется
указать вывод только ссылками - это
важно!.
Стиль меню по умолчанию
a.mainlevel
Попробуем создать
такое же меню как и у меня на сайте. Для
этого нам потребуются кружки для меню
(скачать),
которые мы распакуем в папку /images Далее
в ранее созданный index.php выставим позицию
для модуля. Дальнейшая работа с ним
происходит в области
<body>
<body>
Вставляем
<div id="menus"><?php
mosLoadModules('top',
-2);
?></div>
В администраторской панели
задаем отображение модуля в данную
позицию.
В файл template_css.css вносим
a.mainlevel
/* нормальное отображение пункта меню
*/ {
background:url(../images/circle.jpg) no-repeat top center;
/* тут мы выведем кружок в обычном его
состоянии */
height:109px; /* задаем высоту
блока */
width:109px; /* задаем ширину блока
*/
display:block; /* тип отображения элемента
- блок */
float:left; /* обозначим обтекание
по левому краю */
text-align:center; /* отцентрируем
текст по центру элемента */
margin-right:25px;
/* зададим отсуп между элементов */
padding-top:45px; /* укажем высоту отодвижения
сожержимого элемента вниз */
color:#e52727;
/* цвет текста */
font-weight:bold; /* толщина
текта */
}
a.mainlevel:hover /* отображение
пункта меню при наведении на него */ {
background:url(../images/circle_hover.jpg) no-repeat top left; /*
кружок с обводкой */
}
a.mainlevel#active_menu
/* отображение пункта меню при нахождении
внутри ссылки */ {
background:url(../images/circle_active.jpg) no-repeat top left;
/* красный кружок */
color:#FFFFFF; /* цвет
текста - белый */
}
В случае,
если не было допущено ошибок, то у нас
получилось такое же меню как и у меня.
С
следующем уроке Мы будем создавать
каркас сайта.
poizon
Продолжение
следует...
|
