Учебный курс «Адаптивная верстка Bootstrap + web-дизайн»

  • Количество академических часов: 64, занятий: 16
  • Очное обучение. Базовая цена: 21000 руб.
  • Очное обучение. Цена со скидкой: 17900 руб.
  • Онлайн обучение. Стоимость: 16800 руб.
  • Этот курс прошли уже 1415 человек
  • assignment_lateЛицензия на образовательную деятельность

    Лицензия № 037133 от 16.02.2016 г. на право оказывать образовательные услуги по реализации образовательных программ по видам образования, по уровням образования, по профессиям, специальностям, направлениям подготовки (для профессионального образования) по подвидам дополнительного образования, указанным в приложении настоящей лицензии.

  • assignment_turned_inУчитываем требования профстандартов

    В учебном центре ГЦДПО содержание образовательных учебных программ учитывает: профессиональные стандарты; квалификационные требования, указанные в квалификационных справочниках по соответствующим должностям, профессиям и специальностям; квалификационные требования к профессиональным знаниям и навыкам, необходимым для исполнения должностных обязанностей, которые устанавливаются в соответствии с Федеральными законами и нормативными правовыми актами Российской Федерации.

  • schoolДокументы по окончании обучения

    Лицам, успешно освоившим дополнительную профессиональную программу и прошедшим итоговую аттестацию, учебный центр ГЦДПО выдает удостоверение о повышении квалификации.

    Федеральный закон от 29.12.2012 N 273-ФЗ (ред. от 07.03.2018) "Об образовании в Российской Федерации". Статья 76. Дополнительное профессиональное образование.

    По окончании обучения этого курса повышения квалификации вы получите Удостоверение учебного центра ГЦДПО, с регистрацией его в Федеральном реестре сведений документов об образовании и (или) о квалификации, документах об обучении (ФИС ФРДО).

По курсу доступны следующие формы обучения:

Расписание и цены

Web-дизайн

Ближайшая группа
Время занятий
Цена
Скидка
Дни занятий
Место / ФИО преподавателя
13.11.2021
13:00 - 16:00
Записаться
21000 16800
Оплатить
20%*
СБ, ВС
Семенов А.Б.
13.11.2021
Выходного дня
13:00 - 16:00
Записаться
21000 17900
Оплатить
15%*
СБ, ВС
м. Белорусская - Семенов А.Б.
25.11.2021
12:30 - 15:30
Записаться
21000 16800
Оплатить
20%*
Интенсив
м. Белорусская - Семенов А.Б.
25.11.2021
Дневная
12:30 - 15:30
Записаться
21000 17900
Оплатить
15%*
Интенсив
м. Белорусская - Семенов А.Б.
25.11.2021
12:30 - 15:30
Записаться
21000 16800
Оплатить
20%*
Интенсив
м. Белорусская - Семенов А.Б.

Адаптивная верстка Bootstrap

Ближайшая группа
Время занятий
Цена
Скидка
Дни занятий
Место / ФИО преподавателя
* - стоимость со скидкой действует ограниченное время. Успейте записаться на курс заранее!

Описание курса

Курсы web-дизайна и адаптивной верстки предназначены для специалистов, работающих в сфере разработки, создания, оформления web-сайтов.

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

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

Первый этап – обучение web-дизайну, на котором слушатели будут постигать методики, технологии и этапы работ по созданию оформления и дизайна для web-сайтов. Обучение слушателей начнется с самых азов: знакомства с понятиями www, web, гипертекстовых документов, классификацией веб-сайтов, их типами, назначениями и использованием.

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

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

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

В рамках курса будут создаваться два шаблона сайта – интернет магазин и лендинг-пейдж. 

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

Выпускникам учебный центр ГЦДПО оказывает помощь в трудоустройстве по специальности: Web-мастер, Web-дизайнер.


Записывайтесь на WEB - дизайн и Адаптивная верстка Bootstrap в Москве прямо сейчас! 

Учебная программа курса

Содержание образовательной (учебной) программы

 «Web - дизайн»

 

