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

Malefisenta · 23 мар 2014

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

Описание разделов курса

Раздел 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 и стоит ли это делать.

Как установить галерею изображений и сделать ее адаптивной.

Как установить видео и сделать его адаптивным.

Как адаптивно работать с формами и почему это важно.

Как адаптировать громоздкое меню под маленькие экраны.

Бонусы
Бонус 1. Премиум-курс по CSS 3
CSS3 — новейший стандарт веб-разработок, значительно расширяющий функциональные возможности языков веб-программирования и позволяющий реализовать оригинальные визуальные решения для ваших интернет-проектов.

С помощью CSS3 вы сможете создавать такие привлекательные эффекты, как полупрозрачные фоны, градиенты и тени. Сможете использовать оригинальные шрифты, обычно не применяющиеся в Сети, а также внедрять на сайтах анимацию без использования Flash и JavaScript.

Все современные браузеры хорошо поддерживают большинство свойств CSS 3, что дает нам возможность использовать их на веб-страницах и получать ожидаемый результат.

Используя CSS 3, вы сможете создавать на своих страницах:
1. Визуальные эффекты, не зависящие от изображений. CSS3 предоставляет множество новых свойств, позволяющих создавать визуальные эффекты, которые раньше требовали обязательного использования в изображениях скругленные углы, падающие тени, полупрозрачные фоны, градиенты и изображения в качестве рамок полей.

2. Уникальные шрифты. Правило font-face позволяет создать ссылку на файл шрифта на сервере и использовать его для отображения текста на странице. Это позволяет не ограничиваться шрифтами, доступными на компьютере пользователей, и значительно упрощает красивое оформление текста.

3. Переходы. Переходы CSS3 представляют собой простейший тип анимации, меняющий стиль элемента. Например, это может быть плавное изменение цвета кнопки в момент, когда над ней оказывается указатель мыши. Причем для этого не требуется ни Flash, ни JavaScript.

4. Мощные селекторы. Спецификации CSS3 включают множество новых селекторов, в основном относящихся к псевдо-классам и атрибутам. Они позволяют обращаться к определенным фрагментам HTML-кода, не добавляя идентификаторы или классы, что упрощает код и защищает его от ошибок.

5. Трансформации полей. Еще одна категория визуальных эффектов, ставших возможными с появлением CSS3. С ее помощью можно управлять положением и формой блока в двумерном и трехмерном пространствах — это поворот, масштабирование, наклон блока и т.д.

Все это и многое другое вы узнаете и сможете применять на своих веб-сайтах, пройдя курс по CSS 3.

Бонус 2. Уроки по работе в программе Dreamweaver
Web-страницы можно создавать в любом текстовом редакторе. Даже обычного блокнота будет достаточно для создания web-страницы.

Но есть программы, которые созданы специально, чтобы облегчить жизнь разработчику. Это программы, которые ускоряют и автоматизируют процесс создания web-страниц.

Одна из них — программа для создания web-страницDreamweaver. Она дает массу возможностей для ускорения и упрощения процесса создания сайтов. Обладает гибким и легко настраиваемым под себя окном разработчика.

Изучив данный бонус
Вы без труда сможете пользоваться программой, что ускорит процесс создания и наполнения web-страниц.
Вы сможете настроить или создать свое собственное окно разработчика, что обеспечит максимально удобное использование программы.
В уроках рассмотрены все панели инструментов, которые предоставляет программа
Плюс к этому, показано, как создать свою панель инструментов, удобную специально для вас. Здесь также рассмотрены спорные возможности работы программы и последствия, к которым они могут привести.

Бонус 3. Сборник полезных инструментов веб-разработчика
Если к первой группе можно отнести специализированные для web редакторы кода, то инструменты второй группы можно использовать как расширения для браузеров.

В данном бонусе речь пойдет именно о тех инструментах, которые используются как расширения для браузеров.

Они достаточно просты и удобны в использовании. Поскольку они установлены в сам браузер, то позволяют анализировать, тестировать, исправлять текущую загруженную страницу и сразу же видеть результат изменений на этой же страницы.

Изучив уроки
Вы сможете всевозможными методами протестировать страницу.
Сможете быстро вносить изменения в код и тут же видеть результат.
Освоите инструмент, который позволяет быстро находить и исправлять ошибки. С помощью инструментов вы сможете переделывать целые куски кода прямо из браузера, анализировать и оценивать оптимизацию страницы и многое-многое другое.

Скрытый текст. Доступен только зарегистрированным пользователям.
Нажмите, чтобы раскрыть...

adsl3008 · 27 июн 2019

Ребят, вышел офигенный курс, от друга "WebForMySelf" вступайте!