Вы здесь

Drupal - Урок девятый - Темизация

Из коробки Drupal располагает пятью темами. Естественно в интернете можно найти множество замечательных тем для Drupal, но человеческой душе всегда хочется чего то особеного. Либо тема совсем не подходит, либо хочется изменить какую то мелкую деталь. У вас есть свой сайт на Drupal, или вы как раз в процессе его создания? Давайте поговорим  о том, как можно его приукрасить.


Для того что бы создавать свои темы, или изменять существующие, понадобятся знания PHP, HTML и CSS (чем большие изменения вы хотите внести, чем большие навыки вам потребуются), к сожалению это не входит в тему урока, и вам нужно либо уже иметь знания по этим языкам, или найти уроки по ним где нибудь еще, хотя если вы не лишены смекалки, то кое что понять, и изменить, сможете и после прочтения этого урока.


По умолчанию в Drupal используется движок phptemplate (его вы можете найти в папке /themes/engines, хотя он вам вряд ли понадобится), его мы и помучаем -) Для примеров будем использовать стандартную тему bluemarine, так как по моему мнению она наиболее проста, и подходит для обучения (ну и потому что я делал на ее основе несколько дизайнов -) ). Давайте скопируем папку /themes/bluemarine, в папку /sites/all/themes (если у вас нет папки themes, то создайте ее), и переименуем во что то типа my_theme.


Внутри мы найдем файл bluemarine.info (переименуйте его в my_theme.info) и 5 файлов с расширением .tpl.php, они то нам и нужны.  Каждый из них задает отображение какой то части сайта. Для работы темы необходимы всего лишь 2 файла *.info, и page.tpl.php.


Давайте завершим создание нашей темы. Заходим в файл  my_theme.info, он выглядит так:
 

; $Id: bluemarine.info,v 1.4 2007/06/08 05:50:57 dries Exp $
name = Bluemarine
description = Table-based multi-column theme with a marine and ash color scheme.
version = VERSION
core = 6.x
engine = phptemplate

; Information added by drupal.org packaging script on 2009-07-01 version = "6.13" v project = "drupal"
datestamp = "1246481719"


и замените содержимое на:

 

name = my_theme
description = Наша тема!!!!
version = VERSION
core = 6.x
engine = phptemplate


Как видите мы убрали лишнее, и изменили название (name), и описание (description). Теперь зайдем в «Administer › Site building › Themes», выберем нашу тему, и сохраним. Теперь можно спокойно экспериментировать -)



Немного теории:
Page — собственно вся страница, то как она будет выглядеть задается в файле page.tpl.php.
Region — страница включает в себя регионы, если вы добавляли\убирали блоки, то вы делали это как раз в регионах, по уолчанию: Left sidebar, Right sidebar, Content, Header, Footer. В каждый из них можно вставлять блоки. Регионы можно добавлять\убирать, об этом мы поговорим позже.
Block — О блоках вы уже определенно слышали, они выводят какую-либо информацию в нужный нам регион. Их оформление задается в файле block.tpl.php.
Node — это содержание страницы, и задается файлом Node.tpl.php.
Box — выводит элементы страницы в указанном шаблоне. Задается файлом Box.tpl.php.

Давайте разберемся с файлом Page.tpl.php,  и с тем как он выводит страницу. Можно разделить весь файл на 3 части: Шапка, вместилище данных, и погреб, почему такие нелепые названия? Потому что большинство боится лезть в темизацию, а то что смешно, - уже не страшно. Разберем шапку:
первая часть

<?php print $head ?>
<title></title>
<?php print $styles ?>     

<?php print $scripts ?>     

<script type="text/javascript">

<?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script> 

Тут все просто и не интересно, задается язык, прицепляются файлы CSS и javascript... Переходим ко второму куску:

<table cellspacing="0" cellpadding="0" border="0" id="header">
    <tbody>
        <tr>
            <td id="logo"><?php if ($logo) { ?><a title="<?php print t('Home') ?>" href="<?php print $front_page ?>"><img alt="<?php print t('Home') ?>" src="<?php print $logo ?>" /></a><?php } ?>         <?php if ($site_name) { ?>
            <h1 class="site-name"><a title="<?php print t('Home') ?>" href="<?php print $front_page ?>"><?php print $site_name ?></a></h1>
            <?php } ?>         <?php if ($site_slogan) { ?>
            <div class="site-slogan"><?php print $site_slogan ?></div>
            <?php } ?></td>
            <td id="menu"><?php if (isset($secondary_links)) { ?><?php print theme('links', $secondary_links, array('class' => 'links', 'id' => 'subnavlist')) ?><?php } ?>         <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?>         <?php print $search_box ?></td>
        </tr>
        <tr>
            <td colspan="2">
            <div><?php print $header ?></div>
            </td>
        </tr>
    </tbody>
