[WebForMySelf] Практика верстки под мобильные устройства
Цена:
574.2
![[?IMG]](proxy14p.php?image=https%3A%2F%2Fi.postimg.cc%2F3rf5kY1S%2F2022-07-12-151859.png&hash=76a72afbe0da4b8d0dec13452496d5a3&v=4)
? Практика верстки под мобильные устройства
Описание разделов курса
?
Раздел 1. Верстка макета APPIX?
Макет APPIX обладает нестандартной структурой расположения контента. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. В первом блоке курса мы с вами
из исходника дизайна в формате PSD с нуля сверстаем данный макет
При верстке макета APPIX мы рассмотрим практически все существующие техники для работы с адаптивным контентом. Вы научитесь адаптировать под различные устройства контент, расположенный в две колонки, в три колонки, в четыре колонки. Научитесь также адаптировать двухколоночный контент, каждая из колонок которого делится еще на две колонки.
Изучив этот блок курса, вы узнаете:
- Как максимально эффективно исследовать PSD-макет сайта.
- Как определить подходящую разметку страницы.
- Как эффективно использовать медиа-запросы.
- Как адаптивно работать с изображениями.
- Как вместить широкое меню в узкий экран смартфона.
- Как эффективно использовать позиционирование для адаптивных сайтов.
- Узнаете тонкости поведения плавающих блоков и свойства float.
- Как использовать свойство float для адаптивных сайтов.
- Как определить и вырезать необходимые изображения.
- Как описать, казалось бы, табличную структуру блоками.
- Как выравнивать элементы для адаптивной верстки.
- Как эффективно задавать отступы для адаптивных сайтов.
- Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем.
- Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете.
- Как, используя firebug, найти нужные стили и изменить их.
- Как эффективно использовать псевдо-классы.
- Как скруглить углы для изображений, используя CSS 3.
- Как избежать схлопывания границ блока.
Раздел 2. Верстка макета CREATIVE+:
Во втором блоке курса мы будем работать с макетом CREATIVE+. В отличие от нестандартной структуры макета APPIX, данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет CREATIVE+ имеет блоговую структуру.
В рамках данного блока курса мы сделаем адаптивную верстку макета CREATIVE+. Верстку будем делать адаптивную и в тоже время резиновую. Это позволит нам красиво умещать сайт в самых различных разрешениях экранов — от самых маленьких до самых больших.
Изучив этот блок курса, вы узнаете:
Раздел 3. Блок полезных уроков:
Изучив предыдущие два блока курса, вы уже сможете с легкостью адаптивно верстать макеты различной сложности. Но есть некоторые специфические техники и приемы, которые не рассматривались при верстке макетов APPIX и CREATIVE+. И поскольку они достаточно часто встречаются при верстке сайтов, мы их рассмотрим отдельно в данном блоке курса.
В третьей части курса мы улучшим и дополним созданные нами верстки. Рассмотрим дополнительные техники и приемы адаптивной верстки, которые могут пригодиться в будущем.
Изучив этот блок курса, вы узнаете:
Бонусы
Бонус 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 редакторы кода, то инструменты второй группы можно использовать как расширения для браузеров.
В данном бонусе речь пойдет именно о тех инструментах, которые используются как расширения для браузеров.
Они достаточно просты и удобны в использовании. Поскольку они установлены в сам браузер, то позволяют анализировать, тестировать, исправлять текущую загруженную страницу и сразу же видеть результат изменений на этой же страницы.
Изучив уроки
Вы сможете всевозможными методами протестировать страницу.
Сможете быстро вносить изменения в код и тут же видеть результат.
Освоите инструмент, который позволяет быстро находить и исправлять ошибки. С помощью инструментов вы сможете переделывать целые куски кода прямо из браузера, анализировать и оценивать оптимизацию страницы и многое-многое другое.
Во втором блоке курса мы будем работать с макетом 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 редакторы кода, то инструменты второй группы можно использовать как расширения для браузеров.
В данном бонусе речь пойдет именно о тех инструментах, которые используются как расширения для браузеров.
Они достаточно просты и удобны в использовании. Поскольку они установлены в сам браузер, то позволяют анализировать, тестировать, исправлять текущую загруженную страницу и сразу же видеть результат изменений на этой же страницы.
Изучив уроки
Вы сможете всевозможными методами протестировать страницу.
Сможете быстро вносить изменения в код и тут же видеть результат.
Освоите инструмент, который позволяет быстро находить и исправлять ошибки. С помощью инструментов вы сможете переделывать целые куски кода прямо из браузера, анализировать и оценивать оптимизацию страницы и многое-многое другое.