SlideShare a Scribd company logo

Trening modul2-webinar12

•
•
O
olgaoov

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

1 of 49
Интернет-тренинг Тема5 Проектирование и создание своего информационного ресурса.
Домашнее задание по проекту? 1. Протестировать название проекта – при необходимости – скорректировать. 2. Написать устав проекта – цель, портрет целевой аудитории, сроки, способ реализации. 3. Протестировать целевую аудиторию и перечислить места ее «тусовок» в интернет. 4. Продумать, разработать и подобрать атрибуты проекта : логотип, слоган, доменное имя. 5. Пос��отреть шаблоны и выбрать для своего проекта. 6. Разработать ментальную карту своего проекта.
Домашнее задание: 1. Создать свой сайт на микротексте в папке на моем хостинге. 2. Подобрать шаблон. 3. Глядя на шаблон разработать структуру сайта, меню. 4. Натянуть шаблон дизайна на сайт. 5. Индивидуальный режим – в скайпе.
Вебинар 12. «Некоторые полезные технические моменты по работе с сайтом на микротексте Microtext»
Интернет-проект на базе сайта посетители посетители посетители Аккаунты Сайты- Блоги в соцсетях сателиты Посетители Сайт База контактов заявки информация продажи
Практикум 12 Проектирование и создание сайта на Microtext и подобранном шаблоне. Часть 3. Некоторые полезные технические моменты по работе с сайтом на микротексте- страницы контента.
Заполнение контента 1. Графика для страниц контента. 2. Заполнение страниц. 3. Настройка ссылок в меню на готовые страницы. 4. Настройка скролинга. 5. Корректировка стиля. 6. Настройка формы обратной связи.
Графика для страниц контента 1. Формат фотографий и рисунков для страниц сайта – jpeg, jpg, gif. Если формат другой – нужно преобразовать. 2. Размер фотографий в дюймах, см или точках. 3. Разрешающая способность. 4. Размер файла фотографии в байтах. 5. Для размещения на сайте часто нужно иметь фотографии большего и меньшего размера.
Преобразование фотографий и рисунков для размещения на сайте Исходная фотография Уменьшенная фотография в 10раз
Фотографии для сайта большая Маленькая (50% от большой)
Добавляем на сайт новую страницу по выращиванию грибов GRIBI
Новая страница
Помещаем фотографии в библиотеку /i
Вставляем фотографию на новую страницу <img src="{$config['sitelink']}/i/gribi1-1.jpg" alt="Плодоносящие грибные блоки">
Страница с фотографией
Вставляем новую страницу Delo
Новая страница – маленькие фотографии
Корректируем меню – опции и вставляем ссылки на страницу Delo
Новое меню
Создаем новую страницу Pigs <img src="{$config['sitelink']}/i/pigs1-2.jpg" alt="Корейские свинки" align="right" hspace="5" vspace="5">
Новая страница
Создаем новую страницу Dogs <img src="{$config['sitelink']}/i/dogs1-2.jpg" alt="Щенки лаек" height="180" align="left" hspace="10">
Новая страница
Вставляем стиль прямо в команду img <img src="{$config['sitelink']}/i/dogs1-2.jpg" alt="Щенки лаек" style="float: left; margin: 10px 30px 30px 30px;">
Отступы : стиль margin Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента: margin: [значение | проценты | auto] {1,4} | inherit В файле стилей : #text img {margin:50px 0 0 65px} Мы задали для этого тега: margin: 10px 30px 30px 30px <img src="{$config['sitelink']}/i/dogs1-2.jpg" alt="Щенки лаек" style="float: left; margin: 10px 30px 30px 30px;"> (отступы ��верху, справа, снизу, слева)
Теперь страница выглядит так
Вставляем на странице Delo ссылки на новые страницы Gribi, Pigs, Dogs <a href="{$config['sitelink']}/gribi.html" title="Грибы">Выращивание грибов</a>> <a href="{$config['sitelink']}/pigs.html" title="Свинки">Разведение корейских свинок </a> <a href="{$config['sitelink']}/dogs.html" title="Лайки">Питомник собак лаек</a>
Горячие кнопки
Вставляем относительные ссылки php в наш шаблон на html
Уже работают ссылки первой колонки
Текст страницы не помещается в поле контента
Фрагмент файла стилей style.css, описывающий область контента /* content */ #content { width:880px ; margin:0 auto; } .main {width:560px; height:496px; font- family:Verdana, Arial, Helvetica, sans-serif; background:url(images/box.gif); color:#000;} #text { } #text p {margin:0 auto; width:480px; } #text h2 {font-size:30px; padding:20px 0 20px 30px} #text img {margin:50px 0 0 65px} #text a { color:#A1E062}
Добавляем скролинг контента в файл стилей style.css и копируем на сервер по ФТП /* content */ #content { width:880px ; margin:0 auto; } .main {width:560px; height:496px; font- family:Verdana, Arial, Helvetica, sans-serif; background:url(images/box.gif); color:#000; overflow:auto;} #text { } #text p {margin:0 auto; width:480px; } #text h2 {font-size:30px; padding:20px 0 20px 30px} #text img {margin:25px 5px 5 px 30px} #text a { color:#A1E062}
Теперь в поле контента работает скролинг
Фрагмент файла стилей style.css, описывающий область контента – добавляем класс Red для параграфов – тег р /* content */ #content { width:880px ; margin:0 auto; } .main {width:560px; height:496px; font- family:Verdana, Arial, Helvetica, sans-serif; background:url(images/box.gif); color:#000;} #text { } #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}
Вставляем тег Р с классом <p class="red">
Использование класса стиля для параграфа
Подключаем страницу Контакты – это нешаблонная страница, находим в папке Content , корректируем и загружаем по ФТП добавляем
Добавляем ссылку на страницу Контакты в главное и нижнее меню
Страница Контакты
Корректируем форму отправки сообщений – размер области – файл template / email / form.inc.php Заменяем на <textarea name="text" cols="55" rows="10"><?= (isset($form['text'])) ? $form['text'] : '' ?></textarea>
Теперь страница Контакты выглядит так
Файл config.inc.php - настраиваем отправку сообщений с сайта на наш электронный адрес Защита от спама - вставляем любую уникальную комбинацию ��ифр и символов Вставляем свой электронный адрес
Мои значения
Отправляем сообщение
Получаю письмо. Тему нужно исправить!!!
Домашнее задание: 1. Создать для своего сайта страницы контента, вставить фотографии и рисунки, предварительно загрузив их в папку I . 2. Скорректировать ссылки в меню на готовые страницы. 3. Настроить страницу Контакты и форму обратной связи. Найдите, где нужно исправить тему письма.
Следующее занятие – 21 ноября, Продолжаем тему 5. Проектирование и создание своего информационного ресурса.  Вебинар и практикум «Некоторые полезные технические моменты по работе с сайтом на микротексте» - страницы продажи товаров, блок Новости, форма размещения комментариев к странице .  Индивидуальные консультации.
Опанасенко Ольга Владимировна Тел. 067 460 24 00 Web: http://opanasenko.org E-mail: olga@opanasenko.org Skype: OLGAOOV Twitter: OLGAOOV

