Создаем шаблон сайта питомника

Данная инструкция предполагает от читателя навыки дизайнера - владение Photoshop и знание CSS. Если у вас нет таких навыков, лучше обратиться к профессиональным дизайнерам, иначе ничего хорошего не получится. Тем более, что стоимость сайта на CreatePedigree достаточно невысока за счет технологических особенностей.
Если вас интересует создание сайта питомника на стандартном шаблоне (навыки дизайнер не нужны) или как наполнить страницы информацией, посмотрите материал Создание сайта питомника вместе с CreatePedigree.

Что потребуется для начала работы

1. Браузер Google Chrome со встроенным отладчиком веб страниц. Подойдет также firebugs с Mozillа Firefox.
2. Photophop или аналогичный редактор, позволяющий получать растровые изображения для сайта.

С помощью отладчика веб страниц мы будем анализировать структуру HTML, находить и копировать CSS селекторы (правила).

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

Создадим начальный шаблон сайта

1. Войдем на CreatePedigree. Удобно воспользоваться специальным входом для создания сайтов на www.creped.net - кнопка "Создать сайт". 
2. Наполним сайт тестовой информацией (см. Создание сайта питомника вместе с CreatePedigree), шаблон пока оставим без изменений.
3. Затем вернемся к экрану управления, нажав на оранжевую кнопку в правом верхнем углу тестового сайта.
4. Перейдем в папку шаблоны и создадим новый шаблон.
5. Далее скопируем стандартный шаблон из папки "Моя страница" - надо нажать кнопку "Копировать шаблон" (справа на панели).
6. Теперь сохраним шаблон и перейдем к установкам для тестового сайта. Укажем там ваш новый шаблон. 
7. Теперь откроем два окна браузера: в одном - тестовый сайт, в другом - редактор шаблонов с вашим новым шаблоном.

Подготовительный этап закончен. Далее начнем разбирать CSS. На работе в Photoshop я останавливаться не буду - она никак не специализируется под технологию CreatePedigree.

Структура страниц сайта

Откроем отладчик. Ниже на иллюстрации Google Chrome.

Внимательно изучите структуру страницы. В первую очередь интересны узлы: top-menu-container, side-menu-container, section role="main", bottom-menu-container и common-footer. Именно они определяют внешний вид страницы.

Меняем шаблон
Переходим в редактор, изменим фон шаблона через панель управления и нажмем "сохранить". Теперь вернемся к тестовому сайту и обновим его. Эти действия (сохранить-обновить) придется выполнять многократно в ходе редактирования шаблона.
Теперь откроем редактор CSS шаблона (вторая кнопка справа на панели).

В этом окне производятся основные манипуляции по смене внешнего вида шаблона.

Идем по сайту сверху вниз: меняем баннер с верхним меню, потом боковое меню (для bu-bu оно изменено и переехало под верхнее второй строчкой), основную часть страницы, нижнее меню и футер.

По этой ссылке находится CSS для моего примера. В тексте много комментариев, описывающих, что к чему. Если скопировать содержимое данного CSS, установить margin на панели редактора в 0 и нужный цвет рамки, получится шаблон аналогичный демонстрационному. Над ним можно ставить эксперименты для изучения технологии и создания собственных шаблонов.

Заключение
Необходимо также сказать о средствах изменения структуры страницы и добавления динамического поведения через шаблон.
В шаблонах внутри HTML можно указывать специальные комментарии вида:

<!--script
  // $("#top-menu-container").append( ...
script-->
Эти комментарии позволяют добавить к шаблону JavaScript с использованием jquery.

Для значительного изменения структуры страницы существует возможность применения шаблонов django, но это за рамками данной статьи.

CSS для шаблона Bu-bu

/* Сначала то, что меняют чаще всего */

/* Общие установки  шрифта и цвета текста */
body, html, #pedigree-container {
  font: 10pt Tahoma, Arial,Verdana; color: #121; /* Text color everywhere */
  height: auto;
}
/* Заголовок */
.content-header {
  color: #fff; /* Text color in header and footer */
  background: #cecf88 url(http://lh5.googleusercontent.com/-juJF50N_ptI/Tkel_UuksYI/AAAAAAAAAUg/mENMaku_hSg/strip.gif);
}
/* Рамочка фотографий в родословных */
.image-gallery-thumbnails a.hover, #pedigree .gen1 .photos a.hover {
   border-color: #131; /* Photo border when mouse hover */
}
/* Текст в нижнем меню */
#bottom-menu-container, #bottom-menu-container a,  .content-footer {
    color: #121; /* Bottom directory */
}
/* Цвета бокового меню. У нас оно переехало под главное. */
.side-contacts, .side-contacts a {
    color: #131;
}
.side-menu-sale a, .side-menu-sale a:visited {
  border-color: #bdb;
}
/* Самый низ */
 .content-footer {
  background: #fff;
}

