Веб-разработка. Верстка презентация

Содержание

Предпосылки

Слайд 1Веб-разработка
Лекция №3. Верстка.
Худяев Алексей Сергеевич
Тензор, 2016

Слайд 2Предпосылки

Слайд 3Предпосылки
Веб-страницы развиваются. Растут требования к оформлению. Это уже не просто текстовый

документ, это менюшки, логотипы, баннеры, и прочее «оформление»

Слайд 4Предпосылки
CSS еще не является основным средством оформления. Для оформления используются
Многочисленные картинки
Атрибуты

на тэгах
Для создания «сетки» используются таблицы
Для задания фиксированных размеров в сетке использовали «спейсеры»
(http://en.wikipedia.org/wiki/Spacer_GIF)

Слайд 5Предпосылки

Слайд 6Предпосылки
Таблицы использовались даже для того, что бы сделать блок со скругленными

углами!


Слайд 7Предпосылки
Недостатки:
Все в одной куче
Очень много кода
Трудно вносить изменения
Страдает индексация поисковиками
Страдает совместимость

с устройствами

Слайд 8Предпосылки
Что же делать? CSS!
Позволяет отделить стиль от оформления
Позволяет уменьшить размер сайта

(в байтах)
Улучшается кэширование
Лучше для поисковиков
Разные представления для разных устройств. Выше совместимость.

Слайд 9CSS Box Model

Слайд 10CSS Box Model

Любой элемент на странице представляется прямоугольным блоком или боксом.
У

любого бокса есть размеры
Боксы можно вкладывать друг в друга

Слайд 11CSS Box Model

Слайд 12CSS Box Model
Область содержимого (область контента)
Здесь располагается содержимое блока (в т.ч.

и вложенные блоки)
На область контента распространяется фон (если есть)

Слайд 13CSS Box Model
Отступы (паддинги, padding)
Промежуток между рамкой и областью содержимого
На отступ

распространяется фон (если он есть)


Слайд 14CSS Box Model
Граница, рамка, бордер (border)
Рамка блока
Может иметь толщину но быть

прозрачной


Слайд 15CSS Box Model
Границы, маржины (margin)
Отступ от данного блока до окружающих

Слайд 16CSS Box Model
Размеры блока
width
height

Размерность НЕ включает в себя padding и border



Слайд 17CSS Box Model
.box {
width: 200px;
padding: 20px;

border: 1px solid red;
margin: 15px;
}

Итоговая ширина: 200 + 20 * 2 + 1 *2 = 242px


Слайд 18CSS Box Model
.box {
width: 100%;
padding: 20px;

border: 1px solid red;
margin: 15px;
}

???


Слайд 19Позиционирование

Слайд 20Позиционирование

4 типа позиционирования:
Static
Absolute
Relative
Fixed

Слайд 21Позиционирование

Static

Слайд 22Позиционирование

Absolute

Слайд 23Позиционирование

Relative

Слайд 24Позиционирование

Fixed
Так же, как и absolute, но НЕ скроллируется вместе со страницей.

Если

не влез, то «скрытую» часть никогда не увидеть. Браузер не покажет для нее скролл.

Слайд 25Координаты

Слайд 26Координаты
При абсолютном и относительном позиционировании (absolute и relative) можно управлять «координатами»

элемента.

.absBox {
left: 10px;
top: 20px;
}

Слайд 27Координаты
При абсолютном и относительном позиционировании (absolute и relative) можно управлять «координатами»

элемента.

.absBox {
right: 30px;
bottom: 50px;
}


Слайд 28Координаты
При абсолютном и относительном позиционировании (absolute и relative) можно управлять «координатами»

элемента.

.absBox {
left: 10px;
right: 30px;
top: 20px;
bottom: 50px;
}


Слайд 29Координаты
При абсолютном и относительном позиционировании (absolute и relative) можно управлять «координатами»

элемента.

.absBox {
left: 0;
right: 0;
top: 0;
bottom: 0;
}


Слайд 30«Точка отсчета»

Слайд 31«Точка отсчета»

Координаты для left, top, right, bottom рассчитываются от ближайшего предка

с позиционированием, отличным от static.
Если такового нет – рассчитываются от окна.

Для этого часто используют position: relative без задания каких-либо смещений.

Слайд 32Поток

Слайд 33Поток

Два основных типа боксов
Блочные
Строчные

Управление типом: свойство display
Блочные == block
Строчные == inline

Слайд 34Поток

В чем разница?

Блочные:
Занимают всю ширину если не указано обратное
Высота рассчитывается

по вложенным боксам если не задано обратное

Слайд 35Поток

В чем разница?

Строчные
Ширина и высота – строго по контенту
Не применяются вертикальные

маржины и паддинги

Слайд 36Поток

В потоке элементы стоят друг за другом.

Строчные без переносов.
Блочные –

с переносом.

Слайд 37Поток

Строка
Строка с выделенным текстом


Строка
Строка с выделенным текстом

Слайд 38Поток

p { display: inline; }

Строка Строка с выделенным текстом

Слайд 39Поток

p { display: inline; }
strong { display: block; }

Строка Строка с


выделенным
текстом

Слайд 40Поток

Ширина блочного бокса по умолчанию рассчитывается автоматически.
Блок будет занимать полную доступную

ширину с учетом маржинов, бордеров и паддингов

Слайд 41Выравнивание блоков

Слайд 42Выравнивание блоков

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

Слайд 43Выравнивание блоков

Вертикальное выравнивание...

Слайд 44Выравнивание блоков

Слайд 45Выравнивание блоков

Flexbox!
Вертикальное выравнивание!

см. http://frontender.info/a-guide-to-flexbox/

Слайд 46Схлопывание границ

Слайд 47Схлопывание границ
Заголовок
Абзац текста...

h1 { margin: 20px 0; }
p { margin: 10px

0; }

Слайд 48Схлопывание границ
Заголовок
Абзац текста...

h1 { margin: 20px 0; }
p { margin: 10px

0; }

Сколько между блоками?

Слайд 49

Схлопывание границ
Заголовок
Абзац текста...

h1 { margin: 20px 0; }
p { margin: 10px

0; }

Сколько между блоками?
Ответ: 30px



Слайд 50

Схлопывание границ
Заголовок
Абзац текста...

h1 { margin: 20px 0; }
p { margin: 10px

0; }

Сколько между блоками?
Ответ: 30px 20px



Слайд 51Схлопывание границ

Абзац...
Абзац...


div { margin: 5px 0; }
p

{ margin: 10px 0; }

Слайд 52

Схлопывание границ

Абзац...
Абзац...


div { margin: 5px 0; }
p

{ margin: 10px 0; }

Слайд 53

Схлопывание границ

Абзац...
Абзац...


div { margin: 5px 0; }
p

{ margin: 10px 0; }


Слайд 54

Схлопывание границ

Абзац...
Абзац...


div { margin: 5px 0; }
p

{ margin: 10px 0; }



Слайд 55

Схлопывание границ

Абзац...
Абзац...


div { margin: 5px 0; }
p

{ margin: 10px 0; }





Слайд 56

Схлопывание границ

Абзац...
Абзац...


div { margin: 5px 0 15px

0; }
p { margin: 10px 0; }

Слайд 57

Схлопывание границ

Абзац...
Абзац...


div { margin: 5px 0 15px

0; }
p { margin: 10px 0; }


Слайд 58

Схлопывание границ

Абзац...
Абзац...


div { margin: 5px 0 15px

0; }
p { margin: 10px 0; }



Слайд 59

Схлопывание границ

Абзац...
Абзац...


div { margin: 5px 0 15px

0; }
p { margin: 10px 0; }





Слайд 60Схлопывание границ
Зачем это нужно?

Слайд 61Схлопывание границ
Зачем это нужно?

p { margin: 5px 0; }

Ожидание: 5px
Реальность: 10px

Схлопывание:

у элемента всегда те границы, которые ему нужны





Слайд 62Схлопывание границ
Зачем это нужно?



...





Слайд 63Схлопывание границ
Зачем это нужно?



...







Слайд 64Схлопывание границ
Зачем это нужно?



...







Слайд 65Схлопывание границ. Проблемы...

Слайд 66Проблемы


Тензор
С 1996

года...



body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }

