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

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

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

1. Как максимально эффективно исследовать PSD макет сайта.
2. Как определить подходящую разметку страницы.
3. Как эффективно использовать медиа запросы.
4. Как адаптивно работать с изображениями.
5. Как назначать широкие фоновые изображения для адаптивных сайтов.
6. Как вместить широкое меню в узкий экран смартфона.
7. Как эффективно использовать позиционирование для адаптивных сайтов.
8. Узнаете тонкости поведения плавающих блоков и свойства float.
9. Как использовать свойство float для адаптивных сайтов.
10. Как определить и вырезать необходимые изображения.
11. Как выравнивать элементы для адаптивной верстки.
12. Как эффективно задавать отступы для адаптивных сайтов.
13. Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем.
14. Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете.
15. Как, используя firebug, найти нужные стили и изменить их.

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

В третьей части курса мы улучшим и дополним созданные нами верстки. Рассмотрим дополнительные техники и приемы адаптивной верстки, которые могут пригодиться в будущем.
Изучив этот блок курса, вы узнаете:

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

Бонусы
Бонус 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 редакторы кода, то инструменты второй группы можно использовать как расширения для браузеров.

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

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

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