Практика верстки под мобильные устройства

С помощью практического пошагового видеокурса «Практика верстки под мобильные устройства» Вы узнаете как создать сайт, который одинаково хорошо выглядит и идеально функционирует на всех типах устройств. Любые сайты (в т.ч. на движке WordPress) Вы сможете с легкостью делать адаптивными ко всем существующим устройствам!

Мы живем в такое время, когда настольная стационарная аппаратура уверенным и стремительным шагом переходит в планшеты и смартфоны. Время, когда даже ноутбуки смещаются на второй план. А значит, растет спрос на сайты под планшетные и мобильные устройства. Что же лучше использовать — резиновый сайт или адаптивную верстку?

Резиново-адаптивная верстка — универсальный и самый оптимальный на сегодня вариант. Единый дизайн и верстка — и Ваш сайт отлично смотрится на экране устройства любого вида и типа: вне зависимости от разрешения экрана; без проблем с кроссбраузерностью, размерами и производительностью.

В видеокурсе «Практика верстки под мобильные устройства» есть всё, чтобы в полной мере овладеть необходимыми знаниями и навыками для создания универсальных адаптивных сайтов. Это новое обучающее руководство поможет Вам легко и в кратчайшие сроки постичь самую сложную в реализации верстку. Вы узнаете, что и как делать — просто о сложном!

Баннер

Содержание видеокурса «Практика верстки под мобильные устройства»:

Раздел 1. Верстка макета APPIX

Макет APPIX обладает нестандартной структурой расположения контента. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. В первом блоке курса вы с автором из исходника дизайна в формате PSD с нуля сверстаете данный макет. При верстке макета APPIX вы рассмотрите практически все существующие техники для работы с адаптивным контентом. Вы научитесь адаптировать под различные устройства контент, расположенный в две колонки, в три колонки, в четыре колонки. Научитесь также адаптировать двухколоночный контент, каждая из колонок которого делится еще на две колонки.

  • Как максимально эффективно исследовать PSD-макет сайта
  • Как определить подходящую разметку страницы
  • Как эффективно использовать медиа-запросы
  • Как адаптивно работать с изображениями
  • Как вместить широкое меню в узкий экран смартфона
  • Как эффективно использовать позиционирование для адаптивных сайтов
  • Узнаете тонкости поведения плавающих блоков и свойства float
  • Как использовать свойство float для адаптивных сайтов
  • Как определить и вырезать необходимые изображения
  • Как описать, казалось бы, табличную структуру блоками
  • Как выравнивать элементы для адаптивной верстки
  • Как эффективно задавать отступы для адаптивных сайтов
  • Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем
  • Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете
  • Как, используя firebug, найти нужные стили и изменить их
  • Как эффективно использовать псевдо-классы
  • Как скруглить углы для изображений, используя CSS 3
  • Как избежать схлопывания границ блока

Раздел 2. Верстка макета CREATIVE+

Во втором блоке курса вы будете работать с макетом CREATIVE+. В отличие от нестандартной структуры макета APPIX, данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет CREATIVE+ имеет блоговую структуру. В рамках данного блока курса вы сделаете адаптивную верстку макета CREATIVE+. Верстку будете делать адаптивную и в тоже время резиновую. Это позволит вам красиво умещать сайт в самых различных разрешениях экранов — от самых маленьких до самых больших.

  • Как максимально эффективно исследовать PSD макет сайта
  • Как определить подходящую разметку страницы
  • Как эффективно использовать медиа запросы
  • Как адаптивно работать с изображениями
  • Как назначать широкие фоновые изображения для адаптивных сайтов
  • Как вместить широкое меню в узкий экран смартфона
  • Как эффективно использовать позиционирование для адаптивных сайтов
  • Узнаете тонкости поведения плавающих блоков и свойства float
  • Как использовать свойство float для адаптивных сайтов
  • Как определить и вырезать необходимые изображения
  • Как выравнивать элементы для адаптивной верстки
  • Как эффективно задавать отступы для адаптивных сайтов
  • Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем
  • Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете
  • Как, используя firebug, найти нужные стили и изменить их

Раздел 3. Блок полезных уроков

Изучив предыдущие два блока курса, вы уже сможете с легкостью адаптивно верстать макеты различной сложности. Но есть некоторые специфические техники и приемы, которые не рассматривались при верстке макетов APPIX и CREATIVE+. И поскольку они достаточно часто встречаются при верстке сайтов, вы их рассмотрите отдельно в данном блоке курса. В третьей части курса вы улучшите и дополните созданные вами верстки. Рассмотрите дополнительные техники и приемы адаптивной верстки, которые могут пригодиться в будущем.

  • Как заставить работать вашу верстку в старых версиях IE и стоит ли это делать
  • Как установить галерею изображений и сделать ее адаптивной
  • Как установить видео и сделать его адаптивным
  • Как адаптивно работать с формами и почему это важно
  • Как адаптировать громоздкое меню под маленькие экраны

Бонусы

  • Премиум-курс по CSS3
  • Уроки по работе в программе Dreamweaver
  • Сборник полезных инструментов веб-разработчика

Практика верстки под мобильные устройства
Автор: Андрей Бернацкий

Узнать подробнее...(перейти на сайт автора)

Не работает ссылка? — Напишите нам об этом в комментариях.
Понравился материал? — Кликните по кнопкам ниже и расскажите о нём друзьям!

Внимание! Посетители, находящиеся в группе Гости, не могут оставлять комментарии. Зарегистрируйтесь или зайдите на сайт под своим логином.