Главная / Joomla / Создание шаблона Joomla

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

Опубликовано:
Обновлено:
87 просмотров
0
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Время на прочтение: 10 мин

Цель учебника — научить вас строить трехколоночный шаблон. Мы уже познакомились со структурой шаблона, научились определять тип шаблона, разобрали основные команды вывода содержимого. Но мы ещё не сделали самого главного — не сделали шаблон. В этой статье мы вплотную приступим к созданию разметки шаблона, познакомимся с созданием «резинового» шаблона.

Хотелось бы уточнить, что существует два вида шаблонов — фиксированные и резиновые. «Резиновым» шаблоном будем называть шаблон, который автоматически приспосабливается под определённую ширину окна браузера пользователя. Такой макет имеет несколько преимуществ:

  • Используется все доступное пространство браузера
  • У пользователей с «маленькими» мониторами не возникает горизонтальных полос прокрутки
  • Пользователи «больших» мониторов могут порадоваться, как эффективно используется вся площадь экрана, а значит, деньги на монитор были потрачены не зря 🙂
  • Такие шаблоны удобно печатаются на бумаге любого формата

Большинство дизайнеров используют для создания резинового макета таблицы, или, иначе говоря, табличную вёрстку шаблона. Да, безусловно, табличной вёрстке гораздо легче научиться, чем вёрстке на слоях, но, на мой взгляд, использование таблиц имеет недостатки, говорилось выше и еще добавлю:

  • При большой вложенности таблиц трудно найти нужный кусок кода и заменить его. Представьте, сколько времени уйдёт на поиск двух-трех строчек среди бесконечных table/tr/td!

И необходимо уточнить еще одну вещь: при создании макета мы будем пользоваться стилями (CSS), поэтому, если вы услышали про CSS первый раз, то перед непосредственным созданием шаблона, прочитайте руководство «Шаг за шагом» по CSS. Почему я выбрал именно это руководство? Оно написано на литературном, легко понятном языке, и снабжено большим количеством примеров.

Для создания трехколонного макета применяется два способа. Первый подход использует параметр float, позволяющий состыковывать один слой с другим по горизонтали, а второй основан на задании положения слоев через позиционирование. Несмотря на некоторые недочёты, оба подхода имеют место быть в арсенале верстальщика и их надо знать для лучшего понимания принципов работы со слоями. В своем руководстве я использую первый способ — через параметр float. Мы будем создавать шаблон, у которого левая и правая колонки имеют фиксированный размер, а ширина центральной колонки вычисляется автоматически, исходя из ширины окна браузера.

<?php defined( '_VALID_MOS' ) or die( 'Доступ ограничен' ); ?>
<!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" lang="<?php echo _LANGUAGE; ?>" 
xml:lang="<?php echo _LANGUAGE; ?>"
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type="text/javascript"> </script>
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" 
rel="stylesheet" type="text/css" media="screen" />
<style type="text/css"> <!--
#wrap {width:80%;}
#header {}
#sidebar {float:left;width:20%;}
#content {float:left;width:60%;}
#sidebar-2 {float:left;width:20%;}
#footer {clear:both;}
--> </style>
</head>
<body>
<div id="wrap">
  <div id="header">
    <?php echo $mosConfig_sitename; ?> <?php mospathway() ?>
  </div>
  <div id="sidebar">
    <?php mosLoadModules('left');?>
  </div>
  <div id="content">
    <?php mosLoadModules('top');?> <?php mosMainBody(); ?>
  </div>
  <div id="sidebar-2">
    <?php mosLoadModules('right');?>
  </div>
  <div id="footer">
    <?php include_once( $mosConfig_absolute_path .'/includes/footer.php');?>
  </div>
</div><!--end of wrap-->
</body>
</html>

В этом примере для наглядности я определил стили в заголовке документа, но, повторюсь, лишь для наглядности. Позже, мы «вынесем» все стили из документа в отдельный файл. Теперь приступим к изучению кода.

