Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Tег DIV и SPAN. CSS. (Тема 9)

Содержание

СОДЕРЖАНИЕТеги DIV и SPANСвойства и значения CSSВёрстка сайта с использованием тега DIVНовые теги для верстки в HTML5Примеры
Tema 9. Tег DIV и SPAN. CSS. Продолжение СОДЕРЖАНИЕТеги DIV и SPANСвойства и значения CSSВёрстка сайта с использованием тега DIVНовые ОБЩАЯ ИНФОРМАЦИЯ О ТЕГАХ «DIV» и «SPAN»Теги  и , обычно не используются, в одиночку, имея ТЕГ „DIV”В последнее время, один из самых используемых HTML-теговПоддерживается всеми браузерамиИспользуется для ПРИМЕР ИСПОЛЬЗОВАНИЯ „DIV”Pagina cu sectiuni IMAGINI Priviti cu placere ФАЙЛ СО СТИЛЯМИ#cap{ background-color:black; color:white; text-align:center; padding:5px; font-space:5px; font-size:30px; text-shadow: 5px 5px 7px РЕЗУЛЬТАТ ПРИМЕРА ТЕГ „SPAN”Тег  может добавить графические стили определенной части какого-то элемента (in-line)Слова которые необходимо ПОРЯДОК ОТОБРАЖЕНИЯ ЭЛЕМЕНТОВПорядок отображения элементов на странице называется потоком документа – нормальный поток СВОЙСТВА ДЛЯ РАЗМЕЩЕНИЯ HTML -ЭЛЕМЕНТОВСвойства CSS используемые для размещения позволяют контролировать местоположение I – СТАТИЧЕСКОЕ МЕСТОПОЛОЖЕНИЕ position: staticВсе HTML-элементы расположены статически по умолчаниюСтатически расположенный элемент, II – ФИКСИРОВАННОЕ МЕСТОПОЛОЖЕНИЕ position: fixedЭлемент с фиксированной позицией будет расположен в отношении ПРИМЕР „position: fixed”Pozitii elementediv.fix { width:250px; position: fixed; top: 20px; right:20px;}p{color:brown; РЕЗУЛЬТАТ ПРИМЕРА …после прокрутки ПРИМЕР НАКЛАДКИdiv.fix {width:450px;position: fixed; top: 20px; right:20px; }Другой пример III – ОТНОСИТЕЛЬНОЕ МЕСТОПОЛОЖЕНИЕ position: relativeЭлемент расположенный относительно, позиционируется относительно его нормального положения ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: -20px;} ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: 50px; top:-50px;} IV – АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ position: absoluteАбсолютно-расположенный элемент позиционируется относительно первого (родительского) основного элемента, ПРИМЕР АБСОЛЮТНОГО РАСПОЛОЖЕНИЯ div.fix {width:450px; position: absolute;left: 80px; top: 120px;} АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕПо умолчанию «абсолютные» элементы позиционируются в системе координат, привязанной к окну СТИЛИ, блок позиционированный абсолютноbody { margin: 10px; padding: 20px; color: white; border: 1px БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно “body”Если добавить: position: relative; для body:body { margin: 10px; padding: БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно другого относительно позиционированного блокаЕсли добавить: position: relative; другому ПРИМЕНЕНИЕНа практике абсолютное позиционирование часто применяют в декоративных целях, когда нужно аккуратно ПЕРЕКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫКогда элементы расположены вне нормального потока (position: absolute, relative, fixed) они ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВdiv.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: -1;} ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВdiv.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: 1;} ПРИМЕНЕНИЕC помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки. Значением этого свойства может СВОЙСТВО „FLOAT”CSS свойство „float” определяет, как можно сдвинуть элемент (плавающий) влево или НЕКОТОРЫЕ ЗНАЧЕНИЯ СВОЙСТВА „FLOAT” ПРИМЕР СО СВОЙСТВОМ „FLOAT”img{ border: 2px solid #aa0000; height: 110px; width: РЕЗУЛЬТАТ ПРИМЕРАИли когда добавляем еще несколько изображений Другой пример применения свойства „float” Стили для блоков html, body{margin:0; padding:0; }body{ width:400px; height:300px; }.container{ width:300px; margin:0 СВОЙСТВО CLEARСвойство clear запрещает обтекание элемента другими элементами. Его значения:left — запрещено обтекание слеваright — запрещено обтекание ПРИМЕР ПРИМЕНЕНИЯ „CLEAR”.fara_clear { float: left; width: 32px; height: 32px; margin: 10px; border: 3px solid #73AD21; }.text1 РЕЗУЛЬТАТ СВОЙТВА КРАЙОВ ЭЛЕМЕНТАКрая элемента (или внешние поля) означают пространство вокруг элемента (кроме ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВБлок элементов, группированных при помощи DIV-а, могут быть выравнены по РЕЗУЛЬТАТ ПРИМЕРА ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВДругой подход для выравнивания блока элементов это использование свойства «position» ИЗОБРАЖЕНИЯ-SPRITEСпрайт-изображение это то изображение которое состоит из множества маленьких изображенийИногда в сайте ПРИМЕР ИСПОЛЬЗОВАНИЯ СПРАЙТОВ Для этой части страницы „Контакты”Я использовала для украшения ниже изложенное изображение …а для этой части страницы «Контакты»Я использовала другое спрайт-изображение ДЛЯ ПОСЛЕДНЕГО ПРИМЕРАHTML коды: CSS коды:.retele_so .retea { width: 50px; height: 50px;margin: 0px ОБЬЯСНЕНИЯДля каждого div-а определяются 2 классаОпределяется высота и ширина блока div в МОДЕЛЬ „КОРОБКИ” В CSSВсе HTML-элементы можно считать коробками (box)В CSS, понятие «модель ПРИМЕРdiv.imagine{ width: 60%; margin: 25px; border: 25px solid black; border-radius: 25px; padding: 25px; margin-left: Дополнительно, прочтите ВЕРСКА САЙТОВВерстка это процесс преобразования рисунка веб-страницы (например .psd файл) в HTML-документ, РЕКОМЕНДАЦИИ ДЛЯ ВЕРСТКИ СТРАНИЦКонсорциум w3 рекомендует использование div-ов для верткиДополнительно, рекомендуется, при ПРИМЕР ПРИМЕР Header Meniu ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙbody{ font-family:'PT Sans', sans-serif; }.container{ max-width:600px; margin:10px auto; }.block{ padding:10px 0px; margin-bottom:10px; color:#CC0000; }.header ДРУГОЙ ПРИМЕР (чуть поменяли стили)Код HTML остался тот же ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ….column1{ background:rgba(230, 210, 250, 0.4); float:left; max-width:280px; min-height:50px; }.column2{ background:rgba(230, 210, 250, 0.4); float:right; max-width:280px; min-height:50px; }.column3{ background:rgba(230, АДАПТИВНЫЙ ДИЗАЙН (HTML Responsive Web Design)Веб сайт является responsive если его страницы адаптируются АДАПТИВНЫЙ ДИЗАЙН W3.CSSКачественные эффекты достигаются и с помощью W3.CSS - frame-work используемый для адаптивного Пример с применением w3.css W3.CSS .align { text-align: center; valign: middle; } img { РЕЗУЛЬТАТExemplul ВЕРСТКА С ИСПОЛЬЗОВАНИЕМ HTML5В HTML5 появились специальные теги, которые используются для вёрстки сайтаДополнительно: http://www.w3schools.com/html/html5_new_elements.asp ПРИМЕР ИСПОЛЬЗОВАНИЯ HTML5 СТИЛИbody{ font-family:'PT Sans', sans-serif; }main{ max-width:600px; margin:10px auto; }header, nav, section, aside, РЕЗУЛЬТАТ !!!3 понятия выученные сегодня2 вопроса которые возникли сегодня1 предложение для следующей пары
Слайды презентации

