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

Содержание

Содержание Типы элементов: block, inline Преобразование типов: свойство display Параметры блочных элементов Float Создание двух колонок Примеры компоновки страниц Блочная верстка

Слайд 1Верстка web-страниц
1
Блочная верстка


Мигачева Марина Евгеньевна
Минск, 2014
Блочная верстка. Часть 1


Мигачева Марина

Евгеньевна
Минск, 2016

Слайд 2Содержание
Типы элементов: block, inline
Преобразование типов: свойство display
Параметры блочных элементов
Float
Создание двух колонок
Примеры

компоновки страниц
Блочная верстка


Слайд 3Типы элементов

блочные (block);
встроенные (inline);
специальные типы для табличных элементов;
специальные типы для списков;
др.

между

типами элементов можно переключаться с помощью display

Слайд 4Типы элементов
Блочные элементы

начинаются с новой строки;
могут накладываться друг на друга;
занимают

всю доступную ширину;
могут быть вложены друг в друга;
могут обёртывать строчные элементы;
...

Слайд 5Типы элементов
Строчные элементы

не начинаются с новой строки;
они попадают в

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

Слайд 6Типы элементов
В большинстве случаев CSS работает с линейными и блочными элементами

одинаково.

Исключение составляют такие свойства как отступы и поля – для линейных элементов браузеры обрабатывают эти свойства иначе, чем для блочных

Обычно поля или отступы слева\справа работают в обычном режиме, но не вертикальные.

Слайд 7Задание
ЗАДАНИЕ:
Изучите самостоятельно, каким образом при работе с вертикальными параметрами отступов\полей

отображаются данные. Для этого:
задайте абзац (объемом на несколько строк)
выделите внутри абзаца два-три слова с помощью тега
примените к нему цвет фона и границы
задайте поля (проверьте в браузере)
задайте отступы (проверьте в браузере)
задайте поля и отступы (проверьте в браузере)


Слайд 8Блочные элементы

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника.



Такой элемент занимает всю доступную ширину (по отношению к элементу-контейнеру), высота элемента определяется его содержимым, и он всегда начинается с новой строки.
К блочным элементам относятся контейнеры
,

,

и др.


Слайд 9Пример
Что отобразится в браузере?

Слайд 10Результат
первый блок
второй блок
Нужно ли в нашем случае задавать свойства,

прописанные в стилях в строках 4 и 5?

Слайд 11Задание
Используя и стили, задайте на web-странице отображение полос цветов радуги:
ширина

на 60% экрана;
полосы центрированы;
высота для всех полос фиксированная;
расстояние между полосами одинаково для всех.

Слайд 12Задание
Измените код таким образом, чтобы расстояние между полосами увеличивалось сверху вниз

Слайд 13display
Свойство display позволяет определить, как именно отображаются элементы — как блочные

или строчные или как-то ещё.

Каждый элемент содержит значение свойства display по умолчанию, но как и с любым другим значением свойств, это значение может быть переписано.

Наиболее распространённые из значений это block, inline, inline-block и none.

Слайд 14display
С помощью свойства display можно менять тип html-элементов.

Пример,

span {
display: inline-block;
}

Линейный элемент

будет восприниматься как блочный, но по своей сути останется линейным: т.е. сработают вертикальные отступы\поля к нему будут применимы, но по своей позиции он останется в элементе-контейнере не разбивая его

Слайд 15Пример

начало текста
выделенный текст
продолжение текста

Слайд 16Пример

Слайд 17Высота и ширина
Свойства height и width назначают высоту и ширину области

стилизуемого элемента

ВАЖНО:
Данные свойства устанавливают высоту\ширину области содержимого стилизуемого элемента – пространства, в которое заключены текст, изображения и другие вложенные теги

Фактическая высота\ширина элемента состоит из ширины полей, границ, отступов и явно указанного значения ширины содержимого





Слайд 18Высота и ширина
Общее правило по регулированию высоты элементов на веб-странице утверждает:
НЕ

ДЕЛАЕМ ЭТОГО!

Высота элементов-контейнеров должна регулироваться (в большинстве случаев) объемом контента – т.е. при добавлении объема содержимого высота контейнера увеличивается, при уменьшении объема содержимого контейнера высота уменьшается



Слайд 19Ширина

Ширина блочных элементов
По умолчанию 100% от родителя
Складывается из ширины самого блока

(width), отступов (margin), полей (padding) и границ (border)





Слайд 20Ширина

div
{
width: 300px;
margin: 7px;

padding: 10px;
border: 4px solid black;
background-color: #fc0456;
}

Какая ширина у элемента div?


Слайд 21Ширина


342px

Слайд 22Ширина


342px

Слайд 23Высота
Высота блочного элемента:
Если высота слоя не установлена явно, то она вычисляется