Я разместил разметку шаблона в общем контейнере <div id=»wrap»></div>, для которого задал ширину в 80% от разрешения экрана пользователя. Левая, центральная и правая колонки имеют свою ширину, которая также задана в процентах. Ширина каждой колонки вычисляется от ширины родительского контейнера (<div id=»wrap»></div>). Для каждой колонки применен параметр float: left с целью размещения всех колонок по горизонтали. Для «футера» шаблона я применил свойство clear:both, которое указывает на окончание выравнивания по левому краю, и в результате получим «футер» под всеми тремя колонками.

Чтобы добавить элегантности нашему шаблону, а также для повышения читабельности текста, необходимо для элементов, входящих в каждую колонку, добавить отступы от границ самих колонок. Любой, не задумываясь, воспользовался свойством padding, но Internet Explorer не всегда интерпретирует стили так, как нам хотелось бы этого. Поэтому, для поддержки кроссбраузерности (поддержка разных браузеров) в нашем шаблоне, я для каждой из колонок добавлю еще один слой: <div class=»inside»></div>:

<div id="sidebar">
  <div class="inside">
    <?php mosLoadModules('left');?>
  </div>
</div>
<div id="content">
  <div class="inside">
    <?php mosLoadModules('top');?>
      <?php mosMainBody(); ?>
  </div>
</div>
<div id="sidebar-2">
  <div class="inside">
    <?php mosLoadModules('right');?>
  </div>
</div>

После чего, в стилях для этого слоя добавляем отступ через параметр padding:

.inside {padding:10px;}

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

С помощью двух строчек я разграничил области своего шаблона. Теперь шаблон состоит из двух областей: первая область, #main-body, содержит в себе левую и центральную колонку, вторая область, #sidebar-2, содержит правую колонку и выровнена по правому краю. #content — центральная колонка, выровнена по правому краю. #sidebar — левая колонка, выровнена по левому краю. Для создания эффекта последовательного кода, я расположил все области по порядку, начиная с #content и заканчивая #sidebar-2.

<div id="wrap">
  <div id="header">
    <?php echo $mosConfig_sitename; ?>
    <?php mospathway() ?>
  </div>
  <div id="main-body">
    <div id="content">
      <div class="inside">
        <?php mosLoadModules('top');?>
        <?php mosMainBody(); ?>
        </div>
    </div>
    <div id="sidebar">
      <div class="inside">
        <?php mosLoadModules('left');?>
        </div>
    </div>
  </div> <!--end of main-body-->
  <div id="sidebar-2">
    <div class="inside">
        <?php mosLoadModules('right');?>
    </div>
  </div>
  <div id="footer">
    <?php include_once($mosConfig_absolute_path .'/includes/footer.php');?>
  </div>
</div> <!--end of wrap-->

После создания разметки областей, необходимо для каждой колонки задать ширину. Допустим, необходимо, чтобы крайние колонки имели ширину в 25%. Так как #sidebar-2 расположен в отдельной области, то для него просто добавим свойство width: 25%. Но с #sidebar придётся помучиться. Так как эта колонка входит в область шириной 75%, то #sidebar должен иметь ширину 33%:

33% от 75% - это 25%, как раз то, что нужно.

#content я решил сделать шириной в 66%. 33%+66%=99%. Вероятно вы спросите: а куда же делся еще один процент? Так как центральная колонка выровнена по правому краю, а левая — по левому, то оставшийся 1% создаст отступ между этими двумя колонками. Итак, после небольших упражнений в математике, форматирование областей через стили у меня выглядит следующим образом:

#wrap {
        width:80%;
}
#header {} #footer {
        clear:both;
}
#main-body {
        float:left;
        width:75%;
}
#sidebar-2 {
        float:right;
        width:25%;
}
#content {
        float:right;
        width:66.5%;
}
#sidebar {
        float:left;
        width:33.5%;
}
.inside {
        padding:10px;
}

Я удалил раздел с стилями, позже мы внесём все стили в отдельный файл. На текущий момент, весь код из моего index.php выглядит так:

