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

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

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

3. Рабочие моменты:
1. При подборе шаблонов – выбирать шаблоны HTML CSS.
2. Файл стилей может иметь другое имя, но расширение
– CSS.
3. При копировании шаблона обязательно копировать
графику – библиотеку images – для вставки своей
графики нужно знать параметры исходных
фотографий.
4. Меню корректировать желательно через Управление
меню, и только если меню не хватает – через файл
menu.inc.php, при этом следить за синтаксисом –
ошибки чреваты зависанием сайта.
5. При вставке ссылок в меню желательно пока нет
страниц поставить ссылку на главную – index. Если в
меню есть опция – Главная – то эта ссылка тут и
останется. Часто опцию Главная не включают в меню,
а на нее попадают при первом входе и при клике на
логотип (нужно настроить тизерную ссылку).
Страницу index обязательно нужно оставить в списке
страниц, но поменять название и ввести свой текст.

4. http://opanasenko.org/microtext/ecodacha/

5. Сайт Натальи
http://opanasenko.org/microtext/magneto-
rus/

6. Исходный шаблон

7. Сайт Евгения
http://opanasenko.org/microtext/leo/

8. Выбранный шаблон

9. Взят за основу шаблон

10. Сравним шаблоны- фон и
область сайта:
Экодача – фон- белый, область сайта –
рисунок по размеру области,
Область контента –
Область горячих точек -

11. Сравним шаблоны- фон и
область сайта:
Гармония и здоровье –
фон- белый + повторяющийся рисунок в
верхней части - , потом изменили на
Вся область сайта – по умолчанию белая

12. Сравним шаблоны- фон и
область сайта:
LED – светодиодные технологии –
фон-черный, повторяющийся рисунок
Область сайта –блочная
Область контента – повторяющийся рисунок
серой линии
Нижняя область – рисунок на всю ширину

13. Сравним шаблоны- титульная
часть сайта: Экодача
Место для рисунка логотипа в стиле не
было предусмотрено – добавлено поверх
шаблона, описано только название и слоган
- шрифт, цвет, смещение от границ слева и
сверху

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

15. Сравним шаблоны- титульная часть сайта:
LED – светодиодные технологии
исходный
результат
Шаблоном было предусмотрено место то для рисунка и логотипа с
названием-картинкой.
Добавлена- картинка меньшего размера с выбранного шаблона,
название на картинке логотипа, картинка со слоганом, и картинка-
заготовка для бегущей строки.

16. Сравним шаблоны- область для
главного меню: Экодача
Задано рисунком:

17. Сравним шаблоны- область для
главного меню: Гармония и здровье
Никак не задана – просто часть шаблона

18. Сравним шаблоны- область для
главного меню:
LED – светодиодные технологии
Сложное описание : задана строка фона как повторение
рисунка красной линии, к каждому элементу меню
добавляется справа вертикальная линия - разделитель

19. Базовый синтаксис CSS
Селектор — это некоторое имя стиля, для
которого добавляются параметры
форматирования.
В качестве селектора выступают теги,
классы и идентификаторы.
Общий способ записи имеет следующий вид:
Селектор { свойство1: значение; свойство2:
значение; }

20. Базовый синтаксис CSS
В качестве селектора может выступать любой тег
HTML для которого определяются правила
форматирования, такие как: цвет, фон, размер и
т.д. Правила задаются в следующем виде.
Тег { свойство1: значение; свойство2: значение; ... }
Пример:
p { color: #9D9D9B;
font-size: 11px;
font-weight: bold;
text-decoration: underline;}
<p> текст </p>

21. Базовый синтаксис CSS
Классы применяют, когда необходимо определить
стиль для индивидуального элемента веб-
страницы или задать разные стили для одного
тега. При использовании совместно с тегами
синтаксис для классов будет следующий.
Тег.Имя класса { свойство1: значение; свойство2:
значение; ... }
Пример:
p.1 { color: #9D9D9B;
font-size: 11px;
font-weight: bold;
text-decoration: underline;}
<p class=“1“> текст формата класса 1</p>
<p > обычный текст</p>

22. Базовый синтаксис CSS
Идентификатор («ID селектор») определяет уникальное имя
элемента, которое используется для изменения его стиля и
обращения к нему через скрипты.
Синтаксис применения идентификатора .
#Имя идентификатора { свойство1: значение; свойство2:
значение; ... }
Идентификаторы должны быть уникальны - встречаться в коде
документа только один раз.
Обращение к идентификатору происходит аналогично классам, но в
качестве ключевого слова у тега используется параметр id,
значением которого выступает имя идентификатора Символ
решетки при этом уже не указывается.
Пример:
#nav { color: #9D9D9B;
font-size: 11px;
font-weight: bold;
text-decoration: underline;}
<p id=“nav“> уникальный текст </p>
<p > обычный текст</p>

23. Базовый синтаксис CSS
Кроме этого есть:
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

24. Базовый синтаксис CSS
Идентификаторы
В коде документа каждый идентификатор уникален и
должен быть включён лишь один раз.
Имя идентификатора чувствительно к регистру.
Через метод getElementById можно получить доступ к
элементу по его идентификатору и изменить
свойства элемента – используются для скриптов.
Стиль для идентификатора имеет приоритет выше,
чем у классов.
Классы
Классы могут использоваться в коде неоднократно.
Имена классов чувствительны к регистру.
Классы можно комбинировать между собой,
добавляя несколько классов к одному тегу.

