$Max\min$

$Max\min$

2.42M

Категория:

Интернет

Блочная верстка web-страниц (Часть 1)

1. Верстка web-страниц

Блочная
верстка
Блочная
верстка.
Часть 1
Мигачева Марина Евгеньевна
Мигачева МаринаМинск,
Евгеньевна
2014
Минск, 2016
1
© Программа «Web-дизайн» ИБМТ БГУ

2. Содержание

1.
Типы элементов: block, inline
2.
Преобразование типов: свойство display
3.
Параметры блочных элементов
4.
Float
5.
Создание двух колонок
6.
Примеры компоновки страниц
7.
Блочная верстка
2
© Программа «Web-дизайн» ИБМТ БГУ

3. Типы элементов

-
блочные (block);
-
встроенные (inline);
-
специальные типы для табличных элементов;
-
специальные типы для списков;
-
др.
между типами элементов можно переключаться с помощью
display
3
© Программа «Web-дизайн» ИБМТ БГУ

4. Типы элементов

Блочные элементы
начинаются с новой строки;
могут накладываться друг на друга;
занимают всю доступную ширину;
могут быть вложены друг в друга;
могут обёртывать строчные элементы;
...
4
© Программа «Web-дизайн» ИБМТ БГУ

5. Типы элементов

Строчные элементы
не начинаются с новой строки;
они попадают в обычный поток документа, выстраиваются друг
за другом;
их ширина основана на их содержимом;
могут быть вложены друг в друга;
не могут обёртывать блочные элементы;
...
5
© Программа «Web-дизайн» ИБМТ БГУ

6. Типы элементов

В большинстве случаев CSS работает с линейными и блочными
элементами одинаково.
Исключение составляют такие свойства как отступы и поля –
для линейных элементов браузеры обрабатывают эти свойства
иначе, чем для блочных
Обычно поля или отступы слева\справа работают в обычном
режиме, но не вертикальные.
6
© Программа «Web-дизайн» ИБМТ БГУ

7. Задание

ЗАДАНИЕ:
Изучите
самостоятельно,
вертикальными
каким
параметрами
образом
при
отступов\полей
работе
с
отображаются
данные. Для этого:
-
задайте абзац (объемом на несколько строк)
-
выделите внутри абзаца два-три слова с помощью тега <span>
-
примените к нему цвет фона и границы
-
задайте поля (проверьте в браузере)
-
задайте отступы (проверьте в браузере)
-
задайте поля и отступы (проверьте в браузере)
7
© Программа «Web-дизайн» ИБМТ БГУ

8. Блочные элементы

Блочным называется элемент, который отображается на вебстранице в виде прямоугольника.
Такой элемент занимает всю доступную ширину (по отношению к
элементу-контейнеру),
высота
элемента
определяется
его
содержимым, и он всегда начинается с новой строки.
К блочным элементам относятся контейнеры <div>, <h1>, <p> и
др.
8
© Программа «Web-дизайн» ИБМТ БГУ

9. Пример

Что отобразится в браузере?
9
© Программа «Web-дизайн» ИБМТ БГУ

10. Результат

первый блок <div>
второй блок <div>
Нужно ли в нашем случае задавать свойства, прописанные в
стилях в строках 4 и 5?
10
© Программа «Web-дизайн» ИБМТ БГУ

11. Задание

Используя <div> и стили, задайте на web-странице отображение
полос цветов радуги:
-
ширина на 60% экрана;
-
полосы центрированы;
-
высота для всех полос фиксированная;
-
расстояние между полосами одинаково для всех.
11
© Программа «Web-дизайн» ИБМТ БГУ

12. Задание

Измените код таким образом, чтобы расстояние между полосами
увеличивалось сверху вниз
12
© Программа «Web-дизайн» ИБМТ БГУ

13. display

Свойство
display
позволяет
определить,
как
именно
отображаются элементы — как блочные или строчные или как-то
ещё.
Каждый элемент содержит значение свойства display по
умолчанию, но как и с любым другим значением свойств, это
значение может быть переписано.
Наиболее распространённые из значений это block, inline, inlineblock и none.
13
© Программа «Web-дизайн» ИБМТ БГУ

14. display

С помощью свойства display можно менять тип html-элементов.
Пример,
span {
display: inline-block;
}
Линейный элемент будет восприниматься как блочный, но по
своей сути останется линейным: т.е. сработают вертикальные
отступы\поля к нему будут применимы, но по своей позиции он
останется в элементе-контейнере не разбивая его
14
© Программа «Web-дизайн» ИБМТ БГУ

15. Пример