<?php defined( '_VALID_MOS' ) or die( 'Доступ ограничен' ); ?>
<!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" lang="<?php echo _LANGUAGE; ?>" 
xml:lang="<?php echo _LANGUAGE; ?>"
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type="text/javascript"> </script>
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" 
rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrap">
  <div id="header">
    <?php echo $mosConfig_sitename; ?>
    <?php mospathway() ?>
  </div>
  <div id="main-body">
    <div id="content">
      <div class="inside">
        <?php mosLoadModules('top');?>
        <?php mosMainBody(); ?>
      </div>
    </div>
    <div id="sidebar">
      <div class="inside">
          <?php mosLoadModules('left');?>
      </div>
    </div>
  </div><!--end of main-body-->
  <div id="sidebar-2">
    <div class="inside">
      <?php mosLoadModules('right');?>
    </div>
  </div>
  <div id="footer">
    <?php include_once($mosConfig_absolute_path .'/includes/footer.php');?>
  </div>
</div><!--end of wrap-->
</body>
</html>

Знакомство с CSS Joomla!

До сих пор, все наши действия со стилями — это действия по заданию ширины и выравнивания слоев. Но, так как мы решили сделать привлекательный шаблон, то давайте оформим некоторые элементы шаблона, а также вынесем все стили в отдельные файлы. Почему я использую несколько css-файлов вместо одного — template_css.css? Я считаю, это намного удобнее — иметь несколько файлов, подключённых через template_css.css, чем иметь завал всех стилей в одном файле. Я подключаю все дополнительные css-файлы в template_css.css посредством команды @import. После ключевого слова @import указывается путь к стилевому файлу одним из двух приведённых способов — с помощью директивы url или без нее:

/*Robotic Design template CSS file*/
@import url("layout.css"); /* слои */
@import url("customize.css"); /* другие стили */

В файл layout.css я включил все стили, которые относятся к форматированию слоев и разметки шаблона. В файл customize.css я включил все остальные стили + стандартные стили Joomla!.

Мой стилевой файл layout.css:

/*Robotic Design layout.css CSS file*/
body {
        text-align:center; /*Хак выравнивания по центру*/
}
#wrap {
        width:80%; /*Хак выравнивания по центру*/
        margin:0 auto; /*Хак выравнивания по центру*/
        text-align:left;
}
#header {
        text-align:left;
}
#footer {
        clear:both;
}
#main-body {
        float:left;
        width:75%;
}
#sidebar-2 {
        float:right;
        width:25%;
        overflow:hidden;
        margin-left:-3px;
}
#content {
        float:right;
        width:66.5%;
        overflow:hidden;
}
#sidebar {
        float:left;
        width:33.5%;
        overflow:hidden;
}
.inside {
        padding:10px;
}

Как вы заметили, для каждой колонки я добавил по новому свойству, а для правой колонки — два новых свойства. Во-первых, я добавил overflow:hidden. Во-вторых, для #sidebar-2 я добавил отрицательный отступ. Это сделано для большей совместимости с IE.

Теперь приступим к customize.css:

/*Compass Design Customize.css file */
* {
        margin:0;
        paddin:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
        margin: 0.5em 0;
}
li,dd {
        margin-left:1em;
}
fieldset {
        padding:.5em;
}
body {
        font-size:76.1%;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        line-height:1.3em;
}
#header {
        background:#0099FF;
}
#footer {
        background:#0099FF;
}
#main-body {
        background: #CC0000;
}
#sidebar-2 {
        background:#009933;
}
#content {
        background: #999999;
}
#sidebar {
        background: #009933;
}

После небольших косметических изменений, можно взглянуть на наш шаблон. Оформился текст, появился фон.

Реклама. Информация о рекламодателе по ссылкам в статье.

Похожие статьи:
  1. Руководство по созданию шаблона Joomla
  2. ТОП 15 курсов фитнес инструкторов
  3. Составляющие шаблона Joomla
  4. ТОП 20 лучших онлайн курсов HTML и CSS
  5. Шаблоны и графика Joomla
  6. Курсы по Frontend разработке ТОП 25 лучших

Расскажите друзьям:

Комментарии (0)
Войдите чтобы оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *