Создание адаптивного веб-сайта для разных экранов (2011),Lynda.com

Создание адаптивного веб-сайта для разных экранов (2011)
27.02.2015

В этом курсе показано, как построить веб-сайт, который автоматически адаптирует свой макет под различные размеры экранов, ориентации, и разрешения. Рэй Виллалобос показывает, как дизайнеры и разработчики могут создать один документ HTML и изменить его отображение в десктопных браузерах и мобильных устройствах, наподобие iPhone, смартфонов Android, и планшетов. Курс охватывает создание базовой структуры HTML5, использование шаблонов сброса (reset), и стилизацию сайта с помощью CSS.

Темы курса:

Настройка тестового сервера и эмуляторов
Создание и настройка шаблона сайта
Использование бесплатных шрифтов Google
Подготовка графики
Создание файлов стилей
Загрузка внешних страниц при помощи AJAX
Создание мобильных вкладок
Определение мобильных устройств
Использование jаvascript для решения проблем скроллинга и изменения ориентации
Тестирование и отладка кода сайта

Производство: Lynda.com
Жанр: Веб разработка
Продолжительность: 3:09:00
Качество видео: PCRec
Видеокодек: Advanced Video Codec
Битрейт видео: ~277 Kbps
Размер кадра: 960х544
Аудиокодек: AAC
Битрейт аудио: 96.0 Kbps, 2 ch, 48.0 KHz

Содержание

Вступление

Приветствие
Использование файлов упражнений
Использование файла с заготовками кода

Подготовка

Установка локального сервера на Mac
Установка локального сервера на Windows
Установка симулятора iPhone
Установка эмулятора Android на Mac
Установка эмулятора Android на Windows
Работа с удалённым сервером
Тестирование на настоящих устройствах
Тур по завершённому проекту

Подходы к созданию дизайна для разных экранов

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

Создание и настройка шаблонов сайта

Шаблон сброса HTML5
Настройка шаблона HTML
Использование бесплатных веб-шрифтов Google
Модифицирование оставшейся части шаблона
Подготовка графики для веб-сайта

Создание адаптивного сайта

Создание шаблона страницы
Создание страницы меню ресторана
Разработка страницы «about us»
Отображение карты Google на странице

Создание стилей для настольных компьютеров

Создание файла стилей
Построение стилей для секции body и хедера
Настройка стилей футера
Составление меню
Стилизация страницы «about us»
Стилизация страницы с картой
Настройка дополнительных элементов

Добавление интерактивности для десктопных мониторов

Загрузка внешних страниц с помощью AJAX
Отображение слоя с фото высокого разрешения

Стилизация страниц для экранов смартфонов

Сброс и скрытие элементов
Создание кнопок меню в футере для смартфонов
Модифицирование списка меню
Создание мобильных вкладок
Модифицирование остальных страниц для мобильного макета

Добавление интерактивности jаvascript для мобильных устройств

Работоспособность вкладок
Определение мобильного устройства клиента
Правильное отображение элементов с фиксированным позиционированием в мобильных браузерах
Центрирование изображений
Возможность изменения ориентации

Стилизация страниц для планшетов