Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Создание сайтов » Разработка шаблона для DataLife Engine. Шаблон CSS Site v1
Не нравится(-) 50 Нравится(+)
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1

Здравствуйте, Уважаемые посетители Российской школы CSS. Сегодня - я опишу для вас все этапы создания профессионального шаблона сайта для DataLife Engine и подарю результат нашего труда. Итак, приступим к разработке.
Сразу покажу то, что мы сегодня получим:
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1


Интересно, как это сделать? Тогда начнем...
Для начала, нам понадобятся следующие инструменты:

1. DataLife Engine версии 8.3 (купить можно здесь)
2. Adobe Photoshop CS1 - 4 (купить, или получить пробную версию можно здесь)
3. Notepad++ (хотя можно пользоваться и простым блокнотом). Скачать можно на этом сайте
4. AppServ (Denver, или любой другой серверный пакет). Скачать можно на сайте поддержки
5. Лист А4 и простой карандаш (лучше взять мягкий)


Итак, установив и разобравшись в работе всех этих систем, мы можем приступить к работе:
1. Устанавливаем DLE на localhost с помощью AppServ (кидаем файлы движка в папку www и запускаем http://127.0.0.1/install.php). Базы данных можно создавать в phpmyadmin. Если возникли проблемы - прочитайте эту статью.

2. Убедившись в работе движка, берём лист и карандаш. Тут - нам необходимо создать эскиз нашего шаблона, самому себе показать как он будет выглядеть. Советов в этом деле давать не стоит, тут творческая работа.

3. Получив на листе макет, который Вас устроит, можно начинать переносить его в Photoshop. Замечу, что на этом этапе весь шаблон рисовать не обязательно. Мы рисуем только то, что будем задавать в конечном шаблоне графикой, остальное - можно нарисовать схематично, или вообще опустить.
Итак, теперь по пунктам (все картинки увеличиваются):
3.1 Создаём новый файл с такими характеристиками (как правило, я использую именно такие размеры):
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1

3.2 Делаем начальную заливку (я для фона выбрал цвет #e2e2e2) и разметку листа по вертикальным и горизонтальным линейкам с помощью направляющих (ограничиваем контуры будущих блоков):
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1

Разумеется, может показаться, что тут - жуткая мешанина линий, но если перед Вами лежит лист с нарисованным макетом, то всё становится понятно.
3.3 Теперь собираем (вставляем между направляющими) блоки нашего будущего шаблона (пока без особого внимания на стили):
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1

3.4 Теперь делаем цветовую и стилистическую обработку шаблона. Тут - самое важное Ваш вкус, умение сочитать цвета. Этому особо научить нельзя, просто положитесь на ту гамму, которая Вам будет приятна. В конечном итоге получили это:
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1

Тут: Свечение в логотипе сделано выведенным за верхнюю границу листа объектом с внешним свечением, полосатых текстур в интернете много, текст в логотипе сделан в тон фону с внутренней тенью. Все стили можно найти в прилагающихся к шаблону исходниках.

Описанный порядок действий в Photoshop не является единственно возможным. Опытные дизайнеры работают так, как им удобно, но для начинающих - лучше следовать инструкции.

4. Теперь приступаем к верстке. Шаблоны DLE имеют tpl структуру и хранятся в папке templates. Назовем наш шаблон (папку) css-site1.
Основой шаблона является файл main.tpl. В нем записана основная структура страниц. за вывод метатегов и заголовка страниц отвечает спец. тег {headers}, вывод ошибок, информации и содержания - {info} {content}. Остальные - можно посмотреть в документации к движку.
Начинаем со стандартного заголовка для xHTML:
<!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" xml:lang="ru">
<head>
{headers}
    <link rel="stylesheet" title="default" href="{THEME}/css/style.css" type="text/css" />
    <link rel="stylesheet" title="default" href="{THEME}/css/engine.css" type="text/css" />

В файле style.css - будем хранить стили элементов шаблона, а в engine.css - элементов движка. {THEME} - тег означающий http://ваш сайт/templates/css-site1.
В шаблоне присутствует возможность автоматического добавления в закладки. Для этого нужен Java. Пропишем его:
<script type="text/javascript">
function add_favorite(a) {
  title=document.title;
  url=document.location;
  try {
    // Internet Explorer
    window.external.AddFavorite(url, title);
  }
  catch (e) {
    try {
      // Mozilla
      window.sidebar.addPanel(title, url, "");
    }
    catch (e) {
      // Opera
      if (typeof(opera)=="object") {
        a.rel="sidebar";
        a.title=title;
        a.url=url;
        return true;
      }
      else {
        // Unknown
        alert('Нажмите Ctrl-D чтобы добавить страницу в закладки');
      }
    }
  }
  return false;
}
</script>     
</head>
<body>
{AJAX}

{AJAX} - Вывод Ajax элементов движка. Теперь пойдём строить построчно. В первой строке у нас - логотип и форма поиска по сайту:
<div class="tl1">
<a href="/"><img src="{THEME}/img/logo.jpg" alt="Логотип сайта" align="left" /></a>
<div class="search1">
<form onsubmit="javascript: showBusyLayer()" method="post" action=''>
            <input type="hidden" name="do" value="search" />
         <input type="hidden" name="subaction" value="search" />
         <input name="story" type="text" class="s_x" value="Поиск по сайту..." onblur="if(this.value=='') this.value='Поиск по сайту...';" onfocus="if(this.value=='Поиск по сайту...') this.value='';"  /><input style="position:absolute; right:0; top:0; z-index:1;" type="image" src="{THEME}/img/sbut.png" alt="Найти" />
             </form>
</div>
</div>

Как видно - мы используем абсолютное позиционирование для поиска, что даёт нам большую свободу дальнейшей верстке и не вредит кросс-браузерности (в нашем случае).
Параллельно, мы заполняем style.css (в папке css шаблона), картинки идут в папку img шаблона.
Стили я описывать не буду, их можно будет посмотреть в шаблоне. Здесь - разберемся со структурой tpl.
Далее - у нас идёт с трока меню и входа на сайт:
<div class="tl2">
<img src="{THEME}/img/spl.png" alt="" align="left" /><a href="http://css-school.ru/">На главную</a><img src="{THEME}/img/spl.png" alt="" align="left" /><a href="#">Уроки CSS</a><img src="{THEME}/img/spl.png" alt="" align="left" /><a href="#">Шаблоны сайтов</a><img src="{THEME}/img/spl.png" alt="" align="left" /><a href="#">Форум</a><img src="{THEME}/img/spl.png" alt="" align="left" />
<div class="tl3">
<img src="{THEME}/img/spl3.png" alt="" align="left" />{login}<img src="{THEME}/img/spl3.png" alt="" align="left" /><a href="/?do=feedback">Обратная связь</a><img src="{THEME}/img/spl3.png" alt="" align="left" />
</div></div>

В DLE вход на сайт и панель управления задаётся тегом {login} и файлом шаблона login.tpl (формируется по правилам PHP). Его структуру также можно будет изучить в самом шаблоне.
Следующая строка делится на 2 части: содержание сайта и столбец меню с абсолютным позиционированием:
<div class="tl6">{info} {content}</div>
<div class="tl7">Меню сайта</div>

Это создаёт определённые проблемы, ведь высота столбца меню не учитывается при построении дальнейших блоков, а это значит, что он уедет за footer, если содержание будет меньше его по высоте. Решим эту проблему так:
.tl6 {
min-height:1800px;
height: auto !important;
height: 1800px;
margin-right:370px;
margin-left:10px;
}

Тут - 1800px - высота блока меню. Когда измените его под себя, не забудьте изменить значение высоты столбца на своё.
<div class="footy">
<img src="{THEME}/img/ftl.png" alt="" align="left" style="margin-left:10px;" />
<div class="footy2">
<div class="tl4">© 2010 Copyright, Ваш сайт. <a href="http://www.css-school.ru/" target="_blank">Российская школа CSS</a>. Designed by <a href="http://www.gzshop.ru/" target="_blank">GZ Design</a>, GZweb Group</div>
</div>
<img src="{THEME}/img/ftr.png" alt="" align="left" />
<div class="clear"> </div>
<div style="float:left;">
<div style="border-bottom:1px dotted #f1f1f1; padding:12px 6px;">
<img src="{THEME}/img/valid.png" style="padding-right:10px;" alt="Valid XHTML 1.0 Transitional" />
<img src="{THEME}/img/vcss.gif" style="padding-right:10px;" alt="Правильный CSS!" />
<img src="{THEME}/img/pic.gif" alt="" />
</div>
<div class="footm"><a href="/">Главная</a><a href="/?do=feedback">Контакты</a><a href="http://forum.css-school.ru/" target="_blank">Форум</a><a href="/blog">Блог</a><a href="/ads.html">Размещение рекламы</a></div>
</div>
<div style="float:right; padding-top:14px; position:absolute; right:2%;">
<img src="{THEME}/img/ads.png" alt="Реклама на сайте" />
</div>
</div>

Футер построен из 2 частей: строки копирайта и собственно футера с рекламой, меню и счетчиками.
Далее - необходимо придумать шаблон, по которому сделаем все остальные tpl файлы (он должен быть похож на шаблон короткой и полной новости). В нашем случае - это такая конструкция:
<div class="ss2"><h1>Заголовок</h1>
Содержание</div>

По этому шаблону формируются остальные файлы шаблона. Их содержание и полный список можно посмотреть в самом шаблоне. Можно ещё остановиться на панели авторизации и панели управления, но всплывающие окна, мы уже рассматривали:
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1

Разработка шаблона для DataLife Engine. Шаблон CSS Site v1

Ещё один интересный момент - страница регистрации, а именно проверка форм "на лету":
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1

Он имеет довольно большой размер, потому здесь описывать принцип его работы не буду. Скрипт записан в файл шаблона registration.tpl.

Ещё один интересный момент шаблона: меню-аккордеон в правой панели. Если интересен принцип его создания - можно будет описать в отдельном уроке, но здесь - это просто прием уменьшения высоты колонки меню:
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1


В этом шаблоне - я не стал делать чередование комментариев с целью уменьшения объема кода. Комментарии имеют такой вид:
Разработка шаблона для DataLife Engine. Шаблон CSS Site v1




На этом, закончим описание разработки шаблона и приступим к правке движка под работу с этим шаблоном:
1) Исправляем вывод архивов:
Открыть файл engine/modules/calendar.php
Найти в файле такой код:
if( $i ) $tpl->result['archive'] = implode( "<br />", $news_archive );

Заменить на:
if( $i ) $tpl->result['archive'] = implode($news_archive );


2) Исправляем вывод популярных новостей:
Открыть файл engine/modules/topnews.php
Найти в файле такой код:
$topnews .= "&raquo; " . $link . "<br />";