More Related Content

Trening modul2-webinar12

  • 1. Интернет-тренинг Тема5 Проектирование и создание своего информационного ресурса.
  • 2. Домашнее задание по проекту? 1. Протестировать название проекта – при необходимости – скорректировать. 2. Написать устав проекта – цель, портрет целевой аудитории, сроки, способ р��ализации. 3. Протестировать целевую аудиторию и перечислить места ее «тусовок» в интернет. 4. Продумать, разработать и подобрать атрибуты проекта : логотип, слоган, доменное имя. 5. Посмотреть шаблоны и выбрать для своего проекта. 6. Разработать ментальную карту своего проекта.
  • 3. Домашнее задание: 1. Создать свой сайт на микротексте в папке на моем хостинге. 2. Подобрать шаблон. 3. Глядя на шаблон разработать структуру сайта, меню. 4. Натянуть шаблон дизайна на сайт. 5. Индивидуальный режим – в скайпе.
  • 4. Вебинар 12. «Некоторые полезные технические моменты по работе с сайтом на микротексте Microtext»
  • 5. Интернет-проект на базе сайта посетители посетители посетители Аккаунты Сайты- Блоги в соцсетях сателиты Посетители Сайт База контактов заявки информация продажи
  • 6. Практикум 12 Проектирование и создание сайта на Microtext и подобранном шаблоне. Часть 3. Некоторые полезные технические моменты по работе с сайтом на микротексте- страницы контента.
  • 7. Заполнение контента 1. Графика для страниц контента. 2. Заполнение страниц. 3. Настройка ссылок в меню на готовые страницы. 4. Настройка скролинга. 5. Корректировка стиля. 6. Настройка формы обратной связи.
  • 8. Графика для страниц контента 1. Формат фотографий и рисунков для страниц сайта – jpeg, jpg, gif. Если формат другой – нужно преобразовать. 2. Размер фотографий в дюймах, см или точках. 3. Разрешающая способность. 4. Размер файла фотографии в байтах. 5. Для размещения на сайте часто нужно иметь фотографии большего и меньшего размера.
  • 9. Преобразование фотографий и рисунков для размещения на сайте Исходная фотография Уменьшенная фотография в 10раз
  • 10. Фотографии для сайта большая Маленькая (50% от большой)
  • 11. Добавляем на сайт новую страницу по выращиванию грибов GRIBI
  • 14. Вставляем фотографию на новую страницу <img src="{$config['sitelink']}/i/gribi1-1.jpg" alt="Плодоносящие грибные блоки">
  • 17. Новая страница – маленькие фотографии
  • 18. Корректируем меню – опции и вставляем ссылки на страницу Delo
  • 20. Создаем новую страницу Pigs <img src="{$config['sitelink']}/i/pigs1-2.jpg" alt="Корейские свинки" align="right" hspace="5" vspace="5">
  • 22. Создаем новую страницу Dogs <img src="{$config['sitelink']}/i/dogs1-2.jpg" alt="Щенки лаек" height="180" align="left" hspace="10">
  • 24. Вставляем стиль прямо в команду img <img src="{$config['sitelink']}/i/dogs1-2.jpg" alt="Щенки лаек" style="float: left; margin: 10px 30px 30px 30px;">
  • 25. Отступы : стиль margin Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента: margin: [значение | проценты | auto] {1,4} | inherit В файле стилей : #text img {margin:50px 0 0 65px} Мы задали для этого тега: margin: 10px 30px 30px 30px <img src="{$config['sitelink']}/i/dogs1-2.jpg" alt="Щенки лаек" style="float: left; margin: 10px 30px 30px 30px;"> (отступы сверху, справа, снизу, слева)
  • 27. Вставляем на странице Delo ссылки на новые страницы Gribi, Pigs, Dogs <a href="{$config['sitelink']}/gribi.html" title="Грибы">Выращивание грибов</a>> <a href="{$config['sitelink']}/pigs.html" title="Свинки">Разведение корейских свинок </a> <a href="{$config['sitelink']}/dogs.html" title="Лайки">Питомник собак лаек</a>
  • 30. Уже работают ссылки первой колонки
  • 31. Текст страницы не помещается в поле контента
  • 32. Фрагмент файла стилей style.css, описывающий область контента /* content */ #content { width:880px ; margin:0 auto; } .main {width:560px; height:496px; font- family:Verdana, Arial, Helvetica, sans-serif; background:url(images/box.gif); color:#000;} #text { } #text p {margin:0 auto; width:480px; } #text h2 {font-size:30px; padding:20px 0 20px 30px} #text img {margin:50px 0 0 65px} #text a { color:#A1E062}
  • 33. Добавляем скролинг контента в файл стилей style.css и копируем на сервер по ФТП /* content */ #content { width:880px ; margin:0 auto; } .main {width:560px; height:496px; font- family:Verdana, Arial, Helvetica, sans-serif; background:url(images/box.gif); color:#000; overflow:auto;} #text { } #text p {margin:0 auto; width:480px; } #text h2 {font-size:30px; padding:20px 0 20px 30px} #text img {margin:25px 5px 5 px 30px} #text a { color:#A1E062}
  • 34. Теперь в поле контента работает скролинг
  • 35. Фрагмент файла стилей style.css, описывающий область контента – добавляем класс Red для параграфов – тег р /* content */ #content { width:880px ; margin:0 auto; } .main {width:560px; height:496px; font- family:Verdana, Arial, Helvetica, sans-serif; background:url(images/box.gif); color:#000;} #text { } #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}
  • 36. Вставляем тег Р с классом <p class="red">
  • 38. Подключаем страницу Контакты – это нешаблонная страница, находим в папке Content , корректируем и загружаем по ФТП добавляем
  • 39. Добавляем ссылку на страницу Контакты в главное и нижнее меню
  • 41. Корректируем форму отправки сообщений – размер области – файл template / email / form.inc.php Заменяем на <textarea name="text" cols="55" rows="10"><?= (isset($form['text'])) ? $form['text'] : '' ?></textarea>
  • 43. Файл config.inc.php - настраиваем отправку сообщений с сайта на наш электронный адрес Защита от спама - вставляем любую уникальную комбинацию цифр и символов Вставляем свой электронный адрес
  • 47. Домашнее задание: 1. Создать для своего сайта страницы контента, вставить фотографии и рисунки, предварительно загрузив их в папку I . 2. Скорректировать ссылки в меню на готовые страницы. 3. Настроить страницу Контакты и форму обратной связи. Найдите, где нужно исправить тему письма.
  • 48. Следующее занятие – 21 ноября, Продолжаем тему 5. Проектирование и создание своего информационного ресурса.  Вебинар и практикум «Некоторые полезные технические моменты по работе с сайтом на микротексте» - страницы продажи товаров, блок Новости, форма размещения комментариев к странице .  Индивидуальные консультации.
  • 49. Опанасенко Ольга Владимировна Тел. 067 460 24 00 Web: http://opanasenko.org E-mail: olga@opanasenko.org Skype: OLGAOOV Twitter: OLGAOOV