Слайд 67Проблемы


Тензор
С 1996

года...



body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }


Слайд 68Проблемы


Тензор
С 1996

года...



body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }



Слайд 69Проблемы


Тензор
С 1996

года...



body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }





Слайд 70Проблемы


Тензор
С 1996

года...



body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }

Границы вывалились из #heading!!!







Слайд 71Проблемы
Как починить?

Установить блоку, из которого вывалились границы бордер или паддинг

#heading {

padding-top: 1px;
/* или */
border-top: 1px solid transparent;
}

Слайд 72Проблемы
Как починить?

Установить блоку, из которого вывалились границы бордер или паддинг

Плюсы: самый

простой способ
Минусы: размер блока увеличится

Слайд 73Проблемы
Как починить?

Заменить маржин на паддинг с нужной стороны

h1 {

margin: 10px;
margin: 0 10px 10px 10px;
padding-top: 10px;
}

Слайд 74Проблемы
Как починить?

Заменить маржин на паддинг с нужной стороны

Плюсы: визуально полностью идентично

тому, что хотели
Минусы: неочевидный набор правил

Слайд 75Проблемы
Как починить?

«Вырвать» из потока

#heading {
position: absolute;
/* или

*/
float: left;
}

Слайд 76Проблемы
Как починить?

«Вырвать» из потока