<p>
начало текста
<b>выделенный текст</b>
продолжение текста
</p>
15
© Программа «Web-дизайн» ИБМТ БГУ

16. Пример

16
© Программа «Web-дизайн» ИБМТ БГУ

17. Высота и ширина

Свойства height и width назначают высоту и ширину области
стилизуемого элемента
ВАЖНО:
Данные
свойства
содержимого
устанавливают
стилизуемого
высоту\ширину
элемента
–
области
пространства,
в
которое заключены текст, изображения и другие вложенные теги
Фактическая высота\ширина элемента состоит из ширины
полей, границ, отступов и явно указанного значения ширины
содержимого
17
© Программа «Web-дизайн» ИБМТ БГУ

18. Высота и ширина

Общее правило по регулированию высоты элементов на
веб-странице утверждает:
НЕ ДЕЛАЕМ ЭТОГО!
Высота
элементов-контейнеров
должна
регулироваться
(в
большинстве случаев) объемом контента – т.е. при добавлении
объема
содержимого
высота
контейнера
увеличивается,
при
уменьшении объема содержимого контейнера высота уменьшается
18
© Программа «Web-дизайн» ИБМТ БГУ

19. Ширина

Ширина блочных элементов
1.
По умолчанию 100% от родителя
2.
Складывается из ширины самого блока (width), отступов
(margin), полей (padding) и границ (border)
19
© Программа «Web-дизайн» ИБМТ БГУ

20. Ширина

div
{
width: 300px;
margin: 7px;
padding: 10px;
border: 4px solid black;
background-color: #fc0456;
}
Какая ширина у элемента div?
20
© Программа «Web-дизайн» ИБМТ БГУ

21. Ширина

342px
21
© Программа «Web-дизайн» ИБМТ БГУ

22. Ширина

342px
22
© Программа «Web-дизайн» ИБМТ БГУ

23. Высота

Высота блочного элемента:
1.
Если высота слоя не установлена явно, то она вычисляется
автоматически исходя из объема содержимого.
2.
Складывается из высоты самого блока (height), отступов
(margin), полей (padding) и границ (border)
3.
Если высота указана явно, а содержимое не помещается, ваша
верстка начнет «ехать». Содержимое будет наложено поверх
слоя.
23
© Программа «Web-дизайн» ИБМТ БГУ

24. Высота

div
{
height: 337px;
margin: 17px;
padding: 11px;
border: 14px solid black;
background-color: #fc0456;
}
Какая высота у элемента div?
24
© Программа «Web-дизайн» ИБМТ БГУ

25. Высота

421px
25
© Программа «Web-дизайн» ИБМТ БГУ

26. Цвет фона

Цвет фона блочного элемента:
1.
Свойство background
2.
Фоном при этом заливается область, которая определяется
значениями width, height и padding
3.
margin не принимает участия в формировании цветной
области (!по отношению к текущему элементу).
26
© Программа «Web-дизайн» ИБМТ БГУ

27. Пример

!?
Все ли
верно в коде
!
Используя
каскадность,
сократите код
27
© Программа «Web-дизайн» ИБМТ БГУ

28. Результат

28
© Программа «Web-дизайн» ИБМТ БГУ

29. Пример

29
© Программа «Web-дизайн» ИБМТ БГУ

30. Результат

margin-left:auto;
margin-right:auto;
height:200px;
border: 5px; + border: 5px
30
© Программа «Web-дизайн» ИБМТ БГУ

31. Пример

32. Задание

33. Задание

34. Пример

35. Пример

36. Переопределение ширины

В
связи
с
тем,
что
фактическая
высота\ширина
объекта
определяется суммированием различных свойств (а в некоторых
случаях это все усложняется при плавающей разметке) есть
свойство,
которое
изменяет
порядок
вычисления
браузером экранной ширины (высоты) элементов –
box-sizing
36
© Программа «Web-дизайн» ИБМТ БГУ

37. Переопределение ширины

Значение
content-box устанавливает ранее рассмотренный способ
padding-box сообщает браузеру, что отступы идут как часть
значения ширины\высоты (общая ширина = ширина контента +
отступ слева + отступ справа)
border-box сообщает браузеру, что и отступы и рамки идут в
суммарное значение ширины\высоты
37
© Программа «Web-дизайн» ИБМТ БГУ

38. Overflow

Когда содержимое стилизуемого тега имеет размеры больше
определенных свойствами width\height, зачастую содержимое
отображается за пределами границ элемента, накладываясь на
него
В этой ситуации браузер использует свойство overflow, в
качестве значений можно указать одно из четырех ключевых
слов, которые определяют, как должно отображаться содержимое,
не вместившееся в пределы блочного элемента
38
© Программа «Web-дизайн» ИБМТ БГУ