Заменить на:
$topnews .= $link;


3) Делаем рейтинг с меняющимся под ним фоном ( + зеленый, 0 темный, - красный)
Открыть файл: engine/ajax/rating.php
Найти:
if ($go_rate > 5 OR $go_rate <  1) $go_rate = 0;

Заменить на:
if ($go_rate > 1 OR $go_rate < -1) $go_rate = 0;


Открыть файл engine/modules/functions.php
Найти:
function ShowRating ($id, $rating, $vote_num, $allow = true){
global $lang;


if ($rating) $rating = round(($rating /  $vote_num), 0); else $rating = 0;
$rating = $rating * 17;

    if (!$allow) {

$rated = <<<HTML
<div class="rating" style="float:left;">
        <ul class="unit-rating">
        <li class="current-rating" style="width:{$rating}px;">{$rating}</li>
        </ul>
</div><div class="rating" style="float:left; padding-top:2px;">&nbsp;({$lang['voten']} {$vote_num})</div>
HTML;

        return $rated;
    }


$rated .= <<<HTML
<div id='ratig-layer'><div class="rating" style="float:left;">
        <ul class="unit-rating">
        <li class="current-rating" style="width:{$rating}px;">{$rating}</li>
        <li><a href="#" title="{$lang['useless']}" class="r1-unit" onclick="doRate('1', '{$id}'); return false;">1</a></li>
        <li><a href="#" title="{$lang['poor']}" class="r2-unit" onclick="doRate('2', '{$id}'); return false;">2</a></li>
        <li><a href="#" title="{$lang['fair']}" class="r3-unit" onclick="doRate('3', '{$id}'); return false;">3</a></li>
        <li><a href="#" title="{$lang['good']}" class="r4-unit" onclick="doRate('4', '{$id}'); return false;">4</a></li>
        <li><a href="#" title="{$lang['excellent']}" class="r5-unit" onclick="doRate('5', '{$id}'); return false;">5</a></li>
        </ul>
</div><div class="rating" style="float:left; padding-top:2px;">&nbsp;({$lang['voten']} {$vote_num})</div></div>
HTML;
        

return $rated;
}