Слайд 2 СОДЕРЖАНИЕ
Теги DIV и SPAN
Свойства и значения CSS
Вёрстка сайта

СОДЕРЖАНИЕТеги DIV и SPANСвойства и значения CSSВёрстка сайта с использованием тега

с использованием тега DIV
Новые теги для верстки в HTML5
Примеры

Слайд 3 ОБЩАЯ ИНФОРМАЦИЯ О ТЕГАХ «DIV» и «SPAN»
Теги  и , обычно не

ОБЩАЯ ИНФОРМАЦИЯ О ТЕГАХ «DIV» и «SPAN»Теги  и , обычно не используются, в одиночку,

используются, в одиночку, имея особенные эффекты если они используются

в комбинации с другими HTML-тегами и стилями CSS
Тег DIV создает разделы блоков на странице, формой и графикой, которых можно управлять по отдельности
Тег DIV имеет атрибут align (для выравнивания по горизонтали), который не поддерживается HTML5
Тег SPAN создает возможность изменения части контекста (in-line); может быть использован в качестве "класса" с CSS
Оба тега могут использовать глобальный атрибут style или id или class

Слайд 4 ТЕГ „DIV”
В последнее время, один из самых используемых

ТЕГ „DIV”В последнее время, один из самых используемых HTML-теговПоддерживается всеми браузерамиИспользуется

HTML-тегов
Поддерживается всеми браузерами
Используется для группировки HTML-элементов
В тег DIV-

можно включить любые HTML элементы: таблицы, списки, формы, параграфы текста или другие DIV-ы
Кадр в котором включен DIV может иметь собственный фон (background), ширину, высоту, края с различными линиями и т.д.
Синтаксис:
содержимое

Слайд 5 ПРИМЕР ИСПОЛЬЗОВАНИЯ „DIV”

Pagina cu sectiuni

ПРИМЕР ИСПОЛЬЗОВАНИЯ „DIV”Pagina cu sectiuni IMAGINI Priviti cu placere

/>


IMAGINI




/>



Priviti cu placere




