AEDStudio Joomla! Direction

Вы здесь: Статьи

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

24.04.2008 13:03 poison

Создание шаблонов – пожалуй, одно из самых приятных занятий, с которым можно столкнуться в процессе разработки сайта под управлением 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();&nbsp; // так задается вывод метатегов ?> 
<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> электронная почта автора  </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; /* цвет текста - белый */ 
}

В случае, если не было допущено ошибок, то у нас получилось такое же меню как и у меня.
С следующем уроке Мы будем создавать каркас сайта.

Создание системной разметки Joomla!

Как и любой другой cms у Joomla есть шаблонизатор. Вывод любого содержимого осуществляется через специальные "теги", которые в разы проще для освоения, чем в шаблонизаторе Smarty, именно благодаря этому многим удобнее и проще работать именно с joomla. В Joomla сушествует 5 способов задания позиций модулям.

 
<?php mosLoadModules ('left'); ?>

выводит содержимое модуля в таблице

 
<table cellpadding="0" cellspacing="0" class="moduletable"> 
 <tr> 
  <td>
<!-- Содержимое модуля -->
   </td>
  </tr>
</table>

 
<?php mosLoadModules ('user1', 1); ?>

используется для вывода модулей горизонтально

 
<?php mosLoadModules ('user1', -1); ?>

выводит содержимое модуля без каких либо внешних тегов

 
<?php mosLoadModules ('user1', -2); ?>

обрамляет модуль в теги <div class="moduletable"></div>

 
<?php mosLoadModules ('user1', -3); ?>

выводит модуль в 4 слоя. Смысл данного варианта — создание закругленных углов для блока. Данный медот опишу позже.

 
<div class="module"> 
  <div> 
   <div> 
    <div> 
    <!-- Содержимое модуля --> 
    </div> 
  </div> 
 </div> 
</div>

Лично по моему опыту лучше всего использовать вариант номер 3.

Начнем осваивать структуру шаблона Joomla!

Первым делом вспоминаем про «Подготовка к созданию» и «Создание системной разметки joomla». Как известно есть два способа верстки любого макета:

табличная
слоями

В именно этой статье я приведу листинг 3х колоночного шаблона, построенного на таблице, так как данный способ будет явно проще для понимания тем, кто только начал осваивать азы.
В итоге применения приведенного в статье кода получится шаблон из 3х колонок с тянущимся по горизонтали центром.

 
<?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; ?>/templates/<?php echo $cur_template;  ?>
/css/template_css.css" rel="stylesheet" type="text/css"  />
</head>
<body>
<table width="100%" border="0"  cellpadding="0" cellspacing="0">
  <tr>
    <td class="left"  width="250"><?php mosLoadModules ('left', -2); ?></td>
     <td class="center"><?php mosMainBody(); ?></td>
    <td  class="right" width="250"><?php mosLoadModules ('right', -2);  ?></td>
   </tr>
</table>
</body>
</html>

Начнем осваивать структуру шаблона Joomla! - 2

В предыдущей статье был описан способ создания простейшего шаблона на основе слоев. В этой статье будет приведен идентичное решение предыдущему способу, только без таблицы.

 
<?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; ?>/templates/
<?php echo $cur_template;  ?>/css/template_css.css" rel="stylesheet" type="text/css"  />
</head>
<body>
<div id="wrapper">
 <div  id="left"><?php mosLoadModules('left', -2); ?></div>
 <div  id="center"><?php mosMainBody(); ?></div>
 <div  id="right"><?php mosLoadModules('right', -2); ?></div>
   <div  class="clear"></div>
</div>
</body>
</html>

Файл стилей шаблона должен содержать

 
body { margin:0; }
div.clear {  clear:both; }
div#wrapper div#left, div#center, div#right { float:left;  display:block; }
div#left { width:25%; }
div#center { width:50%;  }
div#right { width:25%; }

poizon

Продолжение следует...

top-icon Вверх

< Предыдущая		Следующая >

Оставить комментарий

JComments

Главное меню

Опрос

Актуальна ли будет статья о миграции Joomla! с помощью mtwmigrator?

Как вы относитесь к монетизации сайта

Файловый архив

Новости друзей

Joomla! Новости и статьи

Последние комментарии

Спасибо, действительно, больше нигде нормальных ша... Подробнее..
От Lewkee
Опишите последовательно ваши действия. Подробнее..
От Aleks_El_Dia
Алекс! Нелишне поменять местами иконки кнопок Down... Подробнее..
От Раиса

1.	Компонент Миграции с Joomla! 1.0.x на Joomla! 1.5.x	1983
2.	Хак постраничной навигации сайта на CMS Joomla!	793
3.	Дополнительное изменяемое поле "Телефон"	456