Занятие 1. Основы сайт строения. Методы и технологии создания современных сайтов. Основы HTML. Этапы создания сайта целиком и стартовой (главной страницы). Использование программ Adobe Dreamweaver и Adobe Photoshop при создании сайта.

Перечень основных вопросов, подлежащих изучению:

-       общие сведения о технологии создания сайтов;

-       язык разметки HTML как основа создания любого сайта;

-       теговая модель языка HTML;

-       основные теги языка HTML;

-       базовые теги для создания пустой web-страницы;

-       определение будущего проекта web-сайта в программе Adobe Dreamweaver и знакомство с интерфейсом программы;

-       настройка программе Adobe Dreamweaver под текущий проект;

-       создание первой web-страницы в программе Adobe Dreamweaver и сохранение ее в проекте;

-       создание описательных meta-тегов страницы, описание и назначение данных тегов;

-       понятие DOCTYPE;

-       структура HTML – основные теги html, head, title, body, синтаксис языка;

-       основные теги для создания теста на web-странице h1-h1(теги заголовков);

-       р (абзац), создание страницы с текстовым содержанием.

 

Занятие 2. Основы поэтапного создания web-страницы. Правила форматирования текста с использованием текстовых тегов. Оформление текста с использованием атрибутов тегов. Введение в CSS (каскадные стилевые инструкции).

Перечень основных вопросов, подлежащих изучению:

-       использование тегов h1-h6 для создания заголовков текстового содержания;

-       использование тегов p для создания абзацев текста;

-       основные принципы создания текстового содержимого с учетом требований поисковых систем и удобства для посетителей сайта, понятие необходимого количества текста;

-       оформление текста с помощью атрибутов тегов и тега font, понятие выравнивания текста, цвета текста и гарнитуры шрифтов;

-       определение технологии CSS как основного инструмента при стилизации и разметки страницы, принцип работы и взаимодействия CSS и HTML документов;

-       создание первого CSS документа и соединение его c HTML страницей, понятие селектора тега, создание селекторов тегов для стилевого оформления текстового содержимого web-страницы;

-       основные стили, свойственные текстовому содержимому (выравнивание-text-align, цвет-color, гарнитура шрифта-font-family, внешние и внутренние отступы-margin и padding, границы текстовой области-border и фон-background);

-       принципы создания web-страницы с текстовым содержанием;

-       теги ul, ol, li – для оформления маркированного и нумерованного списка

-       теги специальных возможностей br, pre, strong, em, hr;

-       тег span, его назначение и возможности в стилевом оформлении текста.

 

Занятие 3. Вставка изображений в web-страницу. Типы графических файлов подлежащих вставке в web-страницу. Оптимизация изображений для web-страницы с использованием программы Adobe Photoshop.

Перечень основных вопросов, подлежащих изучению:

-       типы графических файлов подлежащих вставке на web-страницу (jpg, png, gif) понятие размера и разрешения фотографии;

-       основные принципы оптимизации изображения для web в программе Adobe Photoshop, обрезка изображения, установка необходимого разрешения и установка размера в зависимости от ширины web-страницы;

-       сохранение изображения с использованием специальной функции программы Adobe Photoshop – сохранить для web и устройств непосредственно в папке проекта;

-       вставка изображения на страницу с использованием тега вставки изображений img, атрибуты специальных возможностей данного тега: ширина(width), высота(height), альтернативный текст(alt), описание изображения(title);

-       стили CSS для корректного отображения и позиционирования изображения на web-странице: обтекание(float), отступы(margin), границы(border), округления (border-radius);

-       использование изображения в качестве фона web-страницы;

-       создание страницы с текстовым содержанием и вставкой изображений с обтеканием текста справа и слева.

 

Занятие 4.  Верстка страницы. Создание каркаса страницы с использованием тега DIV 

Перечень основных вопросов, подлежащих изучению:

-       виды верстки страницы – блочная, табличная, гибридная, преимущества и недостатки каждой из версток;

-       создание каркаса страницы с использованием тега div;

-       тег div как контейнер для удобного и эффективного позиционирования с присвоением имени каждому контейнеру div через идентификатор id;