Слайд 6 ФАЙЛ СО СТИЛЯМИ
#cap{
background-color:black;
color:white;
text-align:center;

ФАЙЛ СО СТИЛЯМИ#cap{ background-color:black; color:white; text-align:center; padding:5px; font-space:5px; font-size:30px; text-shadow: 5px 5px 7px #ffcccc;}#corp{ height:46%; width:100%;

padding:5px;
font-space:5px;
font-size:30px;
text-shadow: 5px 5px 7px #ffcccc;}
#corp{ height:46%; width:100%; padding:5px; float: left;

}
#coada{
background-color:black;
color:white;
text-align:center;
padding:5px;
font-variant:small-caps;
text-shadow: 3px 3px 5px #ffcccc;}
img{ border: 2px solid #aa0000; height: 200px; width: 235px;}

Слайд 7 РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 8 ТЕГ „SPAN”
Тег  может добавить графические стили определенной части какого-то

ТЕГ „SPAN”Тег  может добавить графические стили определенной части какого-то элемента (in-line)Слова которые

элемента (in-line)
Слова которые необходимо выделить включаются между и


Основная форма: содержание
В файле со стилями определяются необходимые стили
Пример:
span{color:#ff0000;}

Применяются к следующим кодам:
…

Priviti cu placere


…

Слайд 9 ПОРЯДОК ОТОБРАЖЕНИЯ ЭЛЕМЕНТОВ
Порядок отображения элементов на странице называется потоком

ПОРЯДОК ОТОБРАЖЕНИЯ ЭЛЕМЕНТОВПорядок отображения элементов на странице называется потоком документа – нормальный

документа – нормальный поток документа
Блочные элементы отображаются как

прямоугольные области, идущие друг за другом сверху вниз
Строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку

Слайд 10 СВОЙСТВА ДЛЯ РАЗМЕЩЕНИЯ HTML -ЭЛЕМЕНТОВ
Свойства CSS используемые для

СВОЙСТВА ДЛЯ РАЗМЕЩЕНИЯ HTML -ЭЛЕМЕНТОВСвойства CSS используемые для размещения позволяют контролировать

размещения позволяют контролировать местоположение элементов на странице
Существует возможность размещения

какого-то элемента позади другого, или указать как вывести какой-либо элемент, который имеет большое содержание
Элементы могут быть расположены с использованием свойств: top, bottom, left и right
Эти свойства не будут функциональными если свойство position не будет установлена первой
Имеет значение метод определения местоположения. Существуют четыре различных способа позиционирования HTML-элементов

Слайд 11 I – СТАТИЧЕСКОЕ МЕСТОПОЛОЖЕНИЕ
position: static
Все HTML-элементы расположены статически

I – СТАТИЧЕСКОЕ МЕСТОПОЛОЖЕНИЕ position: staticВсе HTML-элементы расположены статически по умолчаниюСтатически расположенный

по умолчанию
Статически расположенный элемент, постоянно располагается с учётом нормального

потока на странице
Статически расположенные элементы не будут затронуты свойствами top, bottom, left и right

Слайд 12 II – ФИКСИРОВАННОЕ МЕСТОПОЛОЖЕНИЕ
position: fixed
Элемент с фиксированной позицией

II – ФИКСИРОВАННОЕ МЕСТОПОЛОЖЕНИЕ position: fixedЭлемент с фиксированной позицией будет расположен в

будет расположен в отношении с окном браузера
Данный элемент не

будет передвигаться даже если окно прокручивается
Зафиксированные элементы не учитывают нормального потока вывода на странице – не имеет значение какие другие элементы существуют на странице
Элементы с фиксированной позицией могут накладываться на другие элементы

Слайд 13 ПРИМЕР „position: fixed”

Pozitii elemente

div.fix {
width:250px;
position: fixed;

ПРИМЕР „position: fixed”Pozitii elementediv.fix { width:250px; position: fixed; top: 20px; right:20px;}p{color:brown; font-size:20px;}Folosindu-se de vazul remarcabil …spre pisici.

top: 20px;
right:20px;}
p{color:brown; font-size:20px;}


/>

Folosindu-se de vazul remarcabil …spre pisici.




Слайд 14 РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 15 …после прокрутки

…после прокрутки

Слайд 16 ПРИМЕР НАКЛАДКИ
div.fix {width:450px;position: fixed;
top: 20px; right:20px; }
Другой

ПРИМЕР НАКЛАДКИdiv.fix {width:450px;position: fixed; top: 20px; right:20px; }Другой пример

пример

Слайд 17 III – ОТНОСИТЕЛЬНОЕ МЕСТОПОЛОЖЕНИЕ
position: relative
Элемент расположенный относительно, позиционируется

III – ОТНОСИТЕЛЬНОЕ МЕСТОПОЛОЖЕНИЕ position: relativeЭлемент расположенный относительно, позиционируется относительно его нормального

относительно его нормального положения
Содержимое относительно-позиционируемых элементов может быть

перемещено и может перекрывать другие элементы, но пространство, отведенное для элемента в нормальном потоке, сохраняется
Элементы, расположенные относительно, часто используются в качестве блочных контейнеров для абсолютно позиционируемых элементов

Слайд 18 ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ
div.fix {width:450px; position: relative; left:

ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: -20px;}

-20px;}

Слайд 19 ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ
div.fix {width:450px; position: relative; left:

ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: 50px; top:-50px;}

50px; top:-50px;}

