Обучающее видео

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

Lynda.com. Создание адаптивного веб-сайта для разных экранов
Русская версия курса!

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

Темы курса:

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

Содержание:

  • Вступление (3m 33s)
    • Приветствие
    • Использование файлов упражнений
    • Использование файла с заготовками кода
  • Подготовка (27m 50s)
    • Установка локального сервера на Mac
    • Установка локального сервера на Windows
    • Установка симулятора iPhone
    • Установка эмулятора Android на Mac
    • Установка эмулятора Android на Windows
    • Работа с удалённым сервером
    • Тестирование на настоящих устройствах
    • Тур по завершённому проекту
  • Подходы к созданию дизайна для разных экранов (8m 34s)
    • Понимание подходов к созданию дизайна
    • Создание дизайна для мобильных устройств
    • Работа с адаптивным дизайном
  • Создание и настройка шаблонов сайта
    • Шаблон сброса HTML5
    • Настройка шаблона HTML
    • Использование бесплатных веб-шрифтов Google
    • Модифицирование оставшейся части шаблона
    • Подготовка графики для веб-сайта
  • Создание адаптивного сайта (13m 57s)
    • Создание шаблона страницы
    • Создание страницы меню ресторана
    • Разработка страницы «about us»
    • Отображение карты Google на странице
  • Создание стилей для настольных компьютеров (32m 54s)
    • Создание файла стилей
    • Построение стилей для секции body и хедера
    • Настройка стилей футера
    • Составление меню
    • Стилизация страницы «about us»
    • Стилизация страницы с картой
    • Настройка дополнительных элементов
  • Добавление интерактивности для десктопных мониторов (25m 29s)
    • Загрузка внешних страниц с помощью AJAX
    • Отображение слоя с фото высокого разрешения
  • Стилизация страниц для экранов смартфонов (23m 58s)
    • Сброс и скрытие элементов
    • Создание кнопок меню в футере для смартфонов
    • Модифицирование списка меню
    • Создание мобильных вкладок
    • Модифицирование остальных страниц для мобильного макета
  • Добавление интерактивности JavaScript для мобильных устройств (23m 43s)
    • Работоспособность вкладок
    • Определение мобильного устройства клиента
    • Правильное отображение элементов с фиксированным позиционированием в мобильных браузерах
    • Центрирование изображений
    • Возможность изменения ориентации
  • Стилизация страниц для планшетов (7m 3s)
    • Изменение кода CSS страницы меню на планшетах
    • Изменение CSS для правильного отображения остальных страниц на планшете
  • Исправление проблем (6m 25s)
    • Тестирование и отладка
  • Заключение (2m 20s)
    • Следующие шаги
Создание адаптивного веб-сайта для разных экранов

Язык уроков: русский
Продолжительность: 03:09:00

Качество видео: PCRec
Видеокодек: AVC
Битрейт видео: ~277 Kbps
Размер кадра: 960х544

Аудиокодек: AAC
Битрейт аудио: 96.0 Kbps, 2 ch, 48.0 KHz

 

Скачать обучающее видео (609,53 МБ):

-A.L.E.X.- 28/02/15 Просмотров: 1297
0
Varaksik 06 июля 2017, 11:28:37

Эх, удалено везде....

s123w 28 февраля 2015, 22:51:20

Интересная проблема адаптивного сайта. Многие профессионалы рекомендуемый под каждый девайс делать отдельные страницы на сайте. Причина - нарушения форматирования контента. Но при этом предлагаю обратить внимание на последнюю версию WYSIWYG Web Builder, в данной версии, скажу со 100% уверенность, появилась возможность создавать адаптивные сайты, да и во многих профессиональных продуктах эта функция появилась. Вот только не проверял лично как это работает, нет необходимости.

vajrakiller 28 февраля 2015, 18:34:06

Интересно только когда cwer станет адаптивным? laughing