Адаптивная верстка сайта - тренд профессиональной деятельности современного web-дизайнера. Bootstrap - CSS фреймворк, позволяющий создавать адаптивные макеты веб-страниц. Ознакомьтесь с подробным описанием курса.

Программа обучения - курс по адаптивной верстке сайта на Bootstrap

Занятие 1. Основы адаптивной верстки. Подходы к созданию отзывчивого дизайна сайта. Bootstrap - описание, возможности, области применения. Классы Bootstrapю. Практика создания адаптивного макета страницы.

Данное занятие посвящено первичному знакомству с Фреймворком CSS Bootstrap  – это набор готовых библиотек стилей и скриптов (сценариев JavaScript), используя которые при помощи готовых классов можно создавать адаптивные страницы любой сложности и назначения очень быстро, удобно и эффективно.
Данный фреймворк бесплатен в использовании и самую его последнюю версию можно скачать с сайта изготовителя данного пакета.
Скачиваем и рассматриваем Bootstrap, подробно исследуем состав и назначение каждого файла пакета, после чего оформляем новый проект в программе Dreamweaver с установленным в проект фреймворком.
Рассматриваем основные принципы работы – создаем адаптивные блоки и иные компоненты и рассматриваем их адаптивное поведение на экранах с различным разрешением и на других мобильных устройствах.
После исследования и поведения и свойств компонентов Bootstrap начинаем проектировать первую адаптивную страницу при помощи фреймворка состоящую из шапки сайта, контентной части, состоящей в свою очередь из левого сайдбара и основной части в которой размещены блоки блога или интернет магазина и завершает страницу футер.
В результате данного занятия появляется понимание что такое адаптивность и адаптивный сайт и как можно быстро и эффективно использовать фреймворк для создания веб страницы.

Занятие 2. Примеры оформления и дизайна в Bootstrap. CSS и JavaScript компоненты Bootstrap.

Bootstrap – очень гибкое решение, обладающим большим количеством компонентов, таких как различные по цвету и размеру кнопки, всплывающие окна подсказок или модальные окна, слайдеры, навигационные меню. В данном уроке мы учимся использовать данные элементы и настраивать их для выполнения тех или иных задач в зависимости от тематики и назначения сайта. Большое внимание уделяется таблицам и формам – как основным элементам интерактивного взаимодействия посетителя с сайтом.
Фреймворк обладает гибкой способностью меняться под выполнение тех или иных задач в зависимости от тематики сайта и его функциональности. Мы рассматриваем как минимум два способа кастомизировать, или изменить состав и свойства Bootstrap под выполнение своих задач.
В результате данного занятия получаем умение уверенно использовать весь диапазон компонентов пакета и создавать не только адаптивный шаблон сайта, но и устанавливать все многообразие компонентов на страницу.

Тема 3. Верстка шаблона блога на Bootstrap.

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

Тема 4. Верстка отдельных блоков и компонентов страницы сайта на Bootstrap.

Левая колонка сайта или как ее еще называют – сайдбар, может располагаться справа или слева от контентной части и как правило содержит в себе вертикальное меню. Для блога – это меню категорий и последних записей блога, для интернет магазина – это категории товаров и товары. Для реализации данного меню в фреймворке имеется готовый компонент, настраивая который или подгоняя под определенное стилевое решений можно быстро и эффективно создать необходимое меню. В данном уроке мы подробно рассматриваем данный процесс во всех его тонкостях и выполняем данную работу.
Контентная часть сайта очень важна для удобного использования ее пользователями, ведь от удобства и понятности элементов управления в контентной части пользователь будет принимать решение о том, будет ли он пользоваться услугами данного сайта и вернется ли сюда в следующий раз.
На уроке мы рассматриваем данные вопросы и выбираем оптимальные стилевые и структурные решения чтобы наш блог или интернет-магазин был максимально удобен для пользователя и он без малейших колебаний воспользовался бы предложениями нашего сайта. Ну и конечно, все эти вопросы рассматриваются через призму адаптивности, чтобы на любом устройстве данный сайт вне зависимости от его тематики отображался удобно и корректно передавал информацию.
В результате данного урока укрепляется устойчивый навык создания сложной структуры контентной части с использованием фреймворка.

Тема 5. Практика верстки на Bootstrap форм и футера.

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

Тема 6. Практика верстки Лендинг-Пейдж на Bootstrap.

Лэндинг пейдж – относительное новое понятие в мире информационных технологий. Это понятие заменило собой понятие промо-страница или сайт-визитка (хотя они и по сей день продолжают существовать в своем неизменном виде). Но, поменялось не только название, коренным образом изменилось и содержимое, и способы его представления(отображения). Лэндинг-пеидж, или посадочная страница, предназначена для реализации возможности быстро, удобно и понятно представить пользователю информацию о каком-либо продукте, услуге, мероприятии. И не просто предоставить эту информацию, но и по возможности инициировать пользователя на какое-либо действие, например – покупка, подписка на новости, согласие на принятие участия в голосование и прочее. Это очень эффективное и динамично развивающееся средство презентации всего нового. А раз так – быстрая и адаптивная верстка лэндинга становится очень востребована на рынке современного инфо-бизнеса.
В данном уроке мы подробно рассматриваем различные варианты лэндингов и формируем общее понимание лэндинга как такового. Приступая к созданию данной страницы мы выбираем шаблон лэндинга и составляем его аналитическую модель, принимая решения о количестве блоков на странице их назначении и функциональности.
Так-же на уроке верстаем верхнюю часть страницы используя сетку и компоненты изучаемого фреймворка.
Результатом данного урока становится полное понимание логики и философии лэндинга и каким образом составить модель лэндинга для удобного представления необходимой для нас информации. Верстаем хэдер.

Тема 7. Модальные окна, форма обратной связи в Bootstrap.

Лэндинг пейдж как страница – это чередование друг под другом блоков, которые содержат в себе последовательно поступающую информацию, которая появляется таким образом, что захватывает внимание посетителя и привлекает ко все глубокому погружению в мир описания той темы, для которой этот лэндинг и создан. Это и есть умелый и грамотный подход к созданию лэндинга – заинтересовать пользователя.
На данном уроке мы учимся делать это. Мы принимаем решение сколько у нас будет блоков, какая информация будет отображаться в каждом из них, как правильно ее оформить, как правильно оформить и создать навигацию внутри лэндинга, ведь лэндинг – это длинная лента, где пользователь должен уметь ориентироваться и попадать в тот раздел лэндинга в который он захочет быстро и удобно.
В результате данного занятия мы создаем основное содержание(тело) лэндинга с удобной навигацией и интересно оформленным содержимым.

Тема 8. Дополнительные возможности и кастомизация Bootstrap. Завершение проекта.

Футер, или подвал любой страницы, в том числе и Лэндинга – это набор определенных функциональных элементов и контактные данные, все зависит от тематики и содержимого сайта.
В данном уроке мы определяем технические и визуальные характеристики футера и с использованием классов и компонентов фреймворка Bootstrap верстаем данный функциональный элемент, который является логическим завершением страницы.
В феврале 2017 года были внесены поправки в Федеральный закон 152 по поводу нарушений закона о персональных данных. Поправки вступили в силу 1 июля 2017 года и коснутся всех, кто обрабатывает и хранит на сайте любые персональные данные. На данном занятии объясняется как правильно составить и оформить политику конфиденциальности на сайте чтобы избежать штрафов.

Записаться на курс по адаптивной верстке в Bootstrap