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

Данная инструкция предполагает от читателя навыки дизайнера - владение 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.
И помните, интересным сайт делают качественные фотографии и грамотный, без пестрых цветов и одних заглавных букв текст.

Настройка дизайна электронной родословной.

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

Начало
Зайдя на сайт, перейдите во вкладку "Шаблоны" и нажмите "Создать"

Вкладка "Шаблоны"

Редактор шаблонов 

Появляется редактор шаблонов

Редактор шаблонов

 По принципу работы редактор похож на обычный текстовый редактор, но имеет некоторые дополнительные функции:

• Расширенный блок настройки фона
• Переключение типа таблицы
• Копирование шаблона

Расширенный блок настройки фона 
Расширенный блок настройки фона шаблона позволяет быстро подобрать цвета и изображение основного фона, настроить отдельно цвета ячеек производителей и производительниц.

Цвета основного фона и ячеек 

Переключение типа таблицы
В блоке управления типом таблицы можно быстро сменить ориентацию таблицы, выбрать количество колен, настроить тип рамки.

Выбор типа таблицы

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

Выбор шаблона для копирования

Например, если вам не нужно поле "Чип", достаточно просто удалить текст "{{words.CHIP}}: [[chip]]". Здесь {{words.CHIP}} указывает слово в словаре, для англоязычной аудитории появится "Chip", для русскоязычной - "Чип" и т.д. [[chip]] означает имя поля данных в родословной.

Заключение
Читатели знакомые с HTML и CSS могут не ограничиваться функциями панели управления, а пойти дальше, переключившись в режим редактирования HTML и зайдя в диалог CSS. Но и без знания этих web стандартов можно создавать замечательные шаблоны, используя функции копирования, настройки цветов и типа таблицы.

Инструкция по созданию электронной родословной.

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

1. Вход на сайт.

Вход на CreatePedigree.com

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

2. Рабочее пространство.
Вы попадаете в рабочее пространство. Здесь будут находиться все сделанные вами родословные. Это похоже на почтовый ящик для e-mail.

Рабочее пространство CreatePedigree.com

Нажмите "Создать" (в левом верхнем углу, помечена зеленым плюсом).

3. Редактор родословных.
Теперь вы в редакторе родословных. Можно начинать вводить данные.
Если у вас много питомцев, начните со старших, CreatePedigree сможет потом автоматически дополнить вводимые данные - что сэкономит вам массу времени.

Редактор родословных на CreatePedigree.com

1) Сначала выберете вид вашего питомца - кошка, собака...
2) Укажите породу, окрас, введите данные о владельце и заводчике.
3) Теперь смените шаблон (если вы не предпочитаете белый чистый лист).
Для этого нажмите на название шаблона на панели (по умолчанию "Чистый лист").
Откроется окно выбора шаблона:

Выбор шаблона родословной

Мне понравился синий. Выбрав его, получаем следующее:

Редактор родословных после смены шаблона 

4) Заполняйте поля родословной, просто кликая мышкой на нужный текст.
5) Обязательно установите фотографии - они украсят родословную.
Можно также добавить видео из Youtube. Для этого скопируйте адрес видео, например, http://www.youtube.com/watch?v=ZaJV83jbnhA. И укажите его в качестве URL изображения.
6) Нажмите на кнопку предварительного просмотра (вторая слева на панели). Должно получиться что-то вроде:

Созданная родословная собаки

7) Уже можно похвастать друзьям проделанной работой, кликнув "поделиться" в правом верхнем углу родословной. Или по старинке - скопируйте адрес страницы из строки браузера.

4. Публикуем родословную.
Если у вас нет сайта и вы не пользуетесь форумами, где есть BBCode ([i]буковки со скобочками[/i]), дальше можно не читать. Остальным я предлагаю вернуться в редактор родословных и нажать кнопку "глобус" (справа на панели) - появится диалоговое окно:

Ссылки на родословную

Вы наверняка загружали изображения или видео на серверы хранения, и вам предлагались HTML и BBCode для ссылки. Тут все то же самое. Ниже то, что скопировал я из диалога "Ссылки на родословную":

Родословная - Супер Пёс Шарик                         


А вот результат интеграции в мой блог:

Электронная родословная вашего питомца.

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

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

Пример электронной родословной

Есть следующие инструменты для создания электронных родословных:

1. Редактор документов типа Word

2. HTML редактор web страниц

3. Сайт - накопитель родословных

4. Специализированный онлайн сервис или программа для создания электронных родословных

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

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

Родословная с сайта-накопителя

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

На сегодняшний день наибольшей популярностью пользуется довольно старый и известный многим онлайн сервис на сайте SitStay. Это проверенный временем (возможно, даже ваша бабушка делала так родословные собакам) способ быстро построить простенькую, но вполне информативную страницу.

Пример с сайта SitStay

SitStay позволяет настраивать шрифт, цвета рамки, фона и текста; заполнять информацию о виде, породе и окрасе животного.

В случае если вы обнаружите, что при заполнении допустили ошибку или выбрали неверный цвет, вам придется иметь дело с HTML кодом (если вы не знаете, что это такое, нажмите правую кнопку мыши на этой странице и выберете пункт 'исходный код'). Ну... или можно заполнить все данные родословной заново...

Сейчас в интернете для решения различных задач появляется все больше современных сервисов. Появился такой и для создания электронных родословных животных - CreatePedigree.com.

Пример родословной собаки с CreatePedigree.com

Как более современный CreatePedigree предлагает значительное количество возможностей: настройка шрифтов и цветов для различных частей родословной, можно включать фоновые картинки, делать таблицы различного формата и с разным числом колен. Знакомые с веб технологиями HTML и CSS также смогут проявить фантазию ничуть не хуже, чем в HTML редакторе.

В родословных от CreatePedigree значительное число полей информации (при нежелании заполнять их можно пропустить): здесь, помимо вида, породы, имени и окраса, есть и даты рождения, и титулы; можно добавлять фотографии и видео с youtube. Все данные вводятся из удобных диалогов с подсказками и автоматическим дополнением. 

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

После заполнения и сохранения родословной на CreatePedigree можно при необходимости вернуться к редактированию информации и настройке внешнего вида.

Что приятно, CreatePedigree не требует регистрации или повторения ужасно читающих букв CAPTCHA. Достаточно быть зарегистрированным в популярной социальной сети или иметь почтовый адрес на популярном сервере.

Вход на CreatePedigree.com

Как сделать так, чтобы родословная собаки или кошки появилась на страницах сайта или опубликовалась на форуме или в социальной сети? В SitStay потребуется взять предложенный HTML код и скопировать его на страницу вашего сайта. Для публикации на форуме или в социальной сети дайте ссылку на эту страницу вашего сайта.

CreatePedigree предлагает больше вариантов: помимо HTML кода родословной можно получить BBCode для форума, или, выбрав нужную социальную сеть, поделиться сделанной родословной в Vkontake, Mail.ru, Facebook, Twitter.