</table>

тут тоже нет ничего сложного:
if ($logo)  Если задан логотип, печатаем логотип.
if ($site_name)   Если задано имя сайта, то и его напечатаем.
if ($site_slogan)  Если задан слоган сайта, он тоже заслужил быть напечатанным.
Немного знания английского, и чуть чуть смекалки, и все встает на свои места.
 if (isset($secondary_links)) Если существует меню  secondary_links, печатаем.
 if (isset($primary_links))    То же самое касательно  primary_links.
<?php print $search_box ?> Выводим форму поиска.
<?php print $header ?> А вот это совсем интересно, выводим регион Header, и все что мы в него засунули.
С шапкой вроде разобрались, перейдем к  вместилищу данных, или как его называют англоязычные аборигены — Content (по правде говоря я его и сам так часто называю):

<table cellspacing="0" cellpadding="0" border="0" id="content">
    <tbody>
        <tr>
            <?php if ($left) { ?>
            <td id="sidebar-left"><?php print $left ?>      </td>
            <?php } ?>
            <td valign="top"><?php if ($mission) { ?>
            <div id="mission"><?php print $mission ?></div>
            <?php } ?>
            <div id="main"><?php print $breadcrumb ?>
            <h1 class="title"><?php print $title ?></h1>
            <div class="tabs"><?php print $tabs ?></div>
            <?php if ($show_messages) { print $messages; } ?>          <?php print $help ?>          <?php print $content; ?>          <?php print $feed_icons; ?></div>
            </td>
            <?php if ($right) { ?>
            <td id="sidebar-right"><?php print $right ?>      </td>
            <?php } ?>
        </tr>
    </tbody>
</table>

Вместилище данных можно поделить на 3 части, левую колонку, правую колонку, и то что посередине.

if ($left) Если в левом регионе что то есть (блоки), то
     <?php print $left ?> Выводим левый регион, это и есть вся левая колонка.


Переходим к центру
 if ($mission)  Если админ ввел «Миссию» сайта, печатаем ее.
<?php print $breadcrumb ?> Выводим «хлебные крошки» (они выглядят примерно так «Home » Administer » Site building», и находятся вверху страницы)
<?php print $title ?> Заголовок страницы.
<?php print $tabs ?> Вкладки (если конечно есть)
 if ($show_messages) { print $messages; } Выводятся системные сообщения.
<?php print $help ?> Помошь. В основном ее можно найти в админке.
<?php print $content; ?> Регион content.
<?php print $feed_icons; ?> Иконка RSS.
if ($right) Если в правом регионе что то есть (блоки), то
       <?php print $right ?>Выводим правый регион.

Вот и все вместилище данных - ) Переходим к погребу (его так же называют футером, или подвалом):
 

<div id="footer">
  <?php print $footer_message ?>
  <?php print $footer ?>
</div>
<?php print $closure ?>
</body>
</html>



 <?php print $footer_message ?> выводим системные сообщения внизу страницы.
  <?php print $footer ?> Выводим регион  footer.
<?php print $closure ?> Страница законченна.

Вот и весь page.tpl.php, как видите ничего сложного, другие темы движка  phptemplate могут быть больше и тяжелее, но созданы по образу и подобию этой. Вы можете вносить необходимые изменения к код, и они после обновления страницы непременно отобразятся. Например, удалим строчку     <?php print $breadcrumb ?>, и зайдем в админку



Хлебные крошки пропали, а теперь вернем из на место, и допишем за ними:

<?php print $breadcrumb ?> Хлебные крошки



Простор для действий огромный, хотя конечно все основные данные о отображении данных и их расположении хранятся в файле style.css.
В файле  page.tpl.php можно использовать еще и другие переменные, для того что узнать какие переменные есть в наличии, можете добавить код
 

print '<pre>';
print htmlspecialchars(print_r(get_defined_vars(), TRUE), ENT_QUOTES);
print '</pre>';



например после строчки

<?php print $footer ?>


Переменных будет много, не пугайтесь, список переменных можно найти тут.

Не бойтесь что нибудь изменить, и у вас все получится -)

Перейдем к файлу Node.tpl.php, на этом блоге изменения происходили в основном в этом файле.
 