/* Значок пола */
.sex {
  background-image: url(/css/images/sex.png);
}
/* Заголовок родословной и основные настройки родословной */
#pedigree-main .name {
  font-size: 1.9em;
}
.gen0 {
  display: none;
}
#pedigree {
  width: 820px;
  height: auto;
}
#pedigree .gen1 .photos a:first-child {
  display: inline-block;
}
#pedigree-main {
  margin-bottom: 45px;
  text-align: center;
}

/* Убираем надпись CreatePedigree, вспомогательную полосочку  и тень баннера */
#acreatepedigree, #acreatepedigree-right, #mypage-name, #top-menu-shadow {
  display: none;
}
/* Баннер */
.top-menu-back {
  background: #fff url(http://lh5.googleusercontent.com/-9XgSmwMNXMM/TkgY5hfqDNI/AAAAAAAAAVY/n8hYBeBRqtY/bully-banner.jpg);
  height: 410px;
  position: relative;
}
#top-menu-container {
  width: 1100px;
  margin: 0 auto;
}

/* Главное меню */
.top-menu {
  background:   none;
  border: none;
  padding:  0;
  min-width: 600px;
  height: 30px;
  bottom: 74px;
  z-index: 10;
  font-size: 17px;
  left: 50px !important;
  width: auto !important;
}
/* Делаем различие для русского и английского вариантов */
[lang=ru] .top-menu {
  font-size: 15px;
}
a.top-menu-item, a.top-menu-item:visited, .narrow-mode a.top-menu-item {
  color: #e77285;
  padding: 0 9px !important;
  text-shadow: none;
}
a.top-menu-item:hover {
  text-decoration: underline;
  background: none;
}
/* Включаем/выключаем определенные пункты меню */
#item-info {
  display: inline;
}
#item-articles {
  display: none;
}
#item-forsale {
  position: absolute;
  left: 320px;
  top: 34px;
}
.addthis_toolbox {
  margin: 76px 10px 0 0;
}
.narrow-mode .addthis_more_buttons {
  display: inline;
}

/* Боковое меню. Теперь оно под главным. */
#side-menu-container {
  width: 0;
  left: 50%;
  display: block !important;
}
#side-menu {
  top: -110px;
  right: 176px;
  width: 360px;
}
.side-menu-back, .side-menu-sale-thumbnails, .side-menu-sale, .side-contacts, .side-menu-breed {
  display: none;
}
.side-menu-categories li {
  float: right;
}
.side-menu-categories li a, .side-menu-categories li a:visited {
  color: #e77285 !important;
  padding: 0 9px !important;
  font-size: 17px;
  font-weight: bold;
}
/* Делаем различие для русского и английского вариантов */
[lang=ru] .side-menu-categories li a, [lang=ru] .side-menu-categories li a:visited {
  font-size: 15px;
}
body {
  position: relative; /*  For side menu */
}

/* Основное содержимое страницы */
body, html, .mypage #pedigree-container {
  padding: 0 !important;
  margin: 0 !important;
}
html {
  overflow-y: scroll;
}
.content-container, .content-header, .content-footer, .super-border {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}
.content-header, .content-footer, .content-body {
  padding: 15px 140px;
}
#article, #news, #info, #allpedigrees, #allarticles, .content-container, .super-border {
  width: 1100px;
}
.super-border {
  background: #fff;
  padding: 20px 0 30px;
}
#pedigree {
  margin: 0 auto;
}
.field-line {
  padding: 2px;
}
#pedigree-main {
  margin-bottom: 0;
}

/* Нижнее меню */
.bottom-menu h2 {
  display: none;
}
.bottom-menu-back {
  background: #f5f5d6;
}
.bottom-menu-back {
  width: 1100px;
  margin: 0 auto;
}
 #bottom-menu-shadow {
  display: none;
}
.bottom-menu-header {
  margin-bottom: 50px;
  background: #cecf88 url(http://lh5.googleusercontent.com/-juJF50N_ptI/Tkel_UuksYI/AAAAAAAAAUg/mENMaku_hSg/strip.gif);
  border: none;
}
.bottom-menu-header h1 {
  position: relative;
  top: 50px;
}
.bottom-menu-category h3 {
  background: none;
}
.photo-link img, #bottom-menu-container .bottom-menu-category li a img {
  border-color: #cecf88;
}
#bottom-menu-container h1 {
  font-face: Tahoma, Arial,Verdana
}