Заменить на:
function ShowRating($id, $rating, $vote_num, $allow = true) {
global $is_logged, $member_id, $config, $lang, $db;

if ($rating) $rating = round($rating, 0); else $rating = 0;

if (!$allow) {
  $rated = <<<HTML
  <div class="rati">
<div class="ratig-layer">{$rating}</div>
</div>
HTML;

return $rated;
}

if ($rating < "0") {
$myclass = "1";
}

if ($rating > "0") {
$myclass = "2";
}

$rated .= <<<HTML
<div class="rati{$myclass}">
<div id="ratig-layer-{$id}">
<div class="ratig-layer">
   <a href="#" class="r1-unit" onclick="doRate('-1', '{$id}'); return false;">
   <img src="/templates/css-site1/img/down.png" alt="down" style="vertical-align:middle;" />
  </a>
  {$rating}
    <a href="#" class="r2-unit" onclick="doRate('1', '{$id}'); return false;">
   <img src="/templates/css-site1/img/up.png" alt="up" style="vertical-align:middle;" />
  </a>
</div>
</div>
</div>
HTML;

return $rated;
}


В том же файле найти:
function ShortRating ($id, $rating, $vote_num, $allow = true){
    global $lang;

if ($rating) $rating = round(($rating /  $vote_num), 0); else $rating = 0;
$rating = $rating * 17;

    if (!$allow) {

        $rated = <<<HTML
<div class="rating" style="float:left;">
        <ul class="unit-rating">
        <li class="current-rating" style="width:{$rating}px;">{$rating}</li>
        </ul>
</div>
HTML;

        return $rated;
    }

$rated = "<span id='ratig-layer-".$id."'>";

$rated .= <<<HTML
<div class="rating" style="float:left;">
        <ul class="unit-rating">
        <li class="current-rating" style="width:{$rating}px;">{$rating}</li>
        <li><a href="#" title="{$lang['useless']}" class="r1-unit" onclick="dleRate('1', '{$id}'); return false;">1</a></li>
        <li><a href="#" title="{$lang['poor']}" class="r2-unit" onclick="dleRate('2', '{$id}'); return false;">2</a></li>
        <li><a href="#" title="{$lang['fair']}" class="r3-unit" onclick="dleRate('3', '{$id}'); return false;">3</a></li>
        <li><a href="#" title="{$lang['good']}" class="r4-unit" onclick="dleRate('4', '{$id}'); return false;">4</a></li>
        <li><a href="#" title="{$lang['excellent']}" class="r5-unit" onclick="dleRate('5', '{$id}'); return false;">5</a></li>
        </ul>
</div>
HTML;
        

$rated  .= "</span>";


return $rated;
}