<?php
// $Id: node.tpl.php,v 1.7 2007/08/07 08:39:36 goba Exp $
?>
  <div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
    <?php if ($picture) {
      print $picture;
    }?>
    <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
    <span class="submitted"><?php print $submitted?></span>
    <div class="taxonomy"><?php print $terms?></div>
    <div class="content"><?php print $content?></div>
    <?php if ($links) { ?><div class="links">&raquo; <?php print $links?></div><?php }; ?>
  </div>



В этой теме он довольно таки простой. Из интересных переменных $page.
if ($page == 0)  Если $page равно 1 (истина), то мы в режиме полного отображения материала, если же 0, то мы в тизере, эта строчка выводит ссылку на полный материал, если мы в тизере. У переменной $page так же есть противоположная переменная $teaser, которая истинна только в тизере.

Недавно я добавил к своим страницам на блоге кнопки добавления статьи в различные сервисы. Как это можно реализовать тут? Код который нужно добавить выглядит так

<script src="http://odnaknopka.ru/ok3.js" type="text/javascript"></script>

Он одинаков для всех страниц, и у вас будет выглядеть так же. По моему оптимальное место для добавления, это перед выводом $links, и нужно не забыть что они не должны выводиться в тизере. Код который нужно добавить, у меня выглядит так:

<?php if ($page) { ?><script src="http://odnaknopka.ru/ok3.js" type="text/javascript"></script><?php }; ?>

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

<?php
// $Id: node.tpl.php,v 1.7 2007/08/07 08:39:36 goba Exp $
?>
  <div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
    <?php if ($picture) {
      print $picture;
    }?>
    <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
    <span class="submitted"><?php print $submitted?></span>
    <div class="taxonomy"><?php print $terms?></div>
    <div class="content"><?php print $content?></div>
    <?php if ($page) { ?><script src="http://odnaknopka.ru/ok3.js" type="text/javascript"></script><?php }; ?>
    <?php if ($links) { ?><div class="links">&raquo; <?php print $links?></div><?php }; ?>
  </div>



проверяем. В тизере нет:


а на полной страничке есть.

Таким же образом можно выводить картинки, произвольный текст, и все что вам захочется. Только,  если будете выводить русский текст, помните, что сохранять файл нужно в UTF-8, иначе на выходе вместо букв получите кракозябры.

Block.tpl.php
 

<?php
// $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $
?>
  <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
    <h2 class="title"><?php print $block->subject; ?></h2>
    <div class="content"><?php print $block->content; ?></div>
 </div>


Давайте сделаем его ярко-красным, и с округлыми углами? Смотреться будет ужасно, но надо же с чего то начинать -) Как человек ориентированный на программирование, я не особо люблю возиться с дизайном, поэтому мы немного сфилоним. Идем на сайт http://www.roundedcornr.com, нас интересует вот эта менюшка:
                   


Первое поле не тронаем, это радиус углов, и такой пойдет. Во втором пишем  dddddd, это цвет фона, и он у нас серый, в третьем пишем ff3030, это цвет самого блока — красный. Нажимаем кнопку Create RoundedCornr, и попадаем на вторую страничку.
       


Здесь нас интересуют 4 вещи: как будет выглядеть наш блок, HTML код, который нужно будет вставить в файл block.tpl.php, CSS код, который нужно будет вставить в файл style.css, и 4 картинки с углами, их мы закинем в папку /sites/default/files.

Начнем с CSS, копируем код, и вставляем в самый конец файла  style.css, при этом нужно чуть чуть подправить названия файлов с углами, в оригинале
 

background: url(roundedcornr_419100_tl.png) no-repeat top left; 


у меня

background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_tl.png) no-repeat top left; 


то есть я просто добавил к названию ВАШ_САЙТ/sites/default/files/, что бы браузер знал где искать уголки, это нужно сделать в 4 местах.
Весь CSS код
.

.roundedcornr_box_419100 {
   background: #ff3030;
}
.roundedcornr_top_419100 div {
   background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_tl.png) no-repeat top left;
}
.roundedcornr_top_419100 {
   background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_tr.png) no-repeat top right;
}
.roundedcornr_bottom_419100 div {
   background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_419100 {
   background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_br.png) no-repeat bottom right;
}

.roundedcornr_top_419100 div, .roundedcornr_top_419100,
.roundedcornr_bottom_419100 div, .roundedcornr_bottom_419100 {
   width: 100%;
   height: 30px;
   font-size: 1px;
}
.roundedcornr_content_419100 { margin: 0 30px; }



у вас он будет выглядеть чуть иначе.

Далее, копируем HTML код и вставляем в файл block.tpl.php, при этом старое содержимое файла вставляем вместо текста
 

         Lorem ipsum dolor sit amet, consectetur
         adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute
         irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur
         sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum.



должно получиться примерно так
 

