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

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

2. Конференция
Представляем и обсуждаем
наработки по сайтам
участников проекта.
Заполнение страниц контента и
рекомендации по корректировке
стиля контента, форма подписки,
блок Новости, Контакты.

3. Рекомендации при заполнении
страниц контента
1. Работать через Админку – добавлять и
корректировать страницы через
Управление страницами.
2. Ссылки на новые страницы добавлять
сразу – через Управление меню.
3. Если предполагается размещение
фотографий и рисунков – предварительно
загрузить их по фтп в папку I .

5. Главная страница. Форматирование
сделано. Где загрузка фотографии?

6. Поле контента:
Код дизайна для поля контента:
<div id="content">
<div id="left"> <span class="flt-lft"><img
src="template/images/thumbnail-1.jpg" alt="Thumbnail" /></span>
<h2><?php echo $title;?></h2>
<?php echo $content;?>
</div>
Описание области контента в файле стилей :
#content {
clear: both;
width: 776px;
background-image: url(images/content-bg.gif);
background-repeat: repeat;

7. Если оставить так, то на всех
страницах контента будут
высвечиваться эти рисунок и
фотография.
Рекомендации :
1. Фотографию перенести в папку I, и убрать с
шаблона дизайна. Вставить ее на главной
страницу как контент.
2. Рисунок – нужен ли? Если да, то
- можно загрузить свою похожую картинку,
например, дополнение к слогану,
- можно сделать несколько картинок с разными
слоганами, и загружать их как дополнительный
блок для разных разделов сайта

8. По фотографиям:

9. Другие фотографии — размер?

10. Размер фотографии уменьшен в 5
раз, размер — в 15 раз. Качество?

11. Куда можно ставить такое
фото?

12. Уменьшение в 5 раз

13. Исходный рисунок шаблона

14. Новый рисунок

15. Рекомендации по преобразованию
фотографий для размещения на
сайте
- размер файла фотографий — не более 50кб,
- размер фотографии — 150-250 пикселей,
- исключение — для панорамных рисунков во
всю ширину экрана, но и для них — размер
файла не более 150 кб,
- если мы уменьшаем размеры рисунка не
редактором, а тегами, то размер файла не
меняется, и рисунок может очень долго
грузится на сайт,
- если мы растягиваем рисунок тегами до
нужного размера, то его качество может
сильно ухудшаться.

16. Название и размещение
рисунков
1. Название фотографий и рисунков — только английские буквы.
2. Регистр расширения фотографии- должен быть строчными
буквами : JPG не сработает, нужно переименовать в jpg.
3. Фотографии и рисунки для шаблона помещаются в Images, для
страниц контента - помещаются в I.
4. Нежелательно делать папки в I – в каждой команде img
придется корректировать ссылку на рисунок. Если этого не
делать – то для всех рисунков контента путь будет один, если
в разных – каждый раз придется корректировать.
5. Задавая путь к рисунку, используйте переменную
{$config['sitelink']}, в таком случае при переносе сайта на
постоянный хостинг не придется править ссылку на рисунок.
6.Систематизируйте рисунки в I по названиям страниц и
размерам, можно использовать нумерацию или мнемонику.

17. Ссылки на рисунки
В шаблоне дизайна используется
относительная ссылка :
<img src="template/images/logo2.jpg"
alt="Logo" >
- относительно корневой страницы вашего
сайта.
Причем эта ссылка используется и для
шаблона, и для первой страницы index,
которая находится в корневой папке.

18. Что делаем - дизайн
В шаблоне дизайна — можно оставить так же
относительную ссылку :
<img src="template/images/logo2.jpg" alt="Logo" >
- относительно корневой страницы вашего сайта.
Можно изменить :
<img
src="{$config['sitelink']}/template/images/logo2.
jpg" alt="Logo" >
Категорически не рекомендуется (хотя работать
будет!):
<img
src="http://opanasenko.org/microtext/magneto
-rus/template/images/logo2.jpg" alt="Logo" >

19. Что делаем — страницы контента
Относительная ссылка работать не будет — наши
фотографии в папке i по другой ветке от корневой
страницы файла.
Нужно использовать переменную {$config['sitelink']} :
<img src="{$config['sitelink']}/i/book1.jpg" alt="" >
Категорически не рекомендуется
<img src="http://opanasenko.org/microtext/magneto-
rus/i/img05.JPG" alt="">
Если оставить папки в i:
<img src="{$config['sitelink']}/i/папка1/book1.jpg" alt=""
>
<img src="{$config['sitelink']}/i/папка2/dogs.jpg" alt="" >

20. Примеры систематизации
названия фотографий в папке i
1. book-1-small.jpg, book-1.jpg,
book-2-small.jpg, book-2.jpg,
book-3-small.jpg, book-3.jpg,.
2. dogs-puma-1.jpg,dogs-puma-2.jpg,
dogs-bek-1.jpg, dogs-bek-1.jpg,
dogs-chenki1-1.jpg, dogs-chenki1-2.jpg,
dogs-chenki2-1.jpg, dogs-chenki2-1.jpg.

21. Файловая структура сайта
Корень сайта
{$config['sitelink']}
Tem
Con File
p
tent I
late s
Ima Ema
ges il

22. Сайт в сайте — результат неправильного
восстановления сайта из папки OLD

23. Переменные microtext — общие —
задаются в config.inc.php- доступны с
дизайна и со всех страниц
Самые главные :
$config['sitelink'] =
'http://opanasenko.org/microtext/magneto-
rus2/' - имя и путь к сайту,
$config['sitename'] = 'Суперлёгкий
движок для сайтов microText' — название
сайта,
$config['slogan'] = 'Идеален для
сайтов-визиток' - слоган сайта,
$config['encoding'] = 'utf-8' —
кодировка сайта.

24. Переменные microtext — общие —
задаются в config.inc.php- доступны с
дизайна и со всех страниц
Логин и пароль для секретных страниц
$config['login'] = 'demo';
$config['password'] = 'demo'
Для отправки сообщений
$config['email']['receiver'] =
'my@neverlex.com'
$config['email']['subject'] = 'Письмо с
сайта «' . $config['sitename'] . '»
$config['form']['feedbackSent'] =
'Сообщение отправлено администратору.
Спасибо!<br>Сейчас вы будете
перенаправлены на главную страницу.' и др.

25. Переменные страницы — доступны
для текущей страницы
$title = 'Электронные книги';
$keywords = 'грибоводство, выращивание
грибов';
$description = 'Электронные книги';
$template = 'design-ecodacha';
# Содержание страницы
$content = <<<EOF

26. Код страницы
переменные

27. Эта же
страница в
админке
переменные

28. Ошибки при заполнении страниц
контента - забываете
корректировать дизайн
страницы!
По умолчанию принимается дизайн
микротекста.
Разные страницы могут иметь разный
дизайн.

29. Назначение дизайна

30. Переменные microtext — блоки —
задаются в block.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>';

31. Корректировка файла
дизайна и файла стилей
Добавление блока в дизайн
<?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:24px; padding:20px 0 20px 0; color:
#000;}
#news img {margin:50px 0 0 65px;}
#news a { color:#A1E062}

32. Поставлен блок
Новости и форма
подписки

33. Где будем ставить Новости и форму подписки?

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

35. Следующее занятие – 7 декабря,
Конференция. Обсуждаем
сайты участников проекта.
Заполнение страниц контента и
рекомендации по корректировке
стиля контента, форма подписки,
блок Новости, Контакты.

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