Слайд 20 IV – АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ
position: absolute
Абсолютно-расположенный элемент позиционируется относительно

IV – АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ position: absoluteАбсолютно-расположенный элемент позиционируется относительно первого (родительского) основного

первого (родительского) основного элемента, имеющий другой тип позиционирования, чем

статическое
Если нет такого элемента, блок будет позиционироваться по отношению к тегу
Элементы, абсолютно-расположенные, удаляются из нормального потока. Документ и другие элементы ведут себя по отношению к абсолютно- позиционированному элементу как к не существующему
Элементы, абсолютно-расположенные, могут перекрыть другие элементы

Слайд 21 ПРИМЕР АБСОЛЮТНОГО РАСПОЛОЖЕНИЯ
div.fix {
width:450px;
position: absolute;
left: 80px;

ПРИМЕР АБСОЛЮТНОГО РАСПОЛОЖЕНИЯ div.fix {width:450px; position: absolute;left: 80px; top: 120px;}


top: 120px;}

Слайд 22 АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ
По умолчанию «абсолютные» элементы позиционируются в системе

АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕПо умолчанию «абсолютные» элементы позиционируются в системе координат, привязанной к

координат, привязанной к окну браузера. Однако, систему координат можно

изменить
Если какой-нибудь из родителей «абсолютного» элемента имеет относительное позиционирование, то элемент будет позиционироваться относительно этого родителя. Если среди родителей несколько относительно позиционированных элементов, то «абсолютный» элемент будет позиционироваться относительно ближайшего из них

