Trening modul2-conf1-tema5

296 views

Published on

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

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
296
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Trening modul2-conf1-tema5

  1. 1. Интернет-тренинг Тема5Проектирование и создание своего информационного ресурса.
  2. 2. КонференцияПредставляем и обсуждаем наработки по сайтам участников проекта.
  3. 3. Рабочие моменты:1. При подборе шаблонов – выбирать шаблоны HTML CSS.2. Файл стилей может иметь другое имя, но расширение – CSS.3. При копировании шаблона обязательно копировать графику – библиотеку images – для вставки своей графики нужно знать параметры исходных фотографий.4. Меню корректировать желательно через Управление меню, и только если меню не хватает – через файл menu.inc.php, при этом следить за синтаксисом – ошибки чреваты зависанием сайта.5. При вставке ссылок в меню желательно пока нет страниц поставить ссылку на главную – index. Если в меню есть опция – Главная – то эта ссылка тут и останется. Часто опцию Главная не включают в меню, а на нее попадают при первом входе и при клике на логотип (нужно настроить тизерную ссылку). Страницу index обязательно нужно оставить в списке страниц, но поменять название и ввести свой текст.
  4. 4. http://opanasenko.org/microtext/ecodacha/
  5. 5. Сайт Натальиhttp://opanasenko.org/microtext/magneto- rus/
  6. 6. Исходный шаблон
  7. 7. Сайт Евгенияhttp://opanasenko.org/microtext/leo/
  8. 8. Выбранный шаблон
  9. 9. Взят за основу шаблон
  10. 10. Сравним шаблоны- фон иобласть сайта:Экодача – фон- белый, область сайта – рисунок по размеру области,Область контента –Область горячих точек -
  11. 11. Сравним шаблоны- фон иобласть сайта:Гармония и здоровье –фон- белый + повторяющийся рисунок в верхней части - , потом изменили наВся область сайта – по умолчанию белая
  12. 12. Сравним шаблоны- фон иобласть сайта:LED – светодиодные технологии –фон-черный, повторяющийся рисунокОбласть сайта –блочнаяОбласть контента – повторяющийся рисунок серой линииНижняя область – рисунок на всю ширину
  13. 13. Сравним шаблоны- титульнаячасть сайта: ЭкодачаМесто для рисунка логотипа в стиле небыло предусмотрено – добавлено поверхшаблона, описано только название и слоган - шрифт, цвет, смещение от границ слева исверху
  14. 14. Сравним шаблоны- титульная частьсайта: Гармония и здоровье исходный результатШаблоном было предусмотрено место то для рисункакартинки, названия и слогана.Добавлено- логотип на картинку
  15. 15. Сравним шаблоны- титульная часть сайта: LED – светодиодные технологии исходный результатШаблоном было предусмотрено место то для рисунка и логотипа сназванием-картинкой.Добавлена- картинка меньшего размера с выбранного шаблона,название на картинке логотипа, картинка со слоганом, и картинка-заготовка для бегущей строки.
  16. 16. Сравним шаблоны- область дляглавного меню: ЭкодачаЗадано рисунком:
  17. 17. Сравним шаблоны- область дляглавного меню: Гармония и здровьеНикак не задана – просто часть шаблона
  18. 18. Сравним шаблоны- область дляглавного меню:LED – светодиодные технологии Сложное описание : задана строка фона как повторение рисунка красной линии, к каждому элементу меню добавляется справа вертикальная линия - разделитель
  19. 19. Базовый синтаксис CSSСелектор — это некоторое имя стиля, для которого добавляются параметры форматирования.В качестве селектора выступают теги, классы и идентификаторы.Общий способ записи имеет следующий вид:Селектор { свойство1: значение; свойство2: значение; }
  20. 20. Базовый синтаксис CSSВ качестве селектора может выступать любой тег HTML для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде.Тег { свойство1: значение; свойство2: значение; ... }Пример:p { color: #9D9D9B; font-size: 11px; font-weight: bold; text-decoration: underline;}<p> текст </p>
  21. 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. 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. 23. Базовый синтаксис CSSКроме этого есть:Контекстные селекторыСоседние селекторыДочерние селекторыСелекторы атрибутовУниверсальный селекторПсевдоклассыПсевдоэлементы
  24. 24. Базовый синтаксис CSSИдентификаторыВ коде документа каждый идентификатор уникален и должен быть включён лишь один раз.Имя идентификатора чувствительно к регистру.Через метод getElementById можно получить доступ к элементу по его идентификатору и изменить свойства элемента – используются для скриптов.Стиль для идентификатора имеет приоритет выше, чем у классов.КлассыКлассы могут использоваться в коде неоднократно.Имена классов чувствительны к регистру.Классы можно комбинировать между собой, добавляя несколько классов к одному тегу.
  25. 25. Важно для описания дизайна :Тег <div>  - блочный элемент, выделяет фрагмент документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.Синтаксис<div>...</div>Пример из файлов дизайна: <div id="top"> <h2>Информация-продукты и услуги</h2> <ul class=" meun " > <?php echo GetMenuItems($this_page, $sidemenu1);?> </ul> </div>
  26. 26. Результат невнимательной корректировки –нарушена вложенность <div
  27. 27. Исправлена вложенность
  28. 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. 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. 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. 31. Рекомендации по корректировкестиля контента на шаблоне1. Найдите в файле стилей фрагмент, который описывает стиль блока контента.2. Проверьте, как будет выглядеть текст с использованием базового шаблона. Используйте классы, если они описаны.3. Если стиль текста – в выделенном фрагменте (есть идентификатор) – дополните и подкорректируйте его.4. Если это общее описание – создайте такой блок (введите идентификатор) или просто опишите стиль нужных тегов с классом.5. Используйте эти классы, когда будете заполнять страницы контента.6. Желательно назвать классы для контента одинаково или созвучным наименованием.7. Добавлять и править стиль текста можно минимум – только то, что Вас не устраивает!
  32. 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. 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. 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. 35. Для каких тегов контентажелательно описать классCсылки:С правой ориентацией, подчеркиванием, утолщением и выделением цветом :a.text_right { color: #9D9D9B; font-size: 11px; font-weight: bold; text-decoration: underline; float: right; }Тогда в тексте страницы будет<a class=“text_right” ..........>
  36. 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. 37. Корректировка контента <a class="sdvig" href="{$config[sitelink]}/book1-s.html" title=""> Содержание книги</a><br>
  38. 38. Домашнее задание :Заполнить основные страницы контента – пока без форм. Использовать Управление страницами.При необходимости внести корректировки в файл стилей.
  39. 39. Следующее занятие – 30ноября,Конференция. Обсуждаемсайты участников проекта.Заполнение страниц контента ирекомендации по корректировкестиля контента.
  40. 40. Опанасенко ОльгаВладимировнаТел. 067 460 24 00Web: http://opanasenko.orgE-mail: olga@opanasenko.orgSkype: OLGAOOVTwitter: OLGAOOV

×