Тренинг Активный старт в интернет для профессионалов - модуль2-вебинар 13

1. Интернет-тренинг
Тема5
Проектирование и создание своего
информационного ресурса.

2. Домашнее задание по проекту?
1. Протестировать название проекта – при
необходимости – скорректировать.
2. Написать устав проекта – цель, портрет
целевой аудитории, сроки, способ
реализации.
3. Протестировать целевую аудиторию и
перечислить места ее «тусовок» в
интернет.
4. Продумать, разработать и подобрать
атрибуты проекта : логотип, слоган,
доменное имя.
5. Посмотреть шаблоны и выбрать для своего
проекта.
6. Разработать ментальную карту своего
проекта.

3. Домашнее задание ?
1. Создать свой сайт на микротексте в папке на
моем хостинге.
2. Подобрать шаблон.
3. Глядя на шаблон разработать структуру сайта,
меню.
4. Натянуть шаблон дизайна на сайт.
5. Создать для своего сайта страницы контента,
вставить фотографии и рисунки, предварительно
загрузив их в папку I .
6. Скорректировать ссылки в меню на готовые
страницы.
7. Настроить страницу Контакты и форму обратной
связи. Найдите, где нужно исправить тему
письма.

4. Исправляем ошибку – тема
письма в форме обратной связи
<?php
# Общие настройки
$config = array();
$config['sitelink'] =
'http://opanasenko.org/microtext/ecodacha/'; # URL сайта, со слэшем
на конце
$config['sitename'] = 'Экодача'; # Заголовок сайта
$config['slogan'] = 'Жизнь и бизнес в селе'; # Слоган
$config['encoding'] = 'utf-8'; # Кодировка

5. Вебинар 13. «Некоторые полезные
технические моменты по работе с
сайтом на микротексте Microtext»

6. Практикум 13
Проектирование и создание сайта
на Microtext и подобранном
шаблоне.
Часть 4.
Страницы для продажи товаров,
форма заказа, дополнительный
блок Новости.

7. Страницы для продажи товаров
1. Страница-каталог – тизерная форма или список
товаров, структурирование по категориям.
2. Страница товара : название, фото, автор или
производитель, общие характеристики, цена,
количество, сроки, условия поставки, условия
оплаты, правила использования, кнопка
«Купить».
3. Страницы-инструкции - правила использования
товара.
4. Рекламные страницы – на категорию, отдельный
товар или бесплатный имиджевый (вводный)
продукт – текстовые, аудио, видео или
мультимедийные.

8. Переходы на страницу товара
Посетители по
поисковым Страницы Каталог Страница
запросам сайта товаров товара
Переходы по
прямой Рекламная Каталог Страница
рекламе страница товаров товара
Рекламая Страница
страница товара
Переходы по
непрямой
рекламе
Рекламная
страница Страница
имиджевого товара
продукта

9. Страница - каталог

10. Страница - каталог
Можно организовать :
• одну для всех товаров,
• по одной для каждой группы,
• отдельную для каждой категории.
Каталог может иметь сложную структуру и
состоять из нескольких страниц.
Критерий – простота и наиболее короткий
путь к кнопке Купить.

11. Создаем страницу-каталог для
электронных книг
<img src="{$config['sitelink']}/i/gribi-v-sadu.jpg" alt="Грибы в саду"
height="90" style="float: right; margin: 0px 30px 0px 30px;">
Пробел - &nbsp
<img src="{$config['sitelink']}/i/book1.jpg" alt=""
height="90" style="float: left; margin: 0px 30px 0px 30px;">

12. Страница-каталог для
электронных книг выглядит так

13. Добавим ссылку на эту страницу –
корректируем боковое меню
books

14. Создаем страницу для бесплатной книги
«Грибы в саду»
<img src="{$config['sitelink']}/i/gribi-v-sadu.jpg" alt=""
height="200" style="float: left; margin: 5px 15px 5px 15px;">
Форма
подписки

15. Так выглядит эта страница

16. Описываем коммерческую книгу «Выращивание
грибов вешенка в теплицах и других
приспособленных помещениях небольшой
площади» в Justclick -Мой магазин, Продукты

17. Сразу описываем автоматизированную
поставку книги после оплаты
Ссылка на скачивание
электронной книги с
файлообменника

18. Сразу описываем добавляем партнерскую
программу для продажи книги

19. Настройка способов оплаты

20. Настройка WebMoney

21. Настройка
WebMoney

22. Настройка WebMoney

23. Настройка interkassa

24. Настройка interkassa

25. Настройка
interkassa

26. Формируе
м форму
заказа

27. Добавляем
страницу
книги1
Ссылка на дополнительную
страницу – Содержание книги
<a href="{$config['sitelink']}/book1-
s.html" title=""> Содержание
книги</a><br>
Форма
заказа

28. Страница книги «Выращивание грибов вешенка в
теплицах и других приспособленных помещениях
небольшой площади»

29. Создаем
дополните
льную
страницу с
содержани
ем книги
Возврат на предыдущую страницу
<div class="t-center"><a href="{$config['sitelink']}/book1.html"
title="">Вернуться</a></div><br><br>

30. Дополнительная страница со
скролингом

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

