Відеоконференція в 8.55

Тема програми: Проектування та верстка веб-сторінок.

Тема уроку: Адаптивна верстка.

Адаптивна верстка змінює дизайн сторінки в залежності від поведінки користувача, платформи, розміру екрану і орієнтації девайса і є невід'ємною частиною сучасної веб-розробки. 

Пошукові системи використовують ряд критеріїв для оцінки адаптивності сайту при перегляді на мобільних пристроях. Google намагається спростити користування Інтернетом для власників смартфонів і планшетів, відзначаючи в мобільній видачу адаптовані під мобільні пристрої сайти спеціальною позначкою mobile-friendly. 

Адаптивна верстка передбачає відсутність горизонтальної смуги прокрутки і масштабованих областей при перегляді на будь-якому пристрої, читабельний текст і великі області для клікабельних елементів. 

Для  дизайну ширина основного контейнера сайту задається в %, при цьому вона може бути дорівнює як 100% ширини вікна браузера, так і менше. Ширина стовпців сітки також задається в %. В адаптивному дизайні ширина основного контейнера і стовпців сітки фіксується за допомогою значень в px.

Приклад верстки головної сторінки

Сторінка складається з трьох основних блоків: 

• заголовок (шапка), 
• контейнер-обгортка для основного вмісту
• нижній колонтитул (футер). 

Презентація з теми

Домашнє завдання: Створити та вивчити  конспект. Фото конспекту надсилайте в особисті повідомлення у вайбер.