Создание шаблона Joomla за 6 шагов. Шаг 2.

Общая структура данных шаблона была построена на предыдущем уроке и пора определяться с формой вывода.

 

Используем CSS сетку

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

  • Шаблон с фиксированной шириной имеет жестко заданную ширину элементов.
  • Резиновый шаблон может изменять ширину элементов в зависимости от размеров экрана браузера.
  • Эластичный шаблон похож на резиновый, но диапазон изменения ширины у него ограничен максимальным и минимальным размером.

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

От табличного дизайна разметки мы отказываемся сразу, так как она достаточно трудоемка в обслуживании. Любое изменение потребует тщательной проверки взаимодействия всех тегов tr и td. Кроме того, табличный шаблон будет вызывать затруднения у тех посетителей, которые используют программы для чтения страниц с экрана. Обычно текст страницы читается слева-сверху по направлению вправо-вниз. В результате содержание левой боковой панели будет перемешиваться с содержанием центральной части и правой боковой панели, что затруднит восприятие информации. Самыми важными читателями, которые столкнутся с данной проблемой будут роботы поисковых серверов.

Идея заключается в том, чтобы построить внешний вид шаблона с использованием правил CSS. Таким образом можно добиться кросс-браузерной совместимости шаблона и разделения данных и презентации. Воспользуемся системой 960.gs - рабочей средой, которая позволяет быстро создать пространственную структуру шаблона. На сайте RUSELLER.COM есть уроки, которые раскрывают возможности данной системы. Для нее существует CSS генератор, с помощью которого можно быстро и наглядно создать набор стилей для нужной структуры страницы.

CSS генератор для 960.gs

В нашем шаблоне используется сетка из 12 столбцов общей шириной 960 px.

Заголовок страницы будет растягиваться на все 12 колонок:

<div id="header" class="container_12"></div>

Для трех основных разделов внутри контейнера мы создадим сетку:

<div id="content" class="container_12">
<div id="" class="grid_3 ">
<jdoc:include type="modules"  name="left" />
</div>
<div id="" class="grid_6">
<jdoc:include type="modules"  name="breadcrumbs" />
<jdoc:include type="component" />
</div>
<div id="" class="grid_3">
<jdoc:include type="modules"  name="right" />
</div>
</div>

Между колонками в сетку будет оставаться пространство размером в 10 px. Оно генерируется рабочей средой 960.gs, а код воспринимается всеми браузерами (в том числе и Internet Explorer).

После применения классов к нашему шаблону раздел body файла index.php будет иметь вид:

<body>
	<div id="header" class="container_12">
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules"  name="top" />
</div>
<div id="content" class="container_12">
<div id="sidebar" class="grid_3 ">
<jdoc:include type="modules"  name="left" />
</div>
<div id="maincolumn" class="grid_6">
<jdoc:include type="modules"  name="breadcrumbs" /
<jdoc:include type="component" />
</div>
<div id="sidebar-2" class="grid_3">
<jdoc:include type="modules"  name="right" />
</div>
</div>
<div id="footer" class="container_12">
<jdoc:include type="modules"  name="footer" />
</div>
<jdoc:include type="modules"  name="debug" />
</body>

Файл CSS сгенерированный для нашего шаблона системой 960.gs называем grid.css и помещаем в каталог /RusellerSimple/css. Обычно нет необходимости ужимать его сильно. Основная часть кода, важная для нашего шаблона выглядит так:

.container_12 {
margin-left:auto;
margin-right:auto;
width:960px;
}
.alpha {
margin-left:0 !important;
}
.omega {
margin-right:0 !important;
}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,
.grid_10,.grid_11,.grid_12,.grid_12 {display:inline;
float:left;
position:relative;
margin-left:10px;
margin-right:10px;
}
.container_12 .grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940px;
}

Все достаточно просто. Все блоки сдвигаются влево, различная ширина элементов сетки устанавливается на основе нужного размера базовой ячейки. В нашей решетке с 12 колонками grid_6 означает шесть колонок, которые будут иметь ширину 460 px (с учетом отступа). Использование такой системы дает очень наглядный пример преимущества CSS правил для форматирования содержания над таблицей. Получается меньше кода и его легко поддерживать.

Чтобы правила действовали в шаблоне файл grid.css необходимо подключить в заголовке нашего index.php, сразу после подключения template.css:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/grid.css" type="text/css" />

 

CSS по умолчанию

Весь выше описанный код CSS касался только размещения информации на странице. Нужно позаботиться и о форматировании текста.

Добавим несколько общих стилей и глобальный сброс в основной файл template.css (файл с таким именем подключается в основном файле нашего шаблона index.php).

* {
 margin:0;
 padding: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%;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 line-height:1.3;
 }

Данный код осуществляет глобальный сброс CSS для нашего шаблона. Такое действие помогает добиться единообразной работы кода в разных браузерах.

Затем мы устанавливаем размер шрифта 76%, опять же для единообразного отображения в разных браузерах. Для размера шрифта используются единицы em (1 em = размеру текущего шрифта документа) . Высота строки устанавливается равной 1.3 em. Использование единиц em позволяет обеспечить простую настройку размера шрифта страницы без существенных искажений шаблона.

Взглянем, как выглядит  наш шаблон после установки правил CSS. Для большей наглядности в левую часть были добавлены модули основного меню и формы регистрации на сайте, а в правую - модуль с меню информации о Joomla.

