Интернет-тренинг            Тема5Проектирование и создание своего   информационного ресурса.
КонференцияПредставляем и обсуждаем   наработки по сайтам    участников проекта.
Рабочие моменты:1.   При подборе шаблонов – выбирать шаблоны HTML CSS.2.   Файл стилей может иметь другое имя, но расширен...
http://opanasenko.org/microtext/ecodacha/
Сайт Натальиhttp://opanasenko.org/microtext/magneto-  rus/
Исходный шаблон
Сайт Евгенияhttp://opanasenko.org/microtext/leo/
Выбранный шаблон
Взят за основу шаблон
Сравним шаблоны- фон иобласть сайта:Экодача – фон- белый, область сайта –  рисунок по размеру области,Область контента –Об...
Сравним шаблоны- фон иобласть сайта:Гармония и здоровье –фон- белый + повторяющийся рисунок в  верхней части - , потом изм...
Сравним шаблоны- фон иобласть сайта:LED – светодиодные технологии –фон-черный, повторяющийся рисунокОбласть сайта –блочная...
Сравним шаблоны- титульнаячасть сайта: ЭкодачаМесто для рисунка логотипа в стиле небыло предусмотрено – добавлено поверхша...
Сравним шаблоны- титульная частьсайта: Гармония и здоровье                                              исходный          ...
Сравним шаблоны- титульная часть сайта:  LED – светодиодные технологии                                                    ...
Сравним шаблоны- область дляглавного меню: ЭкодачаЗадано рисунком:
Сравним шаблоны- область дляглавного меню: Гармония и здровьеНикак не задана – просто часть шаблона
Сравним шаблоны- область дляглавного меню:LED – светодиодные технологии Сложное описание : задана строка фона как повторен...
Базовый синтаксис CSSСелектор — это некоторое имя стиля, для  которого добавляются параметры  форматирования.В качестве се...
Базовый синтаксис CSSВ качестве селектора может выступать любой тег   HTML для которого определяются правила   форматирова...
Базовый синтаксис CSSКлассы применяют, когда необходимо определить   стиль для индивидуального элемента веб-   страницы ил...
Базовый синтаксис CSSИдентификатор («ID селектор») определяет уникальное имя    элемента, которое используется для изменен...
Базовый синтаксис CSSКроме этого есть:Контекстные селекторыСоседние селекторыДочерние селекторыСелекторы атрибутовУниверса...
Базовый синтаксис CSSИдентификаторыВ коде документа каждый идентификатор уникален и   должен быть включён лишь один раз.Им...
Важно для описания дизайна :Тег <div>  - блочный элемент, выделяет фрагмент   документа с целью изменения вида содержимого...
Результат невнимательной корректировки –нарушена вложенность <div
Исправлена вложенность
Описание стиля контента на шаблонеЭкодача- отдельным блоком:.main {width:560px; height:496px; font-   family:Verdana, Aria...
Описание стиля контента нашаблоне Гармония и здровье –вначалеbody { margin: 0px;     padding: 0px;     background: #FFF ur...
Описание стиля контента нашаблоне LED – светодиодные технологии -вначале body {       background: #000000 url(images/main-...
Рекомендации по корректировкестиля контента на шаблоне1.   Найдите в файле стилей фрагмент, который     описывает стиль бл...
Для каких тегов контентажелательно описать классПараграфы:Простой с отступомp.text1 {margin:5px 0 18px; }Выделенный (напри...
Для каких тегов контентажелательно описать классЗаголовки:h2.text1 {font-weight: 300;   color: #2D2D2D;}h3.text1 {font-wei...
Для каких тегов контентажелательно описать классРисунки:С левым обтеканиемimg.text_left {margin:5px 5px 5px 5px; border: 0...
Для каких тегов контентажелательно описать классCсылки:С правой ориентацией, подчеркиванием, утолщением   и выделением цве...
Если в тексте будут спискиul.text1 {margin-top: 0px ; list-style-type: circle}ul.text2 {margin-top: 0px ;    list-style-im...
Корректировка контента   <a class="sdvig" href="{$config[sitelink]}/book1-s.html" title="">                      Содержани...
Домашнее задание :Заполнить основные страницы контента –  пока без форм. Использовать Управление  страницами.При необходим...
Следующее занятие – 30ноября,Конференция. Обсуждаемсайты участников проекта.Заполнение страниц контента ирекомендации по к...
Опанасенко ОльгаВладимировнаТел. 067 460 24 00Web: http://opanasenko.orgE-mail: olga@opanasenko.orgSkype: OLGAOOVTwitter: ...
Upcoming SlideShare
Loading in...5
×

Trening modul2-conf1-tema5

154

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
154
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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

×