автоматически исходя из объема содержимого.
Складывается из высоты самого блока (height), отступов (margin), полей (padding) и границ (border)
Если высота указана явно, а содержимое не помещается, ваша верстка начнет «ехать». Содержимое будет наложено поверх слоя.




Слайд 24Высота

div
{
height: 337px;
margin: 17px;

padding: 11px;
border: 14px solid black;
background-color: #fc0456;
}

Какая высота у элемента div?



Слайд 25Высота


421px

Слайд 26Цвет фона
Цвет фона блочного элемента:
Свойство background
Фоном при этом заливается область, которая

определяется значениями width, height и padding
margin не принимает участия в формировании цветной области (!по отношению к текущему элементу).




Слайд 27Пример

! Используя каскадность, сократите код

!? Все ли верно в коде

Слайд 28Результат

Слайд 29Пример

Слайд 30Результат
margin-left:auto;
margin-right:auto;
height:200px;
border: 5px; + border: 5px

Слайд 31Пример
!? Что изменится в отображении? Что изменилось в коде? Стало лучше

или нет?

Слайд 32Задание
Выполните блочную верстку следующей страницы


Слайд 33Задание







1
2
3
4-5
6
7

Слайд 34Пример
!? Проанализируйте код и результат

Слайд 35Пример
!? Измените код и проверьте результат

Слайд 36Переопределение ширины
В связи с тем, что фактическая высота\ширина объекта определяется суммированием

различных свойств (а в некоторых случаях это все усложняется при плавающей разметке) есть свойство, которое изменяет порядок вычисления браузером экранной ширины (высоты) элементов –
box-sizing




Слайд 37Переопределение ширины
Значение
content-box устанавливает ранее рассмотренный способ
padding-box сообщает браузеру, что отступы идут

как часть значения ширины\высоты (общая ширина = ширина контента + отступ слева + отступ справа)
border-box сообщает браузеру, что и отступы и рамки идут в суммарное значение ширины\высоты




Слайд 38Overflow
Когда содержимое стилизуемого тега имеет размеры больше определенных свойствами width\height,

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

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


Слайд 39Overflow
Visible – значение, принимаемое браузером по умолчанию

Scroll – добавляет полосы

прокрутки для блока-контейнера (даже если содержимое вместилось при таком значении полосы прокрутки все равно будут присутствовать)

Auto – полосы прокрутки добавятся только при необходимости

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


Слайд 40Задание
Самостоятельно изучите особенности использования данного стилевого параметра (можно ориентироваться на

примеры в сети)

// в дальнейшем в примерах мы будем сталкиваться с его применением


Слайд 41Max\min
Max-width – задает максимальную ширину элемента
удобный вариант для адаптивного дизайна

По

аналогии работают: max-height, min-width, min-height


Слайд 42Свойство float
Линейное (или последовательное) расположение тегов-блоков удобно и логично, но слишком

ограничивает возможности дизайна.

Возникает необходимость позиционировать теги-блоки таким образом, чтобы нарушить линейное следование.



Слайд 43Свойство float
Свойство float
- еще один способ управлять расположением элементов – сделать

их плавающими

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



Слайд 44Свойство float
Свойство float

Left Выравнивает элемент по левому краю, а все остальные

элементы, вроде текста, обтекают его по правой стороне.
Right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
None Обтекание элемента не задается.
Inherit Наследует значение родителя.



Слайд 45Свойство float
Свойство float перемещает любой элемент в нужное место, выравнивая его

по левому или правому краю веб-страницы (или другого тега-контейнера);

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



Слайд 46Пример
.layer1 {
float: left; /* Обтекание по правому краю */

background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin-right: 20px; /* Отступ справа */
width: 40%; /* Ширина блока */
}


Слайд 47Пример



Слайд 48Задание
Используя для примера описание стилей из предыдущего примера, задайте для страницы

наличие двух текстовых колонок, наполните их произвольным текстовым контентом и измените в описании стилей форматирование.

Слайд 49Float
Если подряд идут несколько плавающих элементов (с одним ориентированием, например, left)

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

Слайд 50Пример

First
Second

У плавающего объекта обязательно должна быть задана ширина
div

