Верстка. Логические блоки. Боевой шаблон для работы презентация

Слайд 1
Верстка. Логические блоки. Боевой шаблон для работы.

Слайд 2
Добавляем настройки

Слайд 3
X-UA-Compatible
Internet Explorer - может работать в режиме эмуляции, пародируя свои старые

Слайд 4
Что это все значит
IE=edge - Устанавливает IE в режим отображение последней

Слайд 5
viewport
Viewport - сообщает мобильным устройствам, через окно какого размера в масштабе

Слайд 6
настройка viewport
width - задается просто числом (без указаний единиц), должен быть

Слайд 7
владельцам старых браузеров нужно об этом сообщить
Conditional Comments - отображаются в

Слайд 8
Подготавливаем стили

Слайд 9
html & body

html {
width: 100%;
height: 100%;
}

body {
width: 100%;

Слайд 10
“причесываем” теги

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

Слайд 11

Normalize.css
Meyer Reset
Normalize.css убирает только различия в браузерах, давая разработчикам надежный фундамент

Слайд 12
Логические блоки

Слайд 13
Что такое “логический блок”
логический блок - это логический элемент интерфейса, из

Слайд 14
логические блоки интерфейса
Логические блоки, например, можно выделить из частей остающихся неизменными

Слайд 15
HTML5 думает о нас
Очевидные:

header
footer
nav


Верстка на состоящая только из дивов, это

Слайд 16
блоки могут содержать другие блоки
Крупные блоки интерфейса можно разбить еще на

Слайд 17
старые браузеры, знакомьтесь - HTML5!



Modernizr - обеспечивает функционал HTML5

Слайд 18
Построение рабочего шаблона.

Слайд 19
“враппер”

.wrapper {
position: relative;
min-height: 100%;
overflow: hidden;
}
css
wrapper - функциональный блок,

Слайд 20


прижатие футера
футер - необходимо прижимать книзу страницы, особым образом, что бы

Слайд 21
это делается при помощи вспомогательного блока

css

высоту вспомогательного блока стоит сделать такую же как и высоту футера