<?php
// $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $
?>
  <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
<div class="roundedcornr_box_419100">
   <div class="roundedcornr_top_419100"><div></div></div>
      <div class="roundedcornr_content_419100">
    <h2 class="title"><?php print $block->subject; ?></h2>
    <div class="content"><?php print $block->content; ?></div>
      </div>
   <div class="roundedcornr_bottom_419100"><div></div></div>
</div>
 </div>



Мой код брать не следует, так как у вас так же будут отличаться названия стилей. Прочто сравните

Сохраняем 4 файлика с углами в папку  /sites/default/files и обновляем страницу. Вуаля:
                       


Вот мы и получили красные блоки, единственное что меня не устраивает, что блоки стали красными и в подвале. В Drupal хорошо то, что можно темизировать любой элемент по его id. Если посмотреть код страницы, то мы увидем что id блока navigation — block-user-1. Как происходит построение этого id? В файле block.tpl.php можно это увидеть.
 

id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">



Сначала ставится block- к нему добавляется название модуля, а затем  числовой идентификатор, названный  delta.

Давайте сделаем копию файла block.tpl.php, и назовем его  block-user-1.tpl.php, а затем вставим в  block.tpl.php первоначальный код
 

<?php
// $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $
?>
  <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
    <h2 class="title"><?php print $block->subject; ?></h2>
    <div class="content"><?php print $block->content; ?></div>
 </div>



и обновим страницу



мы только что переопределили вывод блока  block.tpl.php, так же можно поступить с любой страницей, нодой, и тд. Например, если мы хотим переопределить страницу с нодой под номером 4, то создаем файл page-node-4.tpl.php, а файл node-story.tpl.php переопределит вывод всех нод типа — story.
В принципе тут — все. Используя похожий подход, вы сможете поменять многое в теме Drupal, или при желании создать свою, если конечно вы наделены дизайнерскими талантами (в отличии от меня <8-D ).
Напоследок давайте создадим свой регион. Как я уже говорил по умолчанию их 5, но бывает ситуация, что свои блоки хочется засунуть еще куда нибудь,  например форму поиска вставить рядом с логотипом (хотя есть переменная $search_box, для примера подойдет и форма поиска). Попробуем?
Все новые регионы нужно прописывать в файле *.info, вашей темы, при этом, если вы пропишете хоть 1 свой регион, то придется указать и 5 дефолтных. Действуем -)

 

name =  my_theme
description = Наша тема!!!!
version = VERSION
core = 6.x
engine = phptemplate


name =  my_theme
description = Наша тема!!!!
version = VERSION
core = 6.x
engine = phptemplate 
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[search] = search

Так выглядит наш файл после внесения изменений. Как видите, изначально мы вписали 5 стандартных регионов, а потом добавили свой -  search (вы можете назвать его по своему), теперь давайте добавим его вывод в файл page.tpl.php, строка которую нужно добавить выглядит так
 

<?php print $search; ?>


я вставил ее сразу после вывода логотипа

 

<?php if ($logo) { ?><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a>
<?php } ?>
<?php print $search; ?>
<?php if ($site_name) { ?>
</code>
</p>
<h1 class="site-name"><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1>
<?php } ?>
<?php if ($site_slogan) { ?>
<div class="site-slogan">
    <?php print $site_slogan ?>
</div>
<?php } ?>

Естественно вашу фантазию никто не сдерживает, можете выводить регионы где захотите)
Сохраняем, и идем в «Administer » Site building » Blocks», еслит все сделано правильно, то должен появиться наш регион.



Вставляем туда блок поиска, и получаем:



вот такой вот ужас... Но я надеюсь общий смысл понятен.

На этом урок закончен.

 

Естественно это только базис темизации в Drupal. В следующих уроках мы непременно обсудим темизацию всего остального через файл template.php, создадим свой модуль, и наверно еще поработаем с Views (может и их темизируем). Если у кого то есть интересная тема для урока, пишите в комментах)
ЗЫ Пожалуйста, удалите тему которую мы сегодня наваяли, она ужасна, я боюсь, потомки мне этого не простят.

Комментарии

не подскажите, почему углы не всегда загружаются? пробовал другой код. результат тот же.

Всмысле, вы сделали все необходимые изменения, обновляете страницу, а углы грузятся через раз? 

кстати, углы находятся на бесплатном хосте, а сайт на локале

Углы желательно загрузить туда же, где и сайт, если проблема не пройдет, пишите. 

Предлагаю тему урока(ов): сео модули, кэширование, оптимизация бд.