Плюсы: визуальная идентичность ожидаемому
Минусы: меняется раскладка, усложняются стили

Слайд 78Float

...
...
...


#a
#b
#c

Слайд 79Float

...
...
...


#b {


float: left;
}


#a

#b

#c

Слайд 80Float
Смещается к указанной стороне
Перестает занимать место, схлопывается


#a
#b
#c

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

подтягиваются на его место


#a

#c

#b

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

подтягиваются на его место
Строчные боксы внутри пододвинувшихся начинают обтекать его.



#a

xxxx
xxxxxxxx
xxxxxxxxxx

#b

Слайд 83Float
#b, #c { float: left }

#a
#c
#b

Слайд 84Float
#b, #c { float: left }

Если влезет, подтянется к предыдущему float-блоку

#a
#c
#b

Слайд 85Float
#b, #c { float: left }

Если влезет, подтянется к предыдущему float-блоку
Если

не влезет, встанет за ним


#a

#c

#b

Слайд 86Float
Что случается с родительским блоком?

Он не учитывает float-боксы при расчете высоты

#a
#c
#b

Слайд 87Float
Что случается с родительским блоком?

Он не учитывает float-боксы при расчете высоты

#a
#c
#b

Слайд 88Float
Что случается с родительским блоком?

Он не учитывает float-боксы при расчете высоты

При

этом идущие за родителем блоки тоже подтянутся!


xxxxxxxxxx
xxxxxx
xxx

xxx
xxx

#a

#c

#b

Слайд 89Float
Что делать, если мы хотим предотвратить «подтягивание» блока?

xxxxxxxxxx
xxxxxx
xxx

xxx
xxx

#a

#c

#b

Слайд 90Float
Что делать, если мы хотим предотвратить «подтягивание» блока?

Свойство clear

Значения:
left
right
both

xxxxxxxxxx
xxxxxx
xxx

xxx
xxx

#a

#c

#b

Слайд 91Float
Что делать, если мы хотим предотвратить «подтягивание» блока?

Свойство clear

Значения:
left – нет

флоатов слева
right – нет флоатов справа
both – нет по любой стороне


xxxxxxxxxx
xxxxxx
xxx

xxx
xxx

#a

#c

#b

Слайд 92Float
Что делать, если мы хотим предотвратить «подтягивание» блока?

Свойство clear

.someblock {

clear: left;
}


.someblock

#a

#b

Слайд 93Float
Что делать, если мы хотим предотвратить «подтягивание» блока?

Свойство clear

.someblock {

clear: left;
}


Xxxxxxxxxx
Xxxxxx
xxx

#a

#b

Слайд 94Полезные ссылки

Слайд 95Учебник
http://softwaremaniacs.org/blog/category/primer/ - отличный учебник по верстке
http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/
http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/

Слайд 96Вопросы есть?

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

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

Анализ видов, последствий и причин потенциальных несоответствий 418
Московский комитет образования М НОГОПРОФИЛЬНЫЙ ТЕХНИЧЕСКИЙ ЛИЦЕЙ 1501 Отчёт по практике на тему: Двигатель внутреннего сгорания Автор: Александров Кирилл. 271
Тормозные стенды BT 6xx 268
Интеграция риск-менеджмента в ключевые процессы принятия решений 306
Авиационные приборы и комплексы. Конструкция многофункционального датчика МФИ-35 392
МОУ Большеокуловская СОШСоциально-психологическая служба Шаги навстречу как инновационная форма работы с детьми асоциального поведения и их семьями 199

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

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

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

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

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

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

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