Заменить на:
function ShortRating($id, $rating, $vote_num, $allow = true) {
global $config, $lang;

if ($rating) $rating = round($rating, 0); else $rating = 0;

if (!$allow) {
  $rated = <<<HTML
  <div class="rati">
<div class="ratig-layer">{$rating}</div>
</div>
HTML;

return $rated;
}
if ($rating < "0") {
$myclass = "1";
}

if ($rating > "0") {
$myclass = "2";
}

$rated = "<div id=\"ratig-layer-" . $id . "\">";
$rated .= <<<HTML
<div class="rati{$myclass}">
<div class="ratig-layer">
   <a href="#" class="r1-unit" onclick="dleRate('-1', '{$id}'); return false;">
   <img src="/templates/css-site1/img/down.png" alt="down" style="vertical-align:middle;" />
  </a>
{$rating}
  <a href="#" class="r2-unit" onclick="dleRate('1', '{$id}'); return false;">
<img src="/templates/css-site1/img/up.png" alt="up" style="vertical-align:middle;" />
  </a>
</div>
</div>
HTML;
        
$rated  .= "</div>";

return $rated;
}


Найти:
function userrating ($name){
global $db;

$row = $db->super_query("SELECT SUM(rating) as rating, SUM(vote_num) as num FROM " . PREFIX . "_post where autor ='$name'");

if ($row['num']) $rating = round(($row['rating'] /  $row['num']), 0); else $rating = 0;
$rating = $rating * 17;

$rated = <<<HTML
<div class="rating" style="display:inline;">
        <ul class="unit-rating">
        <li class="current-rating" style="width:{$rating}px;">{$rating}</li>
        </ul>
        </div>
HTML;

return $rated;
}


Заменить на:
function userrating($name) {
global $db;

$row = $db->super_query("SELECT SUM(rating) as rating, SUM(vote_num) as num FROM " . PREFIX . "_post where autor ='$name'");

if ($row['num']) $rating = round(($row['rating'] /  $row['num']), 0); else $rating = 0;
$rating = $rating * 17;

$rated = <<<HTML
{$rating}
HTML;

return $rated;
}


Вот и всё. Разработка и установка нашего шаблона завершена. Теперь можно поставить его основным и заниматься развитием сайта!
В демо результат сохранения оперой главной страницы этого шаблона. Все исходники включены в архив.
Спасибо за внимание!

Шаблон разработан для DataLife Engine 8.3
Шаблон проверен в IE6 - 8, FireFox, Opera и Chrome
Шаблон соответствует стандартам W3C по xHTML 1.0 и CSS 3
Условия публикации: указание автора и прямая ссылка на эту страницу
Условия использования: сохранение ссылок
Автор статьи и шаблона: Российская школа CSS
-----------------------------------
Перейти в категорию CSS шаблонов


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 55126 раз(а) и написали 23 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Декабрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!