• Save
Trening modul2-conf1-tema5
Upcoming SlideShare
Loading in...5
×
 

Trening modul2-conf1-tema5

on

  • 261 views

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

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

Statistics

Views

Total Views
261
Views on SlideShare
232
Embed Views
29

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 29

http://opanasenko.org 29

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Trening modul2-conf1-tema5 Trening modul2-conf1-tema5 Presentation Transcript

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