/* И футер */
#common-footer {
  background: #ebebe9;
  width: 1070px;
  margin: 0 auto;
}

Создание сайта питомника вместе с CreatePedigree.

Помимо электронных родословных CreatePedigree.com позволяет создавать сайты питомников и заводчиков. Сервис абсолютно бесплатный, но взамен вы получаете рекламу на ваших страницах, правда, достаточно ненавязчивую. Рекламу можно отключить, оплатив соответствующую услугу.

Сайт, сделанный с помощью CreatePedigree.com, адаптирован к нескольким языкам и имеет следующие секции:

• Информация - приветствие посетителей, описание питомника, контакты
• Родословные - странички животных, разбитые по видам, породам и категориям
• Новости - фоторепортажи с выставок или просто сообщения
• Фотоальбомы - привычные всем альбомы фотографий
• Статьи - место для стандарта породы, историй, каталога ссылок
• Продажа - упрощенный интернет магазин

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

Примерно такой сайт получится в результате повторения указанных ниже действий.

Вход на CreatePedigree
Чтобы начать создание сайта питомника пройдите по ссылке www.creped.net и нажмите большую кнопку "Создать сайт", далее выберете, где вы зарегистрированы.
В результате появится вот такой экран:

Назначьте адрес для вашего сайта, я указал te-analozo и название Te Analozo Kennels. Если появляются красные рамочки, значит адрес или имя не соответствуют требуемому формату или заняты.
Ниже в большом поле редактирования введите текст секции "Информация" (у меня он начинается "Welcome to the test ...").
Еще ниже можно выбрать шаблон. Внимание, на момент написания только 4 шаблона из папки "Моя страница" специализированы под сайты, остальные - для простых родословных!
Не забудьте указать ваш e-mail - пригодится для извещения о новых комментариях.
Всю введенную информацию можно будет позже изменить - нажимаем ok!

Ваш сайт создан

Вот и все, как гласит надпись "Создание успешно завершено"! Не прошло и пяти минут. Осталось дело за малым: наполнить сайт текстом и фотографиями :-).
Следуйте подсказке в диалоге: "Редактируйте текст страницы, кликая на надписях с пунктирной оранжевой рамкой". В действительности так оно и есть - очень просто: наведите мышку на надпись, если появилась оранжевая рамочка, кликайте и редактируйте.

Ниже я остановлюсь на моментах, которые могут вызвать затруднение.

Категории родословных

Зачем нужны категории? Категории позволят вам разбить родословные ваших животных на группы, например:

• Производители (любой самец по умолчанию)
• Производительницы (любая самка по умолчанию)
• Чемпионы
• Наши дети
• Мемориал

Название категории можно ввести или выбрать из списка ранее добавленных.

Продажа и анонсы

В секции продажа находятся родословные животных и анонсы потомства. Родословная, сделанная в секции продажа или помеченная галочкой "Продажа" при смене категории, появится тут.

Допустим, у вас родились щенки или котята, удобен следующий подход:

1. Занесите родословные обоих родителей на ваш сайт.
2. Теперь в секции продажа добавляйте родословную на каждого щенка или котенка. За счет автозаполнения родословной при вводе первых букв имен родителей это не займет много времени. В итоге у вас сформируется эффектный ряд продажи. 
3. Когда щенок или котенок продается, меняете родословной категорию на "Наши дети" и убираете галочку "Продажа". Со временем на вашем сайте будет впечатляющая клиентов коллекция фотографий и родословных детей.

Анонсы потребуются для предварительной записи клиентов. Тут все достаточно просто, главное внести родословные родителей на сайт до анонса. Потом в диалоге анонса вводите первые буквы имен и выбирайте из списка. Не забывайте, вид и порода родителей  и детей должны совпадать! :-)

Настройки и восстановление удаленной информации
И последнее на чем следует остановиться - как сменить название сайта, отключить комментарии, восстановить удаленную родословную или статью.
Обратите внимание на оранжевую кнопку в правом верхнем углу вашего сайта (с гаечным ключом и молотком). Нажав на нее, вы увидите папки с родословными, шаблонами и удаленными записями вашего сайта. В правом верхнем углу под оранжевой кнопкой "Моя страница" ссылка, открывающая диалог установок. Отсюда можно сменить адрес, название, шаблон и т.д..

Не забудьте раздать ссылку друзьям и знакомым, похвастать на форуме вашим сайтом. Короткий адрес имеет вид ВашСайт.creped.net.
И помните, интересным сайт делают качественные фотографии и грамотный, без пестрых цветов и одних заглавных букв текст.