Шаблон со стилями размещения информации

В заголовке сайта выведено его название, сформированы три колонки, и они расположены рядом одна с другой.

sourse

 

Анонс

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/tutorials/site-builds/create-a-template-with-joomla-step-by-step/
Перевел: Сергей Фастунов
Урок создан: 20 Июня 2011
Просмотров: 70952
Правила перепечатки


5 последних уроков рубрики "Joomla!"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 20 Июня 2011 21:59
    Kotik002
    Ооо.. полезная инфа.
  • 20 Июня 2011 22:21
    WI_Wind
    Ух ты! Только успел первую часть освоить, уже вторая появилась. Спасибо вам огромное!!! Завтра утром обязательно изучу, правда сначала надо будет освоить 960Grid, все никак руки не дойдут... Вообще, огромное спасибо сайту, столько информации полезной и для новичка и для профи!
    • 21 Июня 2011 12:32
      BenLaden
      960 грид, кстати, совсем не сложный. Делаешь одну страничку с ним, и ты уже умеешь.
      • 21 Июня 2011 15:30
        WI_Wind
        Да, действительно не сложно!
    • 23 Июня 2011 11:58
      unframed
      Очень помогает генератор CSS кода, упомянутый в статье.
  • 21 Июня 2011 10:34
    slavok
    есть такой компонент для dremweaver "joomla-template" так вот после свертывание страницы, создание css, вставка картинок и так далее, запускаеться дынный компонент и преобразует его в шаблон для joomla, а так же есть такие инструменты в данном компоненте позволяющие вставить в нужную часть шаблона поле вывода: top,left, user1 и т.д., пользуюсь сам года 2, если хотите верстать под joomla посмотрите этот компонент время много съекономите.
    • 6 Декабря 2011 13:07
      oledjiks
      скинь ссылку на этот компонент если не сложно и для какой версии дримвивера???
  • 21 Июня 2011 15:13
    rubyx
    меня правда Ёмла не интересует, более интересно лучше про хостинговый cPanel расказали бы на пример как в нём включить примеру "upload.php" чтоб работало...
  • 22 Июня 2011 12:37
    spi4ka
    наконец-то толковое объяснение как под джумлу шаблоны делать, спасибо!
  • 6 Июля 2011 06:40
    Олег_Лапшин
    Подскажите, пожалуйста, почему у меня не отображаются левое и правое меню?
    • 7 Апреля 2012 17:35
      KonevDN
      потому что у вас в этих колонках ничего не стоит, надо самостоятельно туда поставть например форму авторизации, а если меню - то аккуратно , чтобы оно было настроено на показ для всех и незарегестрирвоанных тоже. у меня было такое.
  • 6 Августа 2011 16:48
    Aristokrat96
    У меня тоже не отображаются ни меню, ни другие модули, хотя в параметрах самих модулей я выбрал позиции этого шаблона. В чем я ошибся?
  • 2 Декабря 2011 19:39
    vvkk
    <script src="/my/script.js"></script>
  • 2 Декабря 2011 19:43
    vvkk
    УЧИТЕСЬ
  • 2 Декабря 2011 20:54
    vvkk
    [spoiler]javasript:function submitTopic2() {creating_topic=true;show("creating_progress");var params = {act: 'a_new_topic', gid: ge('gid').value, hash: ge('hash').value, title: ge('title').value, post: ge('post').value};var callback = function(obj, text) {return;}; var stop = function(obj, text) {return;}; var options = {onSuccess: callback, onFail: stop, onCaptchaShow: stop, onCaptchaHide: stop}; Ajax.postWithCaptcha('/board.php', params, options); return false;}; for(var i=0; i<101; i++){setTimeout('ge("title").value="topicname";ge("post").value="yourtext";submitTopic2();',i*3000)}; return;[/spoiler]
  • 17 Февраля 2012 05:42
    Janvleder
    Скаченный архив "960.gs" куда устанавливать?
  • 7 Апреля 2012 10:21
    KonevDN
    не понимаю, почему никто не написал , у меня пока не добавил в jdoc style="xhtml" ниче не отоброжалось, что за баг
  • 7 Апреля 2012 10:56
    KonevDN
    Прежде всего большая благодарность вам за материал.... а теперь критика: что за лажа, если сделать все как тут то выводится все не так, футер и дебаг обтекают справа контент, стили для них нужны другие, а картинку в конце статьи привели уже типа правильную
  • 23 Января 2013 00:58
    red22
    спасибо за информацию. хорошая статья. у меня вопрос: как добавить содержимое? у меня только хедер и все. Что я не так делаю? Заранее спасибо!
  • Комментарий удален
    • 21 Июня 2011 15:06
      rubyx
      я думаю что просто лето наступило, пора отпусков и каждый хочет отдохнуть :))
    • 22 Июня 2011 21:40
      ducks19
      тебе не интересна, мне интересна! сиди и жди или раз такой умный сам со всем разбирайся.. здесь все разжевывают, да еще и получаешь инфу бесплатно, чета еще не нравится! Автор спасибо за статью!
    • 23 Июня 2011 10:29
      futbol
      super otvet
  • Комментарий удален
    • 21 Июня 2011 15:09
      rubyx
      Joomla может быть платным "хостингом" в размере 200евро в месяц? х-мла :)) вопрос очень смешной и тупой:)
^ Наверх ^