-       техника применения селектора идентификатора для тега div для удобного и адаптивного позиционирования элементов web-страницы;

-       основные свойства, сообщаемые через селекторы идентификаторов для тегов div непосредственно тегам div с соответствующими идентификаторами:

-       ширина (width), высота (height), выравнивание (margin), фон (background), границы (border), обтекания (float), абсолютное (absolut) и относительное (relativ) позиционирование (position), понятие слойности (z-index);

-       понятие очистки обтекания(clear) при блочной верстке.

 

Занятие 5. Практическое занятие № 1.

Содержание  занятия:

-       создание схемы (эскиза) каркаса web-страницы;

-       реализация данного эскиза в web-страницу.

1) Создание HTML страницы, CSS документ и соединение его с HTML документом, с использованием технологичных возможностей программы Adobe Dreamweaver.

2) Определение основных контейнеров DIV для элементов web-страницы:

шапки сайта, навигационного меню, левой колонки сайта, контентной части сайта и подвала (футера) сайта.

3) Определение в стилевом документе основных позиционных и стилевых свойств web-страницы (ширина (width), высота (height), выравнивание (margin), фон (background), границы (border), обтекание (float), абсолютное (absolut) и относительное (relativ) позиционирование (position), понятие слойности (z-index), понятие очистки обтекания (clear) при блочной верстке).

4) Проверка свойств и качества готового каркаса web-страницы по адаптивным характеристикам к электронным устройствам и мониторам.

5) Создание графического элемента – шапки сайта, с использованием программы Adobe Photoshop. Вставка шапки сайта в каркас подготовленной web-страницы.

 

Занятие 6. Гиперссылки. Создание навигационного меню.

Перечень основных вопросов, подлежащих изучению:

-       понятие гиперссылки, абсолютная и относительная гиперссылка;

-       тег ссылки a, атрибуты ссылки: href, title, target;

-       создание ссылки на web-странице, создание ссылки навигационного меню, создание всех ссылок навигационного меню с использованием технологичных возможностей программы Adobe Dreamweaver;

-       оформление ссылок горизонтального навигационного меню с помощью каскадных стилевых инструкций CSS;

-       оформление ссылок вертикального навигационного меню с помощью каскадных стилевых инструкций CSS;

-       создание дублирующего меню для подвала (футера) сайта;

-       изображение как ссылка, создание интерактивных графических элементов (кнопок) на web-станице;

-       карты-изображения позволяющие привязывать ссылки к разным областям одного изображения;

-       ссылка на адрес электронной почты;

-       ссылка на якорь;

-       создание страниц сайта, согласно подготовленному навигационному меню.

 

Занятие 7. Виды контента страниц сайта (статический сайт, в виде вывода табличных данных, интерактивные формы).

Перечень основных вопросов, подлежащих изучению:

-       создание контента для статичных (основных страниц), создание текста с встроенными изображениями для соответствующих страниц сайта;

-       теги для создания таблиц table, tr, td;

-       создание таблицы для вывода табличных данных на web-странице;

-       оформление таблицы с помощью соответствующих атрибутов тегов и с помощью каскадных стилевых инструкций CSS;

-       атрибуты colspan и rowspan для объединения строк и рядов таблицы;

-       варианты стилевого оформления страниц;

-       использование таблиц для создания каркаса web-страницы (табличная верстка);

-       оформление страницы «Контакты» с использованием форм и полей для создания формы обратной связи, теги form, input, textarea, select и атрибуты action, method, name, type;

-       принцип работы формы обратной связи и полей;

-       создание простой и защищенной формы обратной связи с использованием технологии spry средствами программы Adobe Dreamweaver.

 

Занятие 8. Практическое занятие № 2.

Содержание занятия:

-       окончательное оформление многостраничного сайта и подготовка его к публикации в сети интернет;

-       публикация сайта в сети интернет.

1) визуальный и синтаксический анализ сайта, проверка всех страниц и функционирования навигационных меню сайта, соответствие каждой из страниц сайта наименованию пункта меню и тематике содержания;

2) выбор хостинга (свободное доменное имя, регистрация на хостинге, выбор тарифного плана);