25. Важно для описания дизайна :
Тег <div> - блочный элемент, выделяет фрагмент
документа с целью изменения вида содержимого. Как
правило, вид блока управляется с помощью стилей.
Чтобы не описывать каждый раз стиль внутри тега,
можно выделить стиль во внешнюю таблицу стилей, а
для тега добавить атрибут class или id с именем
селектора.
Синтаксис
<div>...</div>
Пример из файлов дизайна:
<div id="top">
<h2>Информация-продукты и услуги</h2>
<ul class=" meun " >
<?php echo GetMenuItems($this_page, $sidemenu1);?>
</ul>
</div>

26. Результат невнимательной корректировки –
нарушена вложенность <div

27. Исправлена вложенность

28. Описание стиля контента на шаблоне
Экодача- отдельным блоком:
.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;}

29. Описание стиля контента на
шаблоне Гармония и здровье –вначале
body { margin: 0px;
padding: 0px;
background: #FFF url(images/img011.jpg) repeat-x;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #8C8C8C; }
h1, h2, h3 { margin: 0;
padding: 0;
text-transform: uppercase;
font-weight: 300;
font-family: 'Open Sans Condensed', sans-serif;
color: #2D2D2D;}
h2 { padding: 0px 0px 30px 0px;
font-size: 2.50em;}
p, ol, ul { margin-top: 0px;}
p { line-height: 180%;}
a { color: #861004;}
a:hover { text-decoration: none;}
a img {border: none;}
img.alignleft {float: left;}
img.alignright { float: right;}
img.aligncenter { margin: 0px auto;}

30. Описание стиля контента на
шаблоне LED – светодиодные технологии -
вначале
body { background: #000000 url(images/main-bg.gif) repeat-x;
color: #7F7F7F;
font-family: tahoma, arial;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: center;}
img { border: 0px;}
a:link { color: #9D9D9B;
font-size: 11px;
font-weight: bold;
text-decoration: underline;}
a:visited { color: #9D9D9B;
font-size: 11px;
font-weight: bold;
text-decoration: underline;}
a:hover, a:active { color: #FFFFFF;
font-size: 11px;
font-weight: bold;
text-decoration: none;}

31. Рекомендации по корректировке
стиля контента на шаблоне
1. Найдите в файле стилей фрагмент, который
описывает стиль блока контента.
2. Проверьте, как будет выглядеть текст с
использованием базового шаблона. Используйте
классы, если они описаны.
3. Если стиль текста – в выделенном фрагменте (есть
идентификатор) – дополните и подкорректируйте его.
4. Если это общее описание – создайте такой блок
(введите идентификатор) или просто опишите стиль
нужных тегов с классом.
5. Используйте эти классы, когда будете заполнять
страницы контента.
6. Желательно назвать классы для контента одинаково
или созвучным наименованием.
7. Добавлять и править стиль текста можно минимум –
только то, что Вас не устраивает!

32. Для каких тегов контента
желательно описать класс
Параграфы:
Простой с отступом
p.text1 {margin:5px 0 18px; }
Выделенный (например, цветом, фоном и толщиной)
– если нужно
p.text2 {margin:5px 0 18px; color: #7F7F7F;
font-weight: bold; background: #000000 ;... }
Тогда в тексте страницы будет
<p class=“text1”> простой параграф </p>
<p class=“text2”> выделенный параграф </p>

33. Для каких тегов контента
желательно описать класс
Заголовки:
h2.text1 {font-weight: 300; color: #2D2D2D;}
h3.text1 {font-weight: 200; color: #2D2D2D;}
Тогда в тексте страницы будет
<h2 class=“text1”> Заголовок1 </h2 >
<h3 class=“text1”> Заголовок2 </h3 >

34. Для каких тегов контента
желательно описать класс
Рисунки:
С левым обтеканием
img.text_left {margin:5px 5px 5px 5px; border: 0px;
float: left;}
С правым обтеканием
img.text_right {margin:5px 5px 5px 5px; border: 0px;
float: right ;}
Тогда в тексте страницы будет
<img class=“text_left” ..........>
< img class=“text_right” ..........>

35. Для каких тегов контента
желательно описать класс
Cсылки:
С правой ориентацией, подчеркиванием, утолщением
и выделением цветом :
a.text_right { color: #9D9D9B;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
float: right; }
Тогда в тексте страницы будет
<a class=“text_right” ..........>

36. Если в тексте будут списки
ul.text1 {margin-top: 0px ;
list-style-type: circle}
ul.text2 {margin-top: 0px ;
list-style-image: url(images/book.gif }
Тогда в тексте страницы будет
<ul class=“text1”> или
<ul class=“text2”>

37. Корректировка контента
<a class="sdvig" href="{$config['sitelink']}/book1-s.html" title="">
Содержание книги</a><br>

38. Домашнее задание :
Заполнить основные страницы контента –
пока без форм. Использовать Управление
страницами.
При необходимости внести корректировки в
файл стилей.

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

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