Слайд 23 СТИЛИ, блок позиционированный абсолютно
body { margin: 10px; padding: 20px;

СТИЛИ, блок позиционированный абсолютноbody { margin: 10px; padding: 20px; color: white; border:

color: white; border: 1px dotted #999; }
.block-1 { min-height: 100px;

padding: 10px; background: #3A78A1; }
.block-2 { min-height: 100px; padding: 10px; background: #27AE60; }
.block-absolute { position: absolute;
top: 10px;
right: 10px;
padding: 10px;
font-family: "Courier New", monospace;
font-size: 12px;
background: #E74C3C;
opacity: 0.8; }
Rezultat:

Слайд 24 БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно “body”
Если добавить: position: relative;

БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно “body”Если добавить: position: relative; для body:body { margin:

для body:
body {
margin: 10px;
padding: 20px;
color: white;
border: 1px dotted #999;
position:

relative;
}
Результат:

Слайд 25 БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно другого относительно позиционированного блока
Если

БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно другого относительно позиционированного блокаЕсли добавить: position: relative;

добавить: position: relative; другому блоку:
.block-1 {
min-height: 100px;
padding: 10px;
background: #3A78A1;
position:

relative;
}

Слайд 26 ПРИМЕНЕНИЕ
На практике абсолютное позиционирование часто применяют в декоративных

ПРИМЕНЕНИЕНа практике абсолютное позиционирование часто применяют в декоративных целях, когда нужно

целях, когда нужно аккуратно разместить какие-либо иконки, управляющие элементы

или другие «рюшечки»

Слайд 27 ПЕРЕКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ
Когда элементы расположены вне нормального потока (position:

ПЕРЕКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫКогда элементы расположены вне нормального потока (position: absolute, relative, fixed)

absolute, relative, fixed) они могут перекрывать другие элементы
Свойство «z-index»

указывает порядок выявления элемента (элемент который должен быть размещен в передней части, или за другими элементами)
Элемент может иметь положительный или отрицательный порядок в стеке
Элемент с наибольшем порядке в стеке всегда будет расположен перед элементом с более низким порядком
Свойство «z-index» применимо только для элементов расположенных абсолютно, относительно или фиксировано

Слайд 28 ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВ
div.fix {width:450px; position: absolute; left: 230px;

ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВdiv.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: -1;}

top: 200px; z-index: -1;}

Слайд 29 ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВ
div.fix {width:450px; position: absolute; left: 230px;

ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВdiv.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: 1;}

top: 200px; z-index: 1;}

Слайд 30 ПРИМЕНЕНИЕ
C помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки.

ПРИМЕНЕНИЕC помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки. Значением этого свойства

Значением этого свойства может быть целое число. Чем больше z-index,

тем выше располагается блок
Cвойство z-index работает для элементов, у которых position задано как absolute, fixed и relative
Таким образом, «относительный» элемент может перекрывать «абсолютный»

Слайд 31 СВОЙСТВО „FLOAT”
CSS свойство „float” определяет, как можно сдвинуть

СВОЙСТВО „FLOAT”CSS свойство „float” определяет, как можно сдвинуть элемент (плавающий) влево

элемент (плавающий) влево или вправо, то что позволит другим

элементам его окружить
Свойство „float” часто используется когда вставляются изображения, но так же применяется, и при верстке web-страницы
Элементы „плавают” горизонтально, то что означает что любой элемент можно «сдвинуть» в левую сторону или в правую, но никак нельзя сдвинуть вверх или вниз
Элементы следующие за «плавающем» элементом окружат его
Элементы перед «плавающем» элементом не будут никак затронуты

Слайд 32 НЕКОТОРЫЕ ЗНАЧЕНИЯ СВОЙСТВА „FLOAT”

НЕКОТОРЫЕ ЗНАЧЕНИЯ СВОЙСТВА „FLOAT”

Слайд 33 ПРИМЕР СО СВОЙСТВОМ „FLOAT”
img{ border: 2px solid #aa0000;

ПРИМЕР СО СВОЙСТВОМ „FLOAT”img{ border: 2px solid #aa0000; height: 110px; width: 155px; float: left;} Применяется к следующему элементу:

height: 110px;
width: 155px;
float: left;}

Применяется к следующему

элементу:






Слайд 34 РЕЗУЛЬТАТ ПРИМЕРА
Или когда добавляем еще несколько изображений

РЕЗУЛЬТАТ ПРИМЕРАИли когда добавляем еще несколько изображений

Слайд 35 Другой пример применения свойства „float”

Другой пример применения свойства „float”










Слайд 36 Стили для блоков
html, body{margin:0; padding:0; }
body{ width:400px;

Стили для блоков html, body{margin:0; padding:0; }body{ width:400px; height:300px; }.container{ width:300px;

height:300px; }
.container{ width:300px; margin:0 auto; padding-top:5px; }
.container div{ margin-right:5px;

margin-bottom:5px; }
.block1{ float:left; width:70px; height:220px; background:#3498db;}
.block2{ float:right; width:220px; height:70px; background:#3498db; }
.block3{ height:70px; width:70px; background:#8e44ad; }
.block4{ float:left; width:70px; height:145px; background:#e74c3c; }
.block5{ float:right; width:70px; height:145px; background:#e74c3c; }
.block6{ float:right; width:70px; height:70px; background:#f1c40f; }
.block7{ float:right; width:145px; height:70px; background:#2ecc71; }
.block8{ float:left; width:145px; height:70px; background:#2ecc71; }

Слайд 37 СВОЙСТВО CLEAR
Свойство clear запрещает обтекание элемента другими элементами. Его значения:
left — запрещено

СВОЙСТВО CLEARСвойство clear запрещает обтекание элемента другими элементами. Его значения:left — запрещено обтекание слеваright — запрещено

обтекание слева
right — запрещено обтекание справа
both — запрещено обтекание с обеих

сторон
none — обтекание разрешено
Если после флоатного элемента расположен элемент с запрещённым обтеканием, то последний опускается под флоатный
Свойство clear учит блочные элементы «видеть» «плавающие» элементы

Слайд 38 ПРИМЕР ПРИМЕНЕНИЯ „CLEAR”
.fara_clear { float: left;
width: 32px;
height: 32px;
margin: 10px;
border:

ПРИМЕР ПРИМЕНЕНИЯ „CLEAR”.fara_clear { float: left; width: 32px; height: 32px; margin: 10px; border: 3px solid #73AD21;

3px solid #73AD21; }
.text1 { border: 1px solid red; }
.cu_clear { float:

left;
width: 32px;
height: 32px;
margin: 10px;
border: 3px solid #73AD21; }
.text2 { border: 1px solid red;
clear: left; }

Слайд 39 РЕЗУЛЬТАТ

РЕЗУЛЬТАТ

Слайд 40 СВОЙТВА КРАЙОВ ЭЛЕМЕНТА
Края элемента (или внешние поля) означают

СВОЙТВА КРАЙОВ ЭЛЕМЕНТАКрая элемента (или внешние поля) означают пространство вокруг элемента

пространство вокруг элемента (кроме границ)
Край может быть определен для

каждой части в отдельности
Пример: margin-top: 50px; margin-bottom: 70px;
margin-right: 10px; margin-left: 50px;}
Или можно использовать сокращенную форму:
Пример: margin: 25px 50px 75px 100px;
(сверху - 25, справа – 50, в низу – 75, слева - 100)
margin: 25px 50px 75px;
(сверху – 25, справа – 50, снизу – 75)
margin: 25px 50px; или margin: 25px;

Слайд 41 ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВ
Блок элементов, группированных при помощи DIV-а,

ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВБлок элементов, группированных при помощи DIV-а, могут быть выравнены

могут быть выравнены по центру установив значение „auto” для

свойства „margin” (внимательное использование в IE8-)
Пример:
div.imagine{
margin-left: auto;
margin-right: auto;
width: 50%; }

Слайд 42 РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 43 ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВ
Другой подход для выравнивания блока элементов

ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВДругой подход для выравнивания блока элементов это использование свойства

это использование свойства «position» со значением „absolute” (по центру)
div.imagine{
position:

absolute;
left: 25%;
width: 50%; }
Другой метод – использование свойства „float” (выравнивание по правой стороне)
div.imagine{
float: right;
width: 50%; }

Слайд 44 ИЗОБРАЖЕНИЯ-SPRITE
Спрайт-изображение это то изображение которое состоит из множества

ИЗОБРАЖЕНИЯ-SPRITEСпрайт-изображение это то изображение которое состоит из множества маленьких изображенийИногда в

маленьких изображений
Иногда в сайте необходимо использовать несколько маленьких изображений,

которые можно «извлечь» из одного изображения
Используя спрайт-изображения – уменьшается количество запросов на сервер
Для доступа к мини-изображению необходимо высчитать ее координаты

Слайд 45 ПРИМЕР ИСПОЛЬЗОВАНИЯ СПРАЙТОВ

ПРИМЕР ИСПОЛЬЗОВАНИЯ СПРАЙТОВ

Слайд 46 Для этой части страницы „Контакты”
Я использовала для украшения

Для этой части страницы „Контакты”Я использовала для украшения ниже изложенное изображение

ниже изложенное изображение

Слайд 47 …а для этой части страницы «Контакты»
Я использовала другое

…а для этой части страницы «Контакты»Я использовала другое спрайт-изображение

спрайт-изображение

Слайд 48 ДЛЯ ПОСЛЕДНЕГО ПРИМЕРА
HTML коды:


ДЛЯ ПОСЛЕДНЕГО ПРИМЕРАHTML коды: CSS коды:.retele_so .retea { width: 50px; height: 50px;margin:

google">



CSS коды:
.retele_so .retea { width:

50px; height: 50px;
margin: 0px 5px; float: left; display: inline-block;
background: url("social_sprite.jpg") no-repeat 0px 0px; }
.retele_so .fb { background-position: -35px -145px;}
.retele_so .google {background-position: -215px -145px; }
.retele_so .twiter { background-position: -215px -207px; }
.retele_so .tube { background-position: -515px -145px; }

Слайд 49 ОБЬЯСНЕНИЯ
Для каждого div-а определяются 2 класса
Определяется высота и

ОБЬЯСНЕНИЯДля каждого div-а определяются 2 классаОпределяется высота и ширина блока div

ширина блока div в который определим фон (тот же

класс, retea, для всех 4 div-ов)
Для каждого div-а (соответственно для каждого класса) определяются координаты верхней-левой точки мини-изображения
Например для первого div-а, с классом fb, -35px – вниз и -145px – на право

Слайд 50 МОДЕЛЬ „КОРОБКИ” В CSS
Все HTML-элементы можно считать коробками

МОДЕЛЬ „КОРОБКИ” В CSSВсе HTML-элементы можно считать коробками (box)В CSS, понятие

(box)
В CSS, понятие «модель коробки" используется тогда когда необходимо

произвести дизайн страницы
Данная модель представляет собой коробки выставленные вокруг HTML-элементов с контентом и состоит из: внешних полей, границ, внутренних полей и содержимого

Слайд 51 ПРИМЕР
div.imagine{ width: 60%; margin: 25px; border: 25px solid black;
border-radius:

ПРИМЕРdiv.imagine{ width: 60%; margin: 25px; border: 25px solid black; border-radius: 25px; padding: 25px; margin-left: auto; margin-right: auto; }

25px; padding: 25px; margin-left: auto;
margin-right: auto;

}

Слайд 52 Дополнительно, прочтите
"Блочные элементы" [http://htmlbook.ru/content/blochnye-elementy]
"Встроенные элементы" [http://htmlbook.ru/content/vstroennye-elementy]

Дополнительно, прочтите

Слайд 53 ВЕРСКА САЙТОВ
Верстка это процесс преобразования рисунка веб-страницы (например

ВЕРСКА САЙТОВВерстка это процесс преобразования рисунка веб-страницы (например .psd файл) в

.psd файл) в HTML-документ, используя HTML и CSS
При версте

веб страниц необходимо соблюдать минимум следующие правила:
Результат должен, максимально совпасть с рисунком дизайнера
Полученная страница должна адекватно выглядеть во всех браузерах – проверка кросс-платформенности (cross platform)
Написать HTML коды отдельно от CSS

Слайд 54 РЕКОМЕНДАЦИИ ДЛЯ ВЕРСТКИ СТРАНИЦ
Консорциум w3 рекомендует использование div-ов

РЕКОМЕНДАЦИИ ДЛЯ ВЕРСТКИ СТРАНИЦКонсорциум w3 рекомендует использование div-ов для верткиДополнительно, рекомендуется,

для вертки
Дополнительно, рекомендуется, при определении ширины (width) и высоты

(height) блока использовать свойства: min-width и max-width, min-height и max-height
Min-width приоритетнее max-width и width (max-width приоритетнее width)
Приоритет тот же и при определении высоты: свойство min-height приоритетнее чем свойство max-height и height

Слайд 55 ПРИМЕР

ПРИМЕР

Слайд 56 ПРИМЕР


ПРИМЕР Header Meniu Coloana 1

Header
Meniu

Coloana 1

Coloana 2

Coloana 3

Subsol



Слайд 57 ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ
body{ font-family:'PT Sans', sans-serif; }
.container{ max-width:600px;
margin:10px

ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙbody{ font-family:'PT Sans', sans-serif; }.container{ max-width:600px; margin:10px auto; }.block{ padding:10px 0px; margin-bottom:10px; color:#CC0000;

auto; }
.block{ padding:10px 0px;
margin-bottom:10px;
color:#CC0000; }
.header { background:rgba(230, 210, 250, 0.7);
width:

100%; }
.menu { background:rgba(230, 210, 250, 0.5);
width: 100%; }
.column1{ background:rgba(230, 210, 250, 0.4);
float:left; width:180px;
min-height:50px;
margin-right:30px; }
.column2{ background:rgba(230, 210, 250, 0.4);
float:left; width:180px;
min-height:50px; }

.column3{
background:rgba(230, 210, 250, 0.4);
float:right;
width:180px;
min-height:50px; }
.footer{
background:rgba(230, 210, 250, 0.7);
width: 100%;
clear: both; }

Слайд 58 ДРУГОЙ ПРИМЕР (чуть поменяли стили)
Код HTML остался тот

ДРУГОЙ ПРИМЕР (чуть поменяли стили)Код HTML остался тот же

же

Слайд 59 ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ
…
.column1{ background:rgba(230, 210, 250, 0.4);
float:left; max-width:280px;
min-height:50px; }
.column2{ background:rgba(230,

ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ….column1{ background:rgba(230, 210, 250, 0.4); float:left; max-width:280px; min-height:50px; }.column2{ background:rgba(230, 210, 250, 0.4); float:right;

210, 250, 0.4);
float:right; max-width:280px;
min-height:50px; }
.column3{ background:rgba(230, 210, 250, 0.4);
clear: both; margin-left:

auto; margin-right: auto;
max-width:280px;
min-height:50px; }
.footer{ background:rgba(230, 210, 250, 0.7);
width: 100%; }
…

Слайд 60 АДАПТИВНЫЙ ДИЗАЙН (HTML Responsive Web Design)
Веб сайт является responsive если

АДАПТИВНЫЙ ДИЗАЙН (HTML Responsive Web Design)Веб сайт является responsive если его страницы

его страницы адаптируются в зависимости от среды вывода (разрешение экрана

– desktop, laptop, планшет, телефон), без больших изменений, с целью предоставления пользователю хорошего опыта (удобное передвижение по сайту). Responsive design предполагает:
Использование адаптивных сеток – они могут поменять ширину в зависимости от разрешения экрана. Размеры задаются при помощи относительных величин
Размеры изображений так же задаются относительными величинами
Используются медиа-запросы (media queries) – процесс загрузки разных CSS свойств в зависимости от разрешения устройства. Сайт распознает тип устройства вывода и его разрешение, и загружает соответствующие свойства
Для упрощения внедрения адаптивного дизайна появились много framework-ов. Самые распространенные: Bootstrap, Foundation и Skeleton

Слайд 61 АДАПТИВНЫЙ ДИЗАЙН

АДАПТИВНЫЙ ДИЗАЙН

Слайд 62 W3.CSS
Качественные эффекты достигаются и с помощью W3.CSS -

W3.CSSКачественные эффекты достигаются и с помощью W3.CSS - frame-work используемый для

frame-work используемый для адаптивного дизайна
Используются только стили, без

применения JS или JQuery
W3.CSS это свободно доступный frame-work и не требует специальных лицензий
Для его использования загрузите его и используйте
Достиг версию 1.9 в январе 2016, появился в июне 2015)
Описание: http://www.w3schools.com/w3css
Примеры: http://www.w3schools.com/w3css/demo_website.htm

Слайд 63 Пример с применением w3.css


W3.CSS

Пример с применением w3.css W3.CSS .align { text-align: center; valign: middle; } img

contentului">


.align { text-align: center; valign: middle; }
img

{ padding: 10px; float: left; }


Florile verii


Maci
Maci

Macii - cea mai frumoasa priveliste a lunilor mai - iunie.



Toate drepturile rezervate

E-mail: natalia-plesca@yandex.ru



Слайд 64 РЕЗУЛЬТАТ
Exemplul

РЕЗУЛЬТАТExemplul

Слайд 65 ВЕРСТКА С ИСПОЛЬЗОВАНИЕМ HTML5
В HTML5 появились специальные теги,

ВЕРСТКА С ИСПОЛЬЗОВАНИЕМ HTML5В HTML5 появились специальные теги, которые используются для вёрстки сайтаДополнительно: http://www.w3schools.com/html/html5_new_elements.asp

которые используются для вёрстки сайта
Дополнительно: http://www.w3schools.com/html/html5_new_elements.asp

Слайд 66 ПРИМЕР ИСПОЛЬЗОВАНИЯ HTML5


ПРИМЕР ИСПОЛЬЗОВАНИЯ HTML5 Header Meniu

Header
Meniu

Coloana 1



Coloana 3


Subsol



Слайд 67 СТИЛИ
body{ font-family:'PT Sans', sans-serif; }
main{ max-width:600px; margin:10px auto;

СТИЛИbody{ font-family:'PT Sans', sans-serif; }main{ max-width:600px; margin:10px auto; }header, nav, section,

}
header, nav, section, aside, article, footer { padding:10px 0px;
margin-bottom:10px;

color:#CC0000; }
header { background:rgba(30, 210, 250, 0.7); width: 100%; }
nav { background:rgba(30, 210, 250, 0.5); width: 100%; }
section{ background:rgba(30, 210, 250, 0.4); float:left;
max-width:280px; min-height:50px; }
aside{ background:rgba(30, 210, 250, 0.4); float:right;
max-width:280px; min-height:50px; }
article{ background:rgba(30, 210, 250, 0.4); clear: both; margin-left: auto; margin-right: auto; max-width:280px; min-height:50px; }
footer{ background:rgba(30, 210, 250, 0.7); width: 100%; }

Слайд 68 РЕЗУЛЬТАТ

РЕЗУЛЬТАТ
  • Имя файла: teg-div-i-span-css-tema-9.pptx
  • Количество просмотров: 126
  • Количество скачиваний: 0
- Предыдущая Рыночное равновесие
Следующая - Checker Framework. Аннотации для статического анализа кода

Похожие презентации

sadik 8 sadik 8 98
Анализ УМК Перспектива Анализ УМК Перспектива 175
Метод Ньютона Метод Ньютона 120
Культурно-досуговое мероприятие Культурно-досуговое мероприятие 188
Презентация Ребенок и пиротехника презентация к уроку по теме Презентация Ребенок и пиротехника презентация к уроку по теме 121
Презентация к бинарному уроку В мире ориентиров Презентация к бинарному уроку В мире ориентиров 137
Реализация образовательной области Речевое развитие детей дошкольного возраста Реализация образовательной области Речевое развитие детей дошкольного возраста 133
Генные заболевания скелета:ахондроплазия, диастрофическаядисплозия, врожденная косолапость Генные заболевания скелета:ахондроплазия, диастрофическаядисплозия, врожденная косолапость 113
Системно – деятельностный подход в обучении учебно-методический материал Системно – деятельностный подход в обучении учебно-методический материал 121
umk perspektiva umk perspektiva 141
Система стандартизации Система стандартизации 101
Виды и формы природопользования презентация к уроку Виды и формы природопользования презентация к уроку 246
104
Презентация по казахскому языку Қасым Аманжолов Қасым-Әуен! Қасым-Жыр! Қасым-Ақын! Презентация по казахскому языку Қасым Аманжолов Қасым-Әуен! Қасым-Жыр! Қасым-Ақын! 315
Способы очистки коксового газа, охлаждение. Компоновки улавливающих цехов, новые технологии Способы очистки коксового газа, охлаждение. Компоновки улавливающих цехов, новые технологии 103
Тайные мечты каждого ребенка ( Обращение детей к родителям. Презентация) материал Тайные мечты каждого ребенка ( Обращение детей к родителям. Презентация) материал 96
Прзентация Удивительный мир кристалов презентация к уроку (4 класс) Прзентация Удивительный мир кристалов презентация к уроку (4 класс) 105
Дидактическая игра для старшего дошкольного возраста Сок и варенье материал Дидактическая игра для старшего дошкольного возраста Сок и варенье материал 149
ИКТ презентация презентация к уроку ИКТ презентация презентация к уроку 100
Тема Сердечно легочная реанимаияааааа Тема Сердечно легочная реанимаияааааа 108
Презентация ко Дню Матери Материнская любовь Презентация ко Дню Матери Материнская любовь 127
Портрет Портрет 78
Технология оценивания Технология оценивания 132
Презентация по технологии профессиональной деятельности Упаковка подарков для детей Презентация по технологии профессиональной деятельности Упаковка подарков для детей 105
Презентация проекта Мой дом, моя улица, мой город проект (средняя группа) Презентация проекта Мой дом, моя улица, мой город проект (средняя группа) 144
Родительское собрание Овладение навыками оптимального чтения-залог успешного обучения презентация к уроку (3 класс) Родительское собрание Овладение навыками оптимального чтения-залог успешного обучения презентация к уроку (3 класс) 142
Автоматизация учета электроэнергии Автоматизация учета электроэнергии 111
Презентация Музей русской одежды презентация к уроку (старшая группа) Презентация Музей русской одежды презентация к уроку (старшая группа) 91
Тема классного часа:К. Азербаев Тема классного часа:К. Азербаев 136
Пояснительная записка к презентации опыта работы статья Пояснительная записка к презентации опыта работы статья 108