Позиционирование блоков исходя из структуры сайта. (Тема 9)

Содержание

Слайд 2

План Необходимость позиционирования блоков. Сложности и особенности позиционирования блоков. Способы позиционирования.

План

Необходимость позиционирования блоков.
Сложности и особенности позиционирования блоков.
Способы позиционирования.
Принадлежность

того или иного способа для рационального позиционирования блоков на сайте.
Конфликты позиционирования и их решение на сайте.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 3

Необходимость позиционирования блоков Блоки на сайте необходимо позиционировать для предотвращения избытка

Необходимость позиционирования блоков

Блоки на сайте необходимо позиционировать для предотвращения избытка HTML

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 4

Сложности и особенности позиционирования блоков. Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery,

Сложности и особенности позиционирования блоков.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery,

CMS

Основной сложность является позиционирование по вертикале, сложностью том плане что блоки бывают объёмными.
В данном случае блоки достаточно пустые чтобы разгружены.

Слайд 5

Сложности и особенности позиционирования блоков. Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Сложности и особенности позиционирования блоков.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery,

CMS
Слайд 6

Сложности и особенности позиционирования блоков. На представленном примере необходимо отметить что

Сложности и особенности позиционирования блоков.

На представленном примере необходимо отметить что

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 7

Способы позиционирования Можно использовать следующие способы: Табличный (display:table;display:table-cell;) Блочный (display:inline-block; margin:

Способы позиционирования

Можно использовать следующие способы:
Табличный (display:table;display:table-cell;)
Блочный (display:inline-block; margin: 0 auto; text-align:center;)
Обтекание

(float:left;clear:both;)
Позиционный (position:absolute;position:realative;)

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 8

Табличный способ В данном случае происходит позиционирование при формировании структуры таблицы

Табличный способ

В данном случае происходит позиционирование при формировании структуры таблицы при

помощи display:table, display:table-cell.
Реализуйте данный пример, используя задание 1.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 9

Табличный способ Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Табличный способ











class=“item”>




Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 10

Табличный способ Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS При использовании

Табличный способ

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

При использовании табличного способа,

все колонки, которые используются в таблице или в строке устанавливаются в ряд.
И все соответствующие колонки (первая колонка строки, и все первые колонки остальных строк, будут одной ширины). Ни одна колонка не будет перенесена на новую строку, а будет пропорционально ужиматься.
Данный способ необходим для позиционирования содержимого сайта относительно друг друга по вертикале по центру. Так же можно позиционировать и по верху и по низу.
(vertical-align: top bottom middle;)
Слайд 11

Табличный способ Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Табличный способ

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 12

Блочный При использовании блочного способа, мы так же можем позиционировать блоки

Блочный

При использовании блочного способа, мы так же можем позиционировать блоки по

вертикале относительно друг другу, но если блоки не вмещаются то они сбрасываются друг под друга.
В отличии от табличного способа.
Единственный минус – между блоками появляется невидимый отступ в размере 2-3 px.
Данный способ удобно использовать, если нет необходимости в соблюдении границ.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 13

Блочный Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Блочный

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 14

Блочный При формировании блоков нет необходимости соблюдать строгие отступы, поэтому достаточно

Блочный

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

конструкцию вида:

“”


“”


“”



.list{
text-align: center;
}
.item{
display:inline-block;
margin: 0px 40px;
}
Реализуйте пример используя картинки и тексты, задание 2.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 15

Обтекание Данный способ основан на обтекании бока, другим содержимым: Float:left –

Обтекание

Данный способ основан на обтекании бока, другим содержимым:
Float:left – обозначает что

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 16

Обтекание Следует выделить 1-но НО, обтекаемый блок никак не влияет на

Обтекание

Следует выделить 1-но НО, обтекаемый блок никак не влияет на высоту

своего родителя.
Если у нас 2 блока которые обтекают друг друга (присвоено обоим св-во float:left), и в родителе нет никаких других элементов,
То высота родителя будет 0px.
Иначе, если есть блоки без обтекания, то высота относительно этого бока.
Пример на следующем слайде.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 17

Обтекание Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Обтекание

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 18

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

Обтекание

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

отменить обтекание при помощи clear:both.
.cfix:after{
content:” “;
display:block;
clear:both;
}

“”


“
”

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 19

Обтекание Помимо св-ва float:left, так же существует и свойство right, которое

Обтекание

Помимо св-ва float:left, так же существует и свойство right, которое идентично,

но обтекание совершено по правой стороне.
Выполните задание из шаблона flowers (Главная.psd).
Сверстайте блок «ЧТО ТАКОЕ АУКЦИОН FLORA HOLLAND?».

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 20

Позиционный Данный способ использует свойство position, которое «вытягивает» элемент из html

Позиционный

Данный способ использует свойство position, которое «вытягивает» элемент из html элемента,

и позволяет выставить позицию относительно тэга body.
Position:absolute – позиционирование относительно тэга body;
Position:fixed – позиционирование относительно окна клинекта (браузера), и позиция элемента фиксируется при прокрутке.
Position:static – исходное значение всех html тэгов, позиционирования, относительно других тэгов.
Position:relative – позиционирование относительно текущего места, не «вытягивая» элемент из кода.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 21

Позиционный Выполните вёрстку следующей структуры: Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Позиционный

Выполните вёрстку следующей структуры:

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 22

Позиционный Пропишите всем блокам display:table; Для чёрного блока добавьте св-ва: Position:relative;

Позиционный

Пропишите всем блокам display:table;
Для чёрного блока добавьте св-ва: Position:relative; Left:300px; Top:200px;

Width:300px; height: 400px;
Для красного блока добавьте св-ва: ширину и высоту на 100px меньше чем у чёрного; Position:absolute; Left: 50px; Top:50px;
Для тэга body пропишите высоту 2000px;
Для чёрного блока пропишите св-во position:fixed;
Для красного пропишите position:static;
Создайте в чёрном блоке тэг P и наполните его текстом;
Пропишите чёрного блоку padding-left:115px; position:relative; min-height: 100px;
Красному блоку пропишите ширину и высоту по 100px, position:absolute; left:0px; top:calc(50% - 50px); background-color:#eee;
Добавьте чёрному блоку текста в 3 раза больше чем было

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 23

Позиционный Сформируйте тот же блок что и в Обтекании, но при

Позиционный

Сформируйте тот же блок что и в Обтекании, но при помощи

позиционного способа.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 24

Принадлежность того или иного способа для рационального позиционирования блоков на сайте.

Принадлежность того или иного способа для рационального позиционирования блоков на сайте.


Табличный:
Содержимое по вертикале по центру;
Реализация таблицы.
Блочный:
Отсутствие необходимости наличия межблочных отступов;
Позиционировать ряд по центру;
Позиционировать блоки относительно друг друга по центру или иным параметрам.
Обтекание:
Необходимости учёта межблочных отступов;
Смена позиций обтекаемых блоков без вмешательства в HTML;
Точные размеры блоков;
Позиционный:
Небольшие блочные конструкции;
Позиционирование по вертикале по центру;
Гибкое размещение позиционных блоков.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 25

Конфликты позиционирования и их решение на сайте. Табличный: Отсутствие возможности контролировать

Конфликты позиционирования и их решение на сайте.

Табличный:
Отсутствие возможности контролировать ширину блоков;
Сбрасывание

крайних блоков на иную строчку.
Блочный:
Мнимые отступы между блоками;
Сбрасывание не вмещаемых блоков на новую строку.
Обтекание:
Не учитывается высота обтекаемого блока для родителя.
Позиционный:
Минус использования конкретных значений (left:30px; top:50%;);
Реализация сложных конструкций (3 и более элементов в раде).

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 26

Отступы Стиль margin – отступы блока. Записывается в полной форма: Margin:

Отступы

Стиль margin – отступы блока.
Записывается в полной форма:
Margin: top right bottom

left;
margin: 12px 0px 30px 10px;
Короткая запись:
Margin: top (right left) bottom;
margin: 10px 30px 20px;
Margin: (top bottom) (right left);
margin: 10px 30px;
Margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 27

Отступы Стиль padding – внутренний отступ блока; Формат записи соответствует записи

Отступы

Стиль padding – внутренний отступ блока;
Формат записи
соответствует записи margin.

Успех ВЕРСТКА

САЙТА: HTML, CSS, jQuery, CMS
Слайд 28

Домашнее задание Сформировать структуру курсового сайта. Сформировать структуру внутренних блоков. Реализовать

Домашнее задание

Сформировать структуру курсового сайта.
Сформировать структуру внутренних блоков.
Реализовать позиционирование исходя из

необходимости в проекте.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

- Предыдущая
Основные виды и классификация грунтов
Следующая -
Инфразвук. Влияние инфразвука на организм человека

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

Презентация Норильский никель: логистическая система
АРХИП ИВАНОВИЧ КУИНДЖИ (1842-1910)
The «Millennium» bridge
Аналоговые электронные вольтметры
Презентация____
разделение_смесей_19-09-19
Презентация "Архитектура и дизайн конструктивные искусства в ряду пространственных искусств" - скачать презентации по МХК
Традиционные теории обучении
ФУНКЦИИ КРОВООБРАЩЕНИЯ И АВТОМАТИЯ СЕРДЦА
Влияние планирования продаж и операций на логистические решения компании
Кинематика точки
Международные отношения в 80-е годы XX века
Реферат по зданию Сиднейская Опера
Управление тепловыми электростанциями
Эшмоловский музей
Непрерывность функции в точке и на интервале
Der Verkehr in einer Groβstadt. Wie orientiert man sich hier?
London is the capital of Great Britain
Моя история в Medialab
Просте речення
Реформы 1860 – 1870 гг. Исполнитель: Куликова Ю. Т-104
Training Manual
Поиск информации и поисковые запросы
Тайный покупатель. Структура
Весна
Патогенные спирохеты
Валеология наука о здоровье
Классный час «Выбор профессии в условиях рынка» Подготовила: Курчина Е. М. классный руководитель 11 класса МБОУ «СОШ№7» Гапч