Создание адаптивного дизайна сайта
презентация к уроку на тему

Слайд 1

Слайд 2

Цель: освоить правила CSS , используемые для создания дизайна для мобильных версий сайта

Слайд 3

Адаптивный веб-дизайн (англ. Adaptive Web Design) дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Слайд 4

Принципы адаптивного дизайна Адаптивный шаблон сайта, способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона; Адаптация и перемещение блоков контента, способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете; Адаптация изображений, способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером; Использование гибкой сетки, позволяет максимально быстро изменять конструкцию макета; Скрытие менее важных блоков, на небольших экранах некоторые блоки могут скрываться; Переработка юзабилити элементов навигации, так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными , их перерабатывают, делая удобно-используемыми; Упрощение ряда элементов на веб — странице, некоторые элементы упрощаются для использования на мобильных устройствах; Адаптация видео контента, также следует учесть и адаптацию видео; Использование медиа — запросов ( media query ), позволяют создавать адаптивный макет.

Слайд 5

Способы создания мобильной версии Разработка другой версии сайта и публикация с доменом высшего уровня . mobi TLD Разработка и публикация отдельного web -сайта на собственном домене, оптимизированном для использования на мобильных устройствах Создание одного сайта с разными стилями для мобильных и настольных браузеров

Слайд 6

Сравнить версии сайтов: http://www.rambler.ru/ http://m.rambler.ru/

Слайд 7

Задание Используя рекомендации корпорации W3 https://www.w3.org/2007/02/mwbp_flip_cards.html.en составить рекомендации по дизайну версий сайтов для мобильных устройств: Оптимизация макета Оптимизация навигации Оптимизация изображений Оптимизация текста

Слайд 8

META - теги < meta > определяет метатеги , которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег , все они размещаются в контейнере < head >. Атрибуты charset - задает кодировку документа. content - устанавливает значение атрибута, заданного с помощью name или http-equiv . http-equiv - предназначен для конвертирования метатега в заголовок HTTP. name - имя метатега , также косвенно устанавливает его предназначение. v iewport мета-тег, для масштабирования дизайна, чтобы установить ширину и высоту окна на мобильных устройствах.

Слайд 9

Директивы мета-тега viewport Параметр Значения Описание width Принимает целочисленное значение в пикселях или значение device-width Устанавливает ширину области viewport height Принимает целочисленное значение в пикселях или значение device-height Устанавливает высоту области viewport initial-scale Число с плавающей точкой от 0.1 и выше Задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования user-scalable no/yes Указывает, может ли пользователь с помощью жестов масштабировать страницу minimum-scale Число с плавающей точкой от 0.1 и выше Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования maximum-scale Число с плавающей точкой от 0.1 и выше Задает максимальный масштаб размера viewport . Значение 1.0 задает отсутствие масштабирования

Слайд 10

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

Слайд 11

Медиа запросы CSS Подключение таблицы стилей для мобильных устройств. Запросы начинаются с правила @ media , после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. @media only screen and ( max-devic e -width:480px ) { #header { background-image:url (mobil.gif);} } правила, помощью которых можно создавать адаптивный макет, который будет подстраиваться под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста.

Слайд 12

Типы носителей Тип Описание all Все типы. Это значение используется по умолчанию. braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. embossed Принтеры, использующие для печати систему Брайля. handheld Смартфоны и аналогичные им аппараты. print Принтеры и другие печатающие устройства. projection Проекторы. screen Экран монитора. speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). tv Телевизоры.

Слайд 13

Параметры медиазапросов Параметр Описание width Проверяет ширину области просмотра. Значения задаются в единицах длины, px , em и т.д., например, ( width : 800px). Обычно для проверки используются минимальные и максимальные значения ширины. min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе. height Проверяет высоту области просмотра. Значения задаются в единицах длины, px , em и т.д., например, ( height : 500px). Обычно для проверки используются минимальные и максимальные значения высоты. min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе. aspect-ratio Проверяет соотношение ширины к высоте области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как ( aspect-ratio : 16/9). min-aspect-ratio проверяет минимальное соотношение, max-aspect-ratio — максимальное соотношение ширины к высоте области просмотра. orientation Проверяет ориентацию области просмотра. Принимает два значения: ( orientation : portrait ) и ( orientation : landscape ).

Слайд 14

Параметры медиазапросов Параметр Описание resolution Проверяет разрешение экрана (количество пикселей). Значения также могут проверять количество точек на дюйм ( dpi ) или количество точек на сантиметр ( dpcm ), например, ( resolution : 300dpi). min-resolution проверяет минимальное разрешение экрана, max-resolution — максимальное. color Проверяет количество бит на каждый из цветовых компонентов устройства вывода. Например, (min-color: 4) означает, что экран конкретного устройства должен иметь 4-битную глубину цвета. min-color проверяет минимальное количество бит, max-color — максимальное количество бит. color-index Проверяет количество записей в таблице подстановки цветов. В качестве значения указывается положительное число, например, (color-index: 256). min-color-index проверяет минимальное количество записей, max-color-index — максимальное количество записей. monochrome Проверяет количество битов на пиксель монохромного устройства. Значение задается целым положительным числом, например, (min-monochrome: 8). min-monochrome проверяет минимальное количество битов, max-monochrome — максимальное количество битов. -webkit-device-pixel-ratio Задаёт количество физических пикселей устройства на каждый css -пиксель.

Слайд 15

Полезные приемы при проектировании адаптивного сайта Гибкие изображения: при max-width : 100% изображения не выйдет за пределы ширины элемента-родителя. Использование данного свойств для создания адаптивного фонового изображения для двух колонок. Поля ( margin ) и отступы ( padding ): поля ( margin ) и отступы ( padding ) элемента, если задавать в процентах относительно ширины элемента контейнера. Высота: высота элемента, заданная в процентах, рассчитывается относительно высоты элемента-родителя (кроме этого, если высота элемента-предка, от которого идет расчет, равна auto , то и высота самого элемента станет равной auto независимо от указанных процентов).

Слайд 16

Опрос по теме

Слайд 17

Вопрос 1 Укажите, какая из характеристик устройств является наиболее значительным при разработки адаптивной версии сайта?

Слайд 18

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

Слайд 19

Вопрос 3 Укажите, для каких условий задан стиль сайта, расположенный в файле iphone4.css" ?

Слайд 20

Вопрос 4 Укажите, какие заданы условия для применения указанного правила ? @media screen and (min-width : 600px) and (max-width: 1000px) { body { background: #ccc; } /* Ваш код CSS*/ }

Слайд 21

Вопрос 5 Укажите, какие заданы условия для применения указанного правила, как изменится дизайн сайта? @media screen and (orientation: landscape) { menu { float: left; } }

Слайд 22

Вопрос 6 Вариант 1 div.container { width: 96%; max-width: 960px; margin: 0 auto; } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ } Вариант 2 div.container { width: 1024 px ; margin: 100px 20 px ; } img { width: 500px; /* ширина картинки */ height: 320px; /* высота картинки */ } В каком из случаев выполнена адаптивная верстка элемента сайта? Обоснуйте ответ.

Слайд 23

Домашнее задание Разработать станицу сайта с использованием адаптивных изображений на примере: http://dbmast.ru/adaptivnye-izobrazheniya-s-pomoshhyu-css Результат работы: Веб-страница Внешний файл стилей