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

Загрузка...

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

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

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

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

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

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

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

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

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

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

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

01
<div id="content" class="container_12">

02
<div id="" class="grid_3 ">

03
<jdoc:include type="modules"  name="left" />

04
</div>

05
<div id="" class="grid_6">

06
<jdoc:include type="modules"  name="breadcrumbs" />

07
<jdoc:include type="component" />

08
</div>

09
<div id="" class="grid_3">

10
<jdoc:include type="modules"  name="right" />

11
</div>

12
</div>

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

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

01
<body>

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

03
<?php echo $app->getCfg('sitename');?><br />

04
<jdoc:include type="modules"  name="top" />

05
</div>

06
<div id="content" class="container_12">

07
<div id="sidebar" class="grid_3 ">

08
<jdoc:include type="modules"  name="left" />

09
</div>

10
<div id="maincolumn" class="grid_6">

11
<jdoc:include type="modules"  name="breadcrumbs" /

12
<jdoc:include type="component" />

13
</div>

14
<div id="sidebar-2" class="grid_3">

15
<jdoc:include type="modules"  name="right" />

16
</div>

17
</div>

18
<div id="footer" class="container_12">

19
<jdoc:include type="modules"  name="footer" />

20
</div>

21
<jdoc:include type="modules"  name="debug" />

22
</body>

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

01
.container_12 {

02
margin-left:auto;

03
margin-right:auto;

04
width:960px;

05
}

06
.alpha {

07
margin-left:0 !important;

08
}

09
.omega {

10
margin-right:0 !important;

11
}

12
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,

13
.grid_10,.grid_11,.grid_12,.grid_12 {display:inline;

14
float:left;

15
position:relative;

16
margin-left:10px;

17
margin-right:10px;

18
}

19
.container_12 .grid_1 {

20
width:60px;

21
}

22
.container_12 .grid_2 {

23
width:140px;

24
}

25
.container_12 .grid_3 {

26
width:220px;

27
}

28
.container_12 .grid_4 {

29
width:300px;

30
}

31
.container_12 .grid_5 {

32
width:380px;

33
}

34
.container_12 .grid_6 {

35
width:460px;

36
}

37
.container_12 .grid_7 {

38
width:540px;

39
}

40
.container_12 .grid_8 {

41
width:620px;

42
}

43
.container_12 .grid_9 {

44
width:700px;

45
}

46
.container_12 .grid_10 {

47
width:780px;

48
}

49
.container_12 .grid_11 {

50
width:860px;

51
}

52
.container_12 .grid_12 {

53
width:940px;

54
}

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

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

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

2
<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).

01
* {

02
 margin:0;

03
 padding:0;

04
 }

05
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {

06
 margin: 0.5em 0;

07
 }

08
li,dd {

09
 margin-left:1em;

10
 }

11
 
12
fieldset {

13
 padding:.5em;

14
 }

15
body {

16
 font-size:76%;

17
 font-family:Verdana, Arial, Helvetica, sans-serif;

18
 line-height:1.3;

19
 }

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

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

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

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

{

Ваше имя *

Телефон *

E-mail

Сообщение

}

Уроки по созданию сайтов