Создаём шаблон для DLE

Веб разработка - Уроки dle

Здравствуйте уважаемые посетители! После небольшого отпуска, я продолжаю работу над проектом.
Эта публикация – первая, открывающая новую категорию – «Создание сайтов». В ней, мы будем изучать принципы создания сайтов (шаблонов) под определённую CMS. Начнём с одной из самых распространённых в России CMS – DataLife Engine…


Примером будет служить новый шаблон для сайта gzweb.ru.
Итак, приступим к его созданию:

Цель нашей работы: создать шаблон для сайта веб-мастеров, ориентированный на четкость линий и максимальную легкость.

Для начала – нам предстоит работа в Photoshop. Макет будущего дизайна, как правило, рисуется именно в этой программе.
Грузить вас фотошопом не буду, тем более, что сайтов с уроками – достаточно. Скажу только, что рисования дизайна – не главное. Главное – придумать интересную структуру, чему научить, разумеется нельзя.

Итак, будем считать, что нарисовали и разрезали дизайн на части. Теперь можно приступать к верстке под CMS.
Шаблоны под DLE строятся на файлах TPL. Это обеспечивает максимальную лёгкость вёрстки и значительно облегчает адаптацию дизайна.
Фактически, tpl – это простой html файл, который встраивается в PHP. Для рассматриваемой системы, TPL строятся следующим образом:
Главным файлом (задающим основную структуру шаблона) является main.tpl, Все дополнительные объекты (кроме меню) тоже задаются tpl.
Как правило, стили CSS задаются 2-мя файлами: engine.css – программные части шаблона и style.css – основные стили и верстка.
Чисто схемотично можно изобразить main.tpl таким:

Итак, вернёмся к нашему шаблону. Я остановлюсь конкретно на его особенностях:
- Шаблон должен быть «резиновым», но не доходить до краёв. Я сделал это следующим образом:

html, body {
padding:8px;
margin:0;
}

Теперь все границы нашего шаблона сдвинуты к центру на 8 пикселей. Это было – самое простое…
- шапку шаблона будем создавать с помощью дивов (div), то есть без какого-либо использования таблиц. Схематично, это можно изобразить так:

То есть, в html это выглядит так:

<div id=”top”>
<div id=”left”><div id=”right”>
</div>

Стили задаются следующим образом.

#top {
background-image:url(../img/sup.png);
height:15px;
}

#left {
background-image:url(../img/sup_l.png);
width:39px;
height:15px;
float:left;
}

#right {
background-image:url(../img/sup_r.png);
width:39px;
height:15px;
float:right;
}

Готово. Мы получили классическую структуру строки. Если в ней должно быть содержание, то добавится ещё один див между левым и правым. Стиль его, соответственно – float:left.

Теперь – следующая особенность шаблона – отдельные блоки для каждого элемента, оформленные вертикальным градиентом. Метод его создания известен давно и чаще всего используется для защиты элементов с градиентным фоном от дублирования или обрыва по вертикали. Сделать это очень просто. Достаточно задать его фон следующим образом:

background:#d2d2d2 url(../img/com.png) repeat-x;

Отлично. Фон готов.

Ещё хочу сказать, что центральная часть шаблона сделана с помощью таблицы, состоящей из одной строки и 3 столбцов. Левый и правый – фиксированы по ширине, центральный – «резиновый».
Само собой, и центр можно было сделать без таблиц, но я решил, что с таблицами будет удобнее. Так оно и оказалось.

Итак, соберём воедино всё, что узнали:
1)Шаблоны DataLife Engine строятся на TPL;
2)Основным файлом шаблона является main.tpl;
3)DLE идеально подходит для порталов и новостных сайтов;
4)DLE – один из самых простых, в плане создания шаблонов, CMS
5)Весь рассматриваемый шаблон построен на 2-х CSS-приёмах, которые рассмотрены выше. Дальше – простая их комбинация и работа с атрибутами, описанными в нашем справочнике.

Замечу, что в создании шаблона (а именно поиска) не обошлось без свободно позиционированных элементов, что не всегда хорошо.


P.S. Даже прочитав эту статью сто раз, Вы не поймёте всех особенностей создания шаблонов под DLE. В нашем деле, главное – это практика.
Вот и всё на сегодня. Спасибо за внимание!

P.P.S. Далее, в поле нашего зрения попадёт WordPress. Мы рассмотрим эту систему на примере специально созданного учебного шаблона.

P.P.P.S Руководство по созданию сайта От А до Я входит в заключающую стадию написания. Если всё будет нормально, то опубликуем его в ближайшие дни.