3) настройка хостинга – проверка серверных служб, создание связки домен-каталог сайта;

4) просмотр протоколов связи с сервером–http (HyperText Transfer Protocol-«протокол передачи гипертекста») и ftp(File Transfer Protocol-протокол передачи файлов);

5) создание соединения по ftp протоколу с сервером;

6) копирование файлов сайта на сервер;

7) проверка работоспособности сайта в режиме реального размещения на сервере;

8) регистрация сайта в поисковой системе Яндекс, первичные настройки индексирования;

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

Обучение адаптивной верстки Bootstrap

Занятие 1

  • Что такое фреймворк Bootstrap.
  • Установка Bootstrap.
  • Состав фреймворка Bootstrap.
  • Создание первого учебного проекта на фреймворке Bootstrap.
  • Что такое сетка Bootstrap. Базовые классы CSS фреймворка  Bootstrap для создания много колончатой верстки страниц.
  • Создание адаптивной страницы с использованием базовых классов Bootstrap

Занятие 2

  • Оформление содержимого страниц созданных с использованием фреймворка Bootstrap.
  • Компоненты Bootstrap.
  • Текст, таблицы, списки, кнопки, табы, навигационные меню, формы.
  • Практика использования компонентов на странице.
  • Создание простого шаблона сайта с использованием фреймворка Bootstrap.

Занятие 3

  • Практика верстки шаблона сайта блога, интернет магазина с использованием фреймворка Bootstrap.
  • Выбор и анализ шаблона.
  • Верска верхней части сайта (HEADER) – шапка сайта, слайдер, меню.

Занятие 4

  • Создание контентной части шаблона сайта.
  • Разметка левой колонки (сайдбара) и основной контентной части.
  • Разметка и верстка контентного содержимого – заметок блога или карточек товара.

Занятие 5

  • Создание футера.
  • Верстка и оформление формы подписки, слайдера, нижнего дублирующего меню. 

Занятие 6

  • Верстка Лендинг-Пейдж.
  • Выбор и анализ макета шаблона.
  • Определяем общее количество и назначение блоков страницы.
  • Создание, разметка и оформление Header.

Занятие 7

  • Определение, верстка и оформление остальных блоков Лендинг Пейдж.
  • Модальные окна в Bootstrap.
  • Форма обратной связи.
  • Функционал реализуемый с помощью Bootstrap.

Занятие 8

  • Окончательное оформление Лэндинг Пейдж.
  • Верстка и оформление футера и его содержимого.
  • Установка карты.
  • Возможности применения анимации на странице.

Преподаватели курса

Записаться на курс по телефону +7 (495) 150-31-41 - до 21:00

Остались вопросы по обучению? Звоните! Наши менеджеры с радостью проконсультируют вас и расскажут о наших скидках и спецпредложениях.

Поделитесь с друзьями и коллегами в социальных сетях!
Учитесь вместе!

Отзывы

Оплата обучения

Свяжитесь с нами по телефону 8(495)150-3141 сразу после оплаты

Форма обучения*

Цена: рублей














Если при нажатии на кнопку "Оплатить курс" не происходит перенаправление на сайт платёжной системы, возможно Вам необходимо отключить блокировщик рекламы или заполнить форму используя другой браузер. ИНСТРУКЦИЯ

Нажимая кнопку «Оплатить курс», вы соглашаетесь на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и офертой.

__
Предварительная запись на курс














Нажимая на кнопку "Записаться на курс" вы соглашаетесь на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.

14 причин учиться в ГЦДПО

15 лет успешной работы
Более 41 000 выданных дипломов.
Свыше 240 курсов, семинаров и тренингов.
Авторские методики преподавания.
Авторизованные курсы Corel и Autodesk.
Международные сертификаты Autodesk.
Современное оборудование.
Стабильное обновление учебных программ.
Курсы узкой специализации и модульные курсы.
Преподаватели – действующие практики.
Консультационная поддержка выпускников.
Удобное расположение (центр Москвы).
Расписание, с учетом возможностей слушателей.
Постоянно действующие акции.