39. Overflow

Visible – значение, принимаемое браузером по умолчанию
Scroll – добавляет полосы прокрутки для блока-контейнера (даже
если
содержимое
вместилось
при
таком
значении
полосы
прокрутки все равно будут присутствовать)
Auto – полосы прокрутки добавятся только при необходимости
Hidden – скрывает любое содержимое, выходящее за пределы
блочного
элемента
(используется
при
создании
плавающих
разметок)
39
© Программа «Web-дизайн» ИБМТ БГУ

40. Задание

Самостоятельно
изучите
особенности
использования
данного
стилевого параметра (можно ориентироваться на примеры в сети)
// в дальнейшем в примерах мы будем сталкиваться с его
применением
40
© Программа «Web-дизайн» ИБМТ БГУ

41. Max\min

Max-width – задает максимальную ширину элемента
удобный вариант для адаптивного дизайна
По аналогии работают: max-height, min-width, min-height
41
© Программа «Web-дизайн» ИБМТ БГУ

42. Свойство float

Линейное (или последовательное) расположение тегов-блоков
удобно
и
логично,
но
слишком
ограничивает
возможности
дизайна.
Возникает
необходимость
позиционировать
теги-блоки
таким
образом, чтобы нарушить линейное следование.
42
© Программа «Web-дизайн» ИБМТ БГУ

43. Свойство float

Свойство float
- еще один способ управлять расположением элементов – сделать
их плавающими
Определяет, по какой стороне будет выравниваться элемент, при
этом остальные элементы будут обтекать его с других сторон.
Когда значение свойства float равно none, элемент выводится на
странице как обычно, при этом допускается, что одна строка
обтекающего текста может быть на той же линии, что и сам
элемент.
43
© Программа «Web-дизайн» ИБМТ БГУ

44. Свойство float

Свойство float
Left Выравнивает элемент по левому краю, а все остальные
элементы, вроде текста, обтекают его по правой стороне.
Right Выравнивает элемент по правому краю, а все остальные
элементы обтекают его по левой стороне.
None Обтекание элемента не задается.
Inherit Наследует значение родителя.
44
© Программа «Web-дизайн» ИБМТ БГУ

45. Свойство float

Свойство float перемещает любой элемент в нужное место,
выравнивая его по левому или правому краю веб-страницы (или
другого тега-контейнера);
остальной контент, находящийся ниже (по структуре html-
верстки) позиционируемого плавающего элемента, смещается
вверх и плавно обтекает сам плавающий элемент
45
© Программа «Web-дизайн» ИБМТ БГУ

46. Пример

.layer1 {
float: left; /* Обтекание по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin-right: 20px; /* Отступ справа */
width: 40%; /* Ширина блока */
}
46
© Программа «Web-дизайн» ИБМТ БГУ

47. Пример

48. Задание

Используя
для
примера
описание
стилей
из
предыдущего
примера, задайте для страницы наличие двух текстовых колонок,
наполните их произвольным текстовым контентом и измените в
описании стилей форматирование.
48
© Программа «Web-дизайн» ИБМТ БГУ

49. Float

Если подряд идут несколько плавающих элементов (с одним
ориентированием, например, left)
- они будут выравниваться в
строку один за другим, пока не закончится место и тогда
следующий элемент сместиться ниже, на новую строку
49
© Программа «Web-дизайн» ИБМТ БГУ

50. Пример