{ width: 200px;
float: left;
height: 200px;
margin: 10px;}
.first { background: #fccd95;
border: 1px solid #f68a0a;}
.second {background: #f59379;
border: 1px solid #d84119;}

Слайд 51Пример
Создайте пример, где блоки из пяти компонентов будут располагаться равномерно по

ширине страницы


Слайд 52Пример
// задайте для каждого блока свой фоновый цвет, чтобы увидеть их;
//

увеличьте высоту блоков, оставляя возможность подстраиваться под объем контента

Слайд 53Задание
Создайте пример, где четыре блока будут располагаться равномерно по ширине страницы:
в

каждый блок будет входить графический объект и текстовое пояснение;
задайте ссылки («заглушки») и в стилях опишите их параметры;
обработайте состояние hover для блоков.


Слайд 54Float
ВАЖНО:

Порядок написания html-кода оказывает большое влияние на отображение плавающих элементов.

Обтекать

плавающий элемент будет то содержимое, которое идет после тега, которому задали свойство float.


Слайд 55Float
ВАЖНО:

Фон и границы не переносятся таким же образом – они

располагаются под плавающим элементом; чтобы исключить такой вариант можно:
использовать overflow: hidden;
добавление границ вокруг плавающего элемента цвета фона, закрывающую необходимую часть;
использовать margin;
...


Слайд 56Clear
Есть случаи, когда необходимо отобразить содержимое тега таким образом, чтобы на

него не влияла способность обтекания плавающего элемента.

Если необходимо, чтобы обычный элемент страницы не обтекал плавающий элемент, а находился под ним, то следует воспользоваться параметром clear, который может принимать значения left, right, both, none


Слайд 57Clear
left – стилизуемый элемент смещается вниз относительно плавающего с установленным левым

обтеканием, но правое обтекание остается в силе
right - стилизуемый элемент смещается вниз относительно плавающего с установленным правым обтеканием, но левое обтекание остается в силе
both – вызывает перемещение стилизуемого элемента вниз относительно плавающего с установленными левым и правым обтеканиями
none – сохраняется стандартная форма обтекания


Слайд 58Float
ИТОГО ПРИ РАБОТЕ С ПЛАВАЮЩИМИ ЭЛЕМЕНТАМИ:

ширина для плавающего задается всегда;
плавающий

в коде идет первым;
стилевые компоненты (фон, рамка) ведут себя иначе, так как контентом не являются, и не обтекают плавающие объекты;
отмену обтекания стоит задавать для первого объекта по коду, который не должен обтекать плавающий элемент;
...




Слайд 59Пример

Слайд 60Пример


!? Что можно организовать иначе

Слайд 61Пример


!? Что можно организовать иначе

Слайд 62Пример
!? Для чего свойство в строке 5
Зачем оно для двух блоков

Слайд 63Пример
!? Опишите действия приведенных свойств

Слайд 64Пример

Слайд 65Пример

!? Опишите действия приведенных свойств

Слайд 66Пример

Слайд 67Пример
!? При увеличении/уменьшении объема контента основного блока отображение структуры не «распалось»,

а перестроилось

Слайд 68Создание двух колонок
Создание двух колонок, CSS

#leftcol { /* Левая колонка */

float: left; /* Обтекание справа */
width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 220px; /* Отступ слева */
}
// поясните код и приведите другие способы задания двух колонок


Слайд 69Задание

Создайте код по заданному макету;
Колонки задайте, используя код предыдущего слайда;
Наполните произвольным

контентом;
Примените произвольно стили;
Измените объем контента;
Сравните два способа создания
колонок (слайд 68 и слайд 59-67)

Слайд 70Создание трех колонок
Создание трех колонок, CSS
#leftcol, #centercol { /* Левая колонка

*/
float: left; /* Обтекание справа */
width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 420px; /* Отступ слева */
}
// предложите еще варианты


Слайд 71Задание
Создайте макет по указанному шаблону. Наполните макет произвольным текстовым контентом с

элементами форматирования.







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

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

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

Слайд 75Блочная верстка

С развитием CSS появились способы вёрстки без использования таблиц. Таблицы обладают

рядом особенностей, из-за которых порой невозможно добиться желаемого эффекта. Особенно это было актуально ранее, когда браузеры были менее совершенными в применении современных стандартов. В таких случаях для оформления лучше подходят альтернативные приёмы, которые и были рассмотрены выше.

Слайд 76Блочная верстка

ВАЖНО:
в соответствии с концепцией блочной модели, каждый элемент на странице

представляет собой прямоугольный блок и может иметь ширину, высоту, поля, границы и отступы.

Слайд 77Задание
Выполнить блочную верстку первого скролла сайта по образцу (контент заменяем на

ваш выбор)

Слайд 78Спасибо за внимание


m.migacheva@gmail.com

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

ЗАО ТЕСТПРИБОР 413
На волне здоровья 261
БЕРЕЖЛИВОЕ ПРОИЗВОДСТВОLean Production 222
Итоговая зачетная работаПрактико-ориентированный проект с применением интерактивного оборудованияРастительная азбука 194
Методическое объединение учителей начальных классов Руководитель: Таршинова Л.В. 239
Курс Javascript jQuery и lodash 297

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

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

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

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

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

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