- Главная
- Разное
- Бизнес и предпринимательство
- Образование
- Развлечения
- Государство
- Спорт
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Религиоведение
- Черчение
- Физкультура
- ИЗО
- Психология
- Социология
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Что такое findslide.org?
FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.
Обратная связь
Email: Нажмите что бы посмотреть
Презентация на тему Tег DIV и SPAN. CSS. (Тема 9)
Содержание
- 2. СОДЕРЖАНИЕТеги DIV и SPANСвойства и значения CSSВёрстка
- 3. ОБЩАЯ ИНФОРМАЦИЯ О ТЕГАХ «DIV» и «SPAN»Теги и , обычно
- 4. ТЕГ „DIV”В последнее время, один из самых
- 5. ПРИМЕР ИСПОЛЬЗОВАНИЯ „DIV”Pagina cu sectiuni IMAGINI Priviti cu placere
- 6. ФАЙЛ СО СТИЛЯМИ#cap{ background-color:black; color:white; text-align:center;
- 7. РЕЗУЛЬТАТ ПРИМЕРА
- 8. ТЕГ „SPAN”Тег может добавить графические стили определенной части
- 9. ПОРЯДОК ОТОБРАЖЕНИЯ ЭЛЕМЕНТОВПорядок отображения элементов на странице
- 10. СВОЙСТВА ДЛЯ РАЗМЕЩЕНИЯ HTML -ЭЛЕМЕНТОВСвойства CSS используемые
- 11. I – СТАТИЧЕСКОЕ МЕСТОПОЛОЖЕНИЕ position: staticВсе HTML-элементы расположены
- 12. II – ФИКСИРОВАННОЕ МЕСТОПОЛОЖЕНИЕ position: fixedЭлемент с фиксированной
- 13. ПРИМЕР „position: fixed”Pozitii elementediv.fix { width:250px; position: fixed;
- 14. РЕЗУЛЬТАТ ПРИМЕРА
- 15. …после прокрутки
- 16. ПРИМЕР НАКЛАДКИdiv.fix {width:450px;position: fixed; top: 20px; right:20px; }Другой пример
- 17. III – ОТНОСИТЕЛЬНОЕ МЕСТОПОЛОЖЕНИЕ position: relativeЭлемент расположенный относительно,
- 18. ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: -20px;}
- 19. ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ div.fix {width:450px; position: relative; left: 50px; top:-50px;}
- 20. IV – АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ position: absoluteАбсолютно-расположенный элемент позиционируется
- 21. ПРИМЕР АБСОЛЮТНОГО РАСПОЛОЖЕНИЯ div.fix {width:450px; position: absolute;left: 80px; top: 120px;}
- 22. АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕПо умолчанию «абсолютные» элементы позиционируются в
- 23. СТИЛИ, блок позиционированный абсолютноbody { margin: 10px; padding:
- 24. БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно “body”Если добавить: position:
- 25. БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно другого относительно позиционированного
- 26. ПРИМЕНЕНИЕНа практике абсолютное позиционирование часто применяют в
- 27. ПЕРЕКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫКогда элементы расположены вне нормального потока
- 28. ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВdiv.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: -1;}
- 29. ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВdiv.fix {width:450px; position: absolute; left: 230px; top: 200px; z-index: 1;}
- 30. ПРИМЕНЕНИЕC помощью CSS-свойства z-index можно управлять тем, как перекрываются
- 31. СВОЙСТВО „FLOAT”CSS свойство „float” определяет, как можно
- 32. НЕКОТОРЫЕ ЗНАЧЕНИЯ СВОЙСТВА „FLOAT”
- 33. ПРИМЕР СО СВОЙСТВОМ „FLOAT”img{ border: 2px solid #aa0000;
- 34. РЕЗУЛЬТАТ ПРИМЕРАИли когда добавляем еще несколько изображений
- 35. Другой пример применения свойства „float”
- 36. Стили для блоков html, body{margin:0; padding:0; }body{
- 37. СВОЙСТВО CLEARСвойство clear запрещает обтекание элемента другими элементами. Его значения:left —
- 38. ПРИМЕР ПРИМЕНЕНИЯ „CLEAR”.fara_clear { float: left; width: 32px; height: 32px; margin:
- 39. РЕЗУЛЬТАТ
- 40. СВОЙТВА КРАЙОВ ЭЛЕМЕНТАКрая элемента (или внешние поля)
- 41. ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВБлок элементов, группированных при помощи
- 42. РЕЗУЛЬТАТ ПРИМЕРА
- 43. ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВДругой подход для выравнивания блока
- 44. ИЗОБРАЖЕНИЯ-SPRITEСпрайт-изображение это то изображение которое состоит из
- 45. ПРИМЕР ИСПОЛЬЗОВАНИЯ СПРАЙТОВ
- 46. Для этой части страницы „Контакты”Я использовала для украшения ниже изложенное изображение
- 47. …а для этой части страницы «Контакты»Я использовала другое спрайт-изображение
- 48. ДЛЯ ПОСЛЕДНЕГО ПРИМЕРАHTML коды: CSS коды:.retele_so .retea {
- 49. ОБЬЯСНЕНИЯДля каждого div-а определяются 2 классаОпределяется высота
- 50. МОДЕЛЬ „КОРОБКИ” В CSSВсе HTML-элементы можно считать
- 51. ПРИМЕРdiv.imagine{ width: 60%; margin: 25px; border: 25px solid
- 52. Дополнительно, прочтите"Блочные элементы" [http://htmlbook.ru/content/blochnye-elementy]"Встроенные элементы" [http://htmlbook.ru/content/vstroennye-elementy]
- 53. ВЕРСКА САЙТОВВерстка это процесс преобразования рисунка веб-страницы
- 54. РЕКОМЕНДАЦИИ ДЛЯ ВЕРСТКИ СТРАНИЦКонсорциум w3 рекомендует использование
- 55. ПРИМЕР
- 56. ПРИМЕР
- 57. ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙbody{ font-family:'PT Sans', sans-serif; }.container{
- 58. ДРУГОЙ ПРИМЕР (чуть поменяли стили)Код HTML остался тот же
- 59. ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ….column1{ background:rgba(230, 210, 250, 0.4); float:left; max-width:280px; min-height:50px;
- 60. АДАПТИВНЫЙ ДИЗАЙН (HTML Responsive Web Design)Веб сайт является
- 61. АДАПТИВНЫЙ ДИЗАЙН
- 62. W3.CSSКачественные эффекты достигаются и с помощью W3.CSS
- 63. Пример с применением w3.css W3.CSS .align { text-align:
- 64. РЕЗУЛЬТАТExemplul
- 65. ВЕРСТКА С ИСПОЛЬЗОВАНИЕМ HTML5В HTML5 появились специальные теги, которые используются для вёрстки сайтаДополнительно: http://www.w3schools.com/html/html5_new_elements.asp
- 66. ПРИМЕР ИСПОЛЬЗОВАНИЯ HTML5
- 67. СТИЛИbody{ font-family:'PT Sans', sans-serif; }main{ max-width:600px; margin:10px
- 68. РЕЗУЛЬТАТ
- 69. Скачать презентацию
- 70. Похожие презентации
СОДЕРЖАНИЕТеги DIV и SPANСвойства и значения CSSВёрстка сайта с использованием тега DIVНовые теги для верстки в HTML5Примеры
Слайд 3
ОБЩАЯ ИНФОРМАЦИЯ О ТЕГАХ «DIV» и «SPAN»
Теги и , обычно не
используются, в одиночку, имея особенные эффекты если они используются
в комбинации с другими HTML-тегами и стилями CSSТег DIV создает разделы блоков на странице, формой и графикой, которых можно управлять по отдельности
Тег DIV имеет атрибут align (для выравнивания по горизонтали), который не поддерживается HTML5
Тег SPAN создает возможность изменения части контекста (in-line); может быть использован в качестве "класса" с CSS
Оба тега могут использовать глобальный атрибут style или id или class
Слайд 4
ТЕГ „DIV”
В последнее время, один из самых используемых
HTML-тегов
Поддерживается всеми браузерами
Используется для группировки HTML-элементов
В тег DIV-
можно включить любые HTML элементы: таблицы, списки, формы, параграфы текста или другие DIV-ыКадр в котором включен DIV может иметь собственный фон (background), ширину, высоту, края с различными линиями и т.д.
Синтаксис:
содержимое
Слайд 6
ФАЙЛ СО СТИЛЯМИ
#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; 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;}
Слайд 8
ТЕГ „SPAN”
Тег может добавить графические стили определенной части какого-то
элемента (in-line)
Слова которые необходимо выделить включаются между и
Основная форма: содержание
В файле со стилями определяются необходимые стили
Пример:
span{color:#ff0000;}
Применяются к следующим кодам:
…
Priviti cu placere
Слайд 9
ПОРЯДОК ОТОБРАЖЕНИЯ ЭЛЕМЕНТОВ
Порядок отображения элементов на странице называется потоком
документа – нормальный поток документа
Блочные элементы отображаются как
прямоугольные области, идущие друг за другом сверху внизСтрочные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку
Слайд 10
СВОЙСТВА ДЛЯ РАЗМЕЩЕНИЯ HTML -ЭЛЕМЕНТОВ
Свойства CSS используемые для
размещения позволяют контролировать местоположение элементов на странице
Существует возможность размещения
какого-то элемента позади другого, или указать как вывести какой-либо элемент, который имеет большое содержаниеЭлементы могут быть расположены с использованием свойств: top, bottom, left и right
Эти свойства не будут функциональными если свойство position не будет установлена первой
Имеет значение метод определения местоположения. Существуют четыре различных способа позиционирования HTML-элементов
Слайд 11
I – СТАТИЧЕСКОЕ МЕСТОПОЛОЖЕНИЕ
position: static
Все HTML-элементы расположены статически
по умолчанию
Статически расположенный элемент, постоянно располагается с учётом нормального
потока на страницеСтатически расположенные элементы не будут затронуты свойствами top, bottom, left и right
Слайд 12
II – ФИКСИРОВАННОЕ МЕСТОПОЛОЖЕНИЕ
position: fixed
Элемент с фиксированной позицией
будет расположен в отношении с окном браузера
Данный элемент не
будет передвигаться даже если окно прокручиваетсяЗафиксированные элементы не учитывают нормального потока вывода на странице – не имеет значение какие другие элементы существуют на странице
Элементы с фиксированной позицией могут накладываться на другие элементы
Слайд 13
ПРИМЕР „position: fixed”
Pozitii elemente
div.fix {
width:250px;
position: fixed;
top: 20px;
right:20px;}
p{color:brown; font-size:20px;}
/>Folosindu-se de vazul remarcabil …spre pisici.
Слайд 17
III – ОТНОСИТЕЛЬНОЕ МЕСТОПОЛОЖЕНИЕ
position: relative
Элемент расположенный относительно, позиционируется
относительно его нормального положения
Содержимое относительно-позиционируемых элементов может быть
перемещено и может перекрывать другие элементы, но пространство, отведенное для элемента в нормальном потоке, сохраняется Элементы, расположенные относительно, часто используются в качестве блочных контейнеров для абсолютно позиционируемых элементов
Слайд 18
ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ
div.fix {width:450px; position: relative; left:
-20px;}
Слайд 19
ПРИМЕР ОТНОСИТЕЛЬНОГО МЕСТОПОЛОЖЕНИЯ
div.fix {width:450px; position: relative; left:
50px; top:-50px;}
Слайд 20
IV – АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ
position: absolute
Абсолютно-расположенный элемент позиционируется относительно
первого (родительского) основного элемента, имеющий другой тип позиционирования, чем
статическоеЕсли нет такого элемента, блок будет позиционироваться по отношению к тегу
Элементы, абсолютно-расположенные, удаляются из нормального потока. Документ и другие элементы ведут себя по отношению к абсолютно- позиционированному элементу как к не существующему
Элементы, абсолютно-расположенные, могут перекрыть другие элементы
Слайд 21
ПРИМЕР АБСОЛЮТНОГО РАСПОЛОЖЕНИЯ
div.fix {
width:450px;
position: absolute;
left: 80px;
top: 120px;}
Слайд 22
АБСОЛЮТНОЕ МЕСТОПОЛОЖЕНИЕ
По умолчанию «абсолютные» элементы позиционируются в системе
координат, привязанной к окну браузера. Однако, систему координат можно
изменитьЕсли какой-нибудь из родителей «абсолютного» элемента имеет относительное позиционирование, то элемент будет позиционироваться относительно этого родителя. Если среди родителей несколько относительно позиционированных элементов, то «абсолютный» элемент будет позиционироваться относительно ближайшего из них
Слайд 23
СТИЛИ, блок позиционированный абсолютно
body { margin: 10px; padding: 20px;
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:
body {
margin: 10px;
padding: 20px;
color: white;
border: 1px dotted #999;
position:
relative;}
Результат:
Слайд 25
БЛОК ПОЗИЦИОНИРОВАННЫЙ АБСОЛЮТНО, относительно другого относительно позиционированного блока
Если
добавить: position: relative; другому блоку:
.block-1 {
min-height: 100px;
padding: 10px;
background: #3A78A1;
position:
relative;}
Слайд 26
ПРИМЕНЕНИЕ
На практике абсолютное позиционирование часто применяют в декоративных
целях, когда нужно аккуратно разместить какие-либо иконки, управляющие элементы
или другие «рюшечки»
Слайд 27
ПЕРЕКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ
Когда элементы расположены вне нормального потока (position:
absolute, relative, fixed) они могут перекрывать другие элементы
Свойство «z-index»
указывает порядок выявления элемента (элемент который должен быть размещен в передней части, или за другими элементами)Элемент может иметь положительный или отрицательный порядок в стеке
Элемент с наибольшем порядке в стеке всегда будет расположен перед элементом с более низким порядком
Свойство «z-index» применимо только для элементов расположенных абсолютно, относительно или фиксировано
Слайд 28
ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВ
div.fix {width:450px; position: absolute; left: 230px;
top: 200px; z-index: -1;}
Слайд 29
ПРИМЕР ПЕРЕКРЫВАНИЯ ЭЛЕМЕНТОВ
div.fix {width:450px; position: absolute; left: 230px;
top: 200px; z-index: 1;}
Слайд 30
ПРИМЕНЕНИЕ
C помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки.
Значением этого свойства может быть целое число. Чем больше z-index,
тем выше располагается блокCвойство z-index работает для элементов, у которых position задано как absolute, fixed и relative
Таким образом, «относительный» элемент может перекрывать «абсолютный»
Слайд 31
СВОЙСТВО „FLOAT”
CSS свойство „float” определяет, как можно сдвинуть
элемент (плавающий) влево или вправо, то что позволит другим
элементам его окружитьСвойство „float” часто используется когда вставляются изображения, но так же применяется, и при верстке web-страницы
Элементы „плавают” горизонтально, то что означает что любой элемент можно «сдвинуть» в левую сторону или в правую, но никак нельзя сдвинуть вверх или вниз
Элементы следующие за «плавающем» элементом окружат его
Элементы перед «плавающем» элементом не будут никак затронуты
Слайд 33
ПРИМЕР СО СВОЙСТВОМ „FLOAT”
img{ border: 2px solid #aa0000;
height: 110px;
width: 155px;
float: left;}
Применяется к следующему
элементу:
Слайд 36
Стили для блоков
html, body{margin:0; padding:0; }
body{ width:400px;
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 — запрещено
обтекание слева
right — запрещено обтекание справа
both — запрещено обтекание с обеих
сторонnone — обтекание разрешено
Если после флоатного элемента расположен элемент с запрещённым обтеканием, то последний опускается под флоатный
Свойство clear учит блочные элементы «видеть» «плавающие» элементы
Слайд 38
ПРИМЕР ПРИМЕНЕНИЯ „CLEAR”
.fara_clear { float: left;
width: 32px;
height: 32px;
margin: 10px;
border:
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; }
Слайд 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-а,
могут быть выравнены по центру установив значение „auto” для
свойства „margin” (внимательное использование в IE8-)Пример:
div.imagine{
margin-left: auto;
margin-right: auto;
width: 50%; }
Слайд 43
ВЫРАВНИВАНИЕ БЛОКА ЭЛЕМЕНТОВ
Другой подход для выравнивания блока элементов
это использование свойства «position» со значением „absolute” (по центру)
div.imagine{
position:
absolute;left: 25%;
width: 50%; }
Другой метод – использование свойства „float” (выравнивание по правой стороне)
div.imagine{
float: right;
width: 50%; }
Слайд 44
ИЗОБРАЖЕНИЯ-SPRITE
Спрайт-изображение это то изображение которое состоит из множества
маленьких изображений
Иногда в сайте необходимо использовать несколько маленьких изображений,
которые можно «извлечь» из одного изображенияИспользуя спрайт-изображения – уменьшается количество запросов на сервер
Для доступа к мини-изображению необходимо высчитать ее координаты
Слайд 48
ДЛЯ ПОСЛЕДНЕГО ПРИМЕРА
HTML коды:
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 в который определим фон (тот же
класс, retea, для всех 4 div-ов)Для каждого div-а (соответственно для каждого класса) определяются координаты верхней-левой точки мини-изображения
Например для первого div-а, с классом fb, -35px – вниз и -145px – на право
Слайд 50
МОДЕЛЬ „КОРОБКИ” В CSS
Все HTML-элементы можно считать коробками
(box)
В CSS, понятие «модель коробки" используется тогда когда необходимо
произвести дизайн страницыДанная модель представляет собой коробки выставленные вокруг HTML-элементов с контентом и состоит из: внешних полей, границ, внутренних полей и содержимого
Слайд 51
ПРИМЕР
div.imagine{ width: 60%; margin: 25px; border: 25px solid black;
border-radius:
25px; padding: 25px; margin-left: auto;
margin-right: auto;
}
Слайд 52
Дополнительно, прочтите
"Блочные элементы" [http://htmlbook.ru/content/blochnye-elementy]
"Встроенные элементы" [http://htmlbook.ru/content/vstroennye-elementy]
Слайд 53
ВЕРСКА САЙТОВ
Верстка это процесс преобразования рисунка веб-страницы (например
.psd файл) в HTML-документ, используя HTML и CSS
При версте
веб страниц необходимо соблюдать минимум следующие правила:Результат должен, максимально совпасть с рисунком дизайнера
Полученная страница должна адекватно выглядеть во всех браузерах – проверка кросс-платформенности (cross platform)
Написать HTML коды отдельно от CSS
Слайд 54
РЕКОМЕНДАЦИИ ДЛЯ ВЕРСТКИ СТРАНИЦ
Консорциум 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
Слайд 57
ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ
body{ font-family:'PT Sans', sans-serif; }
.container{ max-width:600px;
margin:10px
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; }
Слайд 59
ВНЕШНЯЯ ТАБЛИЦА СТИЛЕЙ
…
.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, 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 если
его страницы адаптируются в зависимости от среды вывода (разрешение экрана
– desktop, laptop, планшет, телефон), без больших изменений, с целью предоставления пользователю хорошего опыта (удобное передвижение по сайту). Responsive design предполагает:Использование адаптивных сеток – они могут поменять ширину в зависимости от разрешения экрана. Размеры задаются при помощи относительных величин
Размеры изображений так же задаются относительными величинами
Используются медиа-запросы (media queries) – процесс загрузки разных CSS свойств в зависимости от разрешения устройства. Сайт распознает тип устройства вывода и его разрешение, и загружает соответствующие свойства
Для упрощения внедрения адаптивного дизайна появились много framework-ов. Самые распространенные: Bootstrap, Foundation и Skeleton
Слайд 62
W3.CSS
Качественные эффекты достигаются и с помощью W3.CSS -
frame-work используемый для адаптивного дизайна
Используются только стили, без
применения JS или JQueryW3.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
contentului">
.align { text-align: center; valign: middle; }
img
{ padding: 10px; float: left; }Florile verii
Macii - cea mai frumoasa priveliste a lunilor mai - iunie.
Toate drepturile rezervate
E-mail: natalia-plesca@yandex.ru
Слайд 65
ВЕРСТКА С ИСПОЛЬЗОВАНИЕМ HTML5
В HTML5 появились специальные теги,
которые используются для вёрстки сайта
Дополнительно: http://www.w3schools.com/html/html5_new_elements.asp
Слайд 67
СТИЛИ
body{ font-family:'PT Sans', sans-serif; }
main{ max-width:600px; margin:10px auto;
}
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%; }