32. Файл стилей
.main {width:560px; height:496px; font-family:Verdana, Arial, Helvetica, sans-serif;
background:url(images/box.gif); color:#000;}
#text { overflow: auto; height:495px; }
#text p {margin:0 auto; width:480px; }
#text p.red {margin:0 auto; width:480px; color: red; }
#text h2 {font-size:30px; padding:20px 0 20px 30px}
#text img {margin:50px 0 0 65px}
#text a { color:#A1E062}
Корректируем:
.main {width:560px; height:496px; font-family:Verdana, Arial, Helvetica,
sans-serif; background:url(images/box.gif); color:#000;}
#text { overflow: auto; height:475px; padding: 10px 20px; }
#text p {margin:5px 0 18px; }
#text p.red { color: red; }
#text h2 {font-size:24px; padding:20px 0 20px 0;}
#text img {margin:50px 0 0 65px}
#text a { color:#A1E062}
#text a.sdvig { float: right; color:#A1E062; padding: 10px;}

33. Корректир
уем
страницу –
добавляе
м класс
ссылки
<a class="sdvig"
href="{$config['sitelink']}/book1.html"
title="">Вернуться</a></div><br><br>

34. Страницы выглядят теперь так:

35. Страницы выглядят теперь так:

36. Добавляем
ссылки на
странице
Книги <a href="{$config['sitelink']}/book0.html" title=""><img
src="{$config['sitelink']}/i/gribi-v-sadu.jpg" alt="Грибы в
саду" height="90" style="float: right; margin: 0px 30px 0px
30px;"></a>
<a href="{$config['sitelink']}/book0.html"
title="">Грибы в саду</a>

37. Теперь страница каталог Книги с
активными ссылками – тизер и название

38. Дополнительный блок
- Вставляется в отдельный файл blocks.inc.php , а
на шаблоне (файл design-ecodacha.inc) -
переменная-ссылка на блок,
- Стиль блока описывается в файле стилей
style.css,
- Может показываться при показе ряда контентных
страниц по выбору, или на всех страницах,
- Используется для : форм подписки, рекламы,
новостей и др.,
- Фактически это второе контентное окно на
странице,
- Дополнительных блоков может быть любое
количество.

39. Добавим фрагмент с описанием дополнительного блока
Новости в blocks.inc.php
<?php
# Дополнительные блоки данных
# Добавляйте сколько угодно. Не забудьте вставить переменную в design.inc.php или на
страницу в папке content/
$block = '<p class="important">Это пример дополнительного блока из файла
<strong>template/blocks.inc.php</strong>.</p>
<p>Детальное описание установки и структуры на оффсайте <a href="http://microtext.info"
title="Оффсайт проекта">microText</a>.</p>';
$news = '
<div id="news">
<h2>Новости</h2>
<p>Текст новостей</p>
</div>';
Добавляем переменную $news в шаблон design-ecodacha.inc
<?php echo $news;?>
А в файле стилей опишем этот блок (скопируем основные стили
из техт и подкорректируем):
#news { overflow: auto; width: 520px; height:150px; padding: 10px 20px; margin:10px 0 18px;
background: #99ff99; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius:
10px; }
#news p {margin:5px 0 18px; color: #000; }
#news h2 {font-size:20px; padding:20px 0 20px 0; color: #000;}
#news a { color:#A1E062}

40. Дополнительный блок на шаблоне

41. Корректировка новостей – файл blocks.inc.php –
в БЛОКНОТЕ, потом на сервер – по ФТП
<?php
# Дополнительные блоки данных
# Добавляйте сколько угодно. Не забудьте вставить переменную в
design.inc.php или на страницу в папке content/
$block = '<p class="important">Это пример дополнительного блока из файла
<strong>template/blocks.inc.php</strong>.</p>
<p>Детальное описание установки и структуры на оффсайте <a
href="http://microtext.info" title="Оффсайт проекта">microText</a>.</p>';
$news = '
<div id="news">
<h2>Новости</h2>
<p>21.11.12 На сайте Экодача установлены первые формы для заказа
товаров.</p>
<p>16.11.12 На сайте Экодача добавлена форма обратной связи.</p>
<p>14.11.12 На сайте Экодача добавлены первые страницы.</p>
</div>';

42. Блок Новости

43. Домашнее задание:
1. Структурировать каталог товаров – выделить
группы и категории, и спланировать, как они
будут отображаться.
2. Создать для своего сайта 1 страницу с каталогом
и 2-3 страницы с товарами (можно пока только
текст, без формы заказа).
3. Установить ссылки между страницами, используя
Управление меню или прямые ссылки.
4. Создать на шаблоне дополнительный блок для
новостей.
5. Подготовить 1-2 статьи для работы с
комментариями .

44. Следующее занятие – 23 ноября,
Продолжаем тему 5. Проектирование и создание
своего информационного ресурса.
 Вебинар и практикум «Некоторые
полезные технические моменты по работе
с сайтом на микротексте» - форма
размещения комментариев к странице,
секретные страницы .
 Индивидуальные консультации.

45. Опанасенко Ольга
Владимировна
Тел. 067 460 24 00
Web: http://opanasenko.org
E-mail: olga@opanasenko.org
Skype: OLGAOOV
Twitter: OLGAOOV