div {
width: 200px;
float: left;
height: 200px;
margin: 10px;}
<div class="first">First</div>
<div class ="second">Second</div>
.first { background: #fccd95;
border: 1px solid
#f68a0a;}
У плавающего объекта
.second {background: #f59379;
обязательно
border: 1px solid
должна быть
#d84119;}
задана ширина
50
© Программа «Web-дизайн» ИБМТ БГУ

51. Пример

Создайте
пример,
где
блоки
из
пяти
компонентов
будут
располагаться равномерно по ширине страницы
51
© Программа «Web-дизайн» ИБМТ БГУ

52. Пример

// задайте для каждого блока свой фоновый цвет, чтобы увидеть
их;
// увеличьте высоту блоков, оставляя возможность
подстраиваться под объем контента
52
© Программа «Web-дизайн» ИБМТ БГУ

53. Задание

Создайте
пример,
где
четыре
блока
будут
располагаться
равномерно по ширине страницы:
-
в каждый блок будет входить графический объект и текстовое
пояснение;
-
задайте
ссылки
(«заглушки»)
и
в
стилях
опишите
их
параметры;
-
обработайте состояние hover для блоков.
53
© Программа «Web-дизайн» ИБМТ БГУ

54. Float

ВАЖНО:
Порядок написания html-кода оказывает большое влияние на
отображение плавающих элементов.
Обтекать плавающий элемент будет то содержимое, которое идет
после тега, которому задали свойство float.
54
© Программа «Web-дизайн» ИБМТ БГУ

55. Float

ВАЖНО:
Фон и границы не переносятся таким же образом – они
располагаются под плавающим элементом;
чтобы исключить
такой вариант можно:
использовать overflow: hidden;
добавление границ вокруг плавающего элемента цвета фона,
закрывающую необходимую часть;
использовать margin;
...
55
© Программа «Web-дизайн» ИБМТ БГУ

56. Clear

Есть случаи, когда необходимо отобразить содержимое тега таким
образом,
чтобы
на
него
не
влияла
способность
обтекания
плавающего элемента.
Если необходимо, чтобы обычный элемент страницы не обтекал
плавающий
элемент,
а
находился
под
ним,
то
следует
воспользоваться параметром clear, который может принимать
значения left, right, both, none
56
© Программа «Web-дизайн» ИБМТ БГУ

57. Clear

left
–
стилизуемый
элемент
смещается
вниз
относительно
плавающего с установленным левым обтеканием, но правое
обтекание остается в силе
right
-
стилизуемый
элемент
смещается
вниз
относительно
плавающего с установленным правым обтеканием, но левое
обтекание остается в силе
both – вызывает перемещение стилизуемого элемента вниз
относительно плавающего с установленными левым и правым
обтеканиями
none – сохраняется стандартная форма обтекания
57
© Программа «Web-дизайн» ИБМТ БГУ

58. Float

ИТОГО ПРИ РАБОТЕ С ПЛАВАЮЩИМИ ЭЛЕМЕНТАМИ:
ширина для плавающего задается всегда;
плавающий в коде идет первым;
стилевые компоненты (фон, рамка) ведут себя иначе, так как
контентом не являются, и не обтекают плавающие объекты;
отмену обтекания стоит задавать для первого объекта по коду,
который не должен обтекать плавающий элемент;
...
58
© Программа «Web-дизайн» ИБМТ БГУ

59. Пример

60. Пример

61. Пример

62. Пример

63. Пример

64. Пример

65. Пример

66. Пример

67. Пример

!? При увеличении/уменьшении объема контента основного блока
отображение структуры не «распалось», а перестроилось
67
© Программа «Web-дизайн» ИБМТ БГУ

68. Создание двух колонок

Создание двух колонок, CSS
#leftcol { /* Левая колонка */
float: left; /* Обтекание справа */
width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 220px; /* Отступ слева */
}
// поясните код и приведите другие способы задания двух колонок
68
© Программа «Web-дизайн» ИБМТ БГУ

69. Задание

Создайте код по заданному макету;
Колонки задайте, используя код предыдущего слайда;
Наполните произвольным контентом;
Примените произвольно стили;
Измените объем контента;
Сравните два способа создания
колонок (слайд 68 и слайд 59-67)
69
© Программа «Web-дизайн» ИБМТ БГУ

70. Создание трех колонок

Создание трех колонок, CSS
#leftcol, #centercol { /* Левая колонка */
float: left; /* Обтекание справа */
width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 420px; /* Отступ слева */
}
// предложите еще варианты
70
© Программа «Web-дизайн» ИБМТ БГУ

71. Задание

Создайте
макет
произвольным
по
указанному
текстовым
шаблону.
контентом
Наполните
с
макет
элементами
форматирования.
71
© Программа «Web-дизайн» ИБМТ БГУ

72. Примеры компоновки сайтов

73. Примеры компоновки сайтов

74. Примеры компоновки сайтов

75. Блочная верстка

С развитием CSS появились способы вёрстки без использования
таблиц. Таблицы обладают рядом особенностей, из-за которых
порой невозможно добиться желаемого эффекта. Особенно это
было актуально ранее, когда браузеры были менее совершенными
в применении современных стандартов. В таких случаях для
оформления лучше подходят альтернативные приёмы, которые и
были рассмотрены выше.
75
© Программа «Web-дизайн» ИБМТ БГУ

76. Блочная верстка

ВАЖНО:
в соответствии с концепцией блочной модели, каждый элемент
на странице представляет собой прямоугольный блок и может
иметь ширину, высоту, поля, границы и отступы.
76
© Программа «Web-дизайн» ИБМТ БГУ

77. Задание

Выполнить блочную верстку первого скролла сайта по образцу
(контент заменяем на ваш выбор)
77
© Программа «Web-дизайн» ИБМТ БГУ

78. Спасибо за внимание

English Русский Правила