О сео модулях я хотел написать, только не урок, а просто обзор модулей для блога, и затронуть сео, а кэширование и оптимизацию возьму на заметку, спасибо -) 

Накачал тем с drupal.org, посмотрел их в действии и вдруг даже на стандартной теме начало появляться сообщение:

* warning: Invalid argument supplied for foreach() in Z:\home\worldcosm\www\includes\theme.inc on line 463.
* warning: Invalid argument supplied for foreach() in Z:\home\worldcosm\www\includes\theme.inc on line 468.

В этих строчках находится код:
foreach ($themes as $theme) {
foreach ($theme->info['stylesheets'] as $media => $stylesheets) {
foreach ($stylesheets as $stylesheet => $path) {
$theme->stylesheets[$media][$stylesheet] = $path;
}
}
foreach ($theme->info['scripts'] as $script => $path) {
if (file_exists($path)) {
$theme->scripts[$script] = $path;
}
}

Чего он от меня хочет??? =)))))

Если ничего в файлах не меняли, просто переключали темы, то попробуйте поставить стандартную тему, например Garland, и сбросьте тут /admin/settings/performance кеш  (кнопка Clear Cached data). Если не поможет, пишите.

В этих файлах ничего не менял. Кеш сбросил - не помогло.

Судя по месту возникновения ошибки, проблема в одной из тем. Мне кажется что она в одном из info фалов. Удалите все темы которые идут не из коробки, оставьте только стандартные. Думаю поможет. 

Удалил. Не помогло. Перед удалением перешел на Garland, потом удалил все некоробочные. Обновил страницу и получил:

Fatal error: Call to undefined function phptemplate_get_ie_styles() in Z:\home\worldcosm\www\themes\garland\page.tpl.php on line 12

<?php print phptemplate_get_ie_styles(); ?> -------- вот эта строка 12

Я не менял шапку этого файла.
Попробовал перезапустить Денвер - не помогло.

phptemplate_get_ie_styles() эта функция находится в файле template.php темы Garland, посмотрите, на месте ли она. 

Да. Вот она.
/**
* Generates IE CSS links for LTR and RTL languages.
*/
function phptemplate_get_ie_styles() {
global $language;

$iecss = '';
if ($language->direction == LANGUAGE_RTL) {
$iecss .= '@import "'. base_path() . path_to_theme() .'/fix-ie-rtl.css";';
}

return $iecss;
}

Что то у вас совсем все плохо-)

Если сайт не важен, переустановите, если важен, скиньте мне архив с сайтом, и базой, базу желательно не дампом, а тоже архивом, в денвере она находится в папке \usr\local\mysql5\data\НазваниеБазы. Мыло RemaGe(at)list.ru

Вопрос можно?
Как показать свой новый регион, например, в правом верхнем углу сайта?

Во первых, вам его нужно создать, как описано в уроке, вставить в нужное место div, и определить месторасположение div в css файле st yle.css, если знаете каскадные стили, проблем не будет, если не знаете, введите в яндексе "блочная верстка" и почитайте по теме, описывать это в коментарии слишком долго -)

как убрать Автора и Название страницы, чтобы привязать её например в меню, чтоб только содержание было?

А поподробней можно?) Вы хотите сделать что бы выводились только заголовки страниц? 

ну вот например, когда я создаю новую страницу у меня пишет Имя автора, название и когда я создал эту страницу, а только потом содержание, а мне ж надо только содержание
может я просто нифига не шарю, но мне друпал очень тяжело даётся, но я не собираюсь сдаваться

Если хотите оставить только тело документа, вам нужно изменить файл node.tpl.php вашей темы.  Тело выводится с помощью переменной $block->content 

Спасибо огромное, я бы был очень рад подробному уроку(да и не только я) по созданию каталогов, с помощью Views< taxonomy_menu ну и др. соответствующих модулей. Просто очень часто сталкиваюсь с такой проблемой, и совершаю кучу лишних действий, быть может пара модулей и задача упрощается?=) спасибо!

Все зависит от того, что вы хотите получить.
Если по теме урока, то для главной идет шаблон "maintenance-page.tpl.php"

Спасибо за урок, очень просто и понятно разъяснили.
Возник вопрос, можно ли изменить стиль отображения например страницы add/page?

Здравствуйте, у меня такой вопрос, не могли бы Вы сделать урок на тему "Темизация форм", понимаете, создаю тип материалов, а там все поля идут друг под другом, а хочется чтобы выглядело вот так: http://34261.ru/node/add/firma
Думаю многим это будет интересно.
Заранее спасибо.

Чуть позже будет статья по темизации views и ckk, думаю это то что вам нужно, по срокам точно не скажу

Страницы