Успех
на главную написать письмо карта сайта


О центре обучения Курсы Цены Запись на курсы Корпоративные программы
Начало занятий
Галерея центра Успех
Видеоролики о учебном центре Успех
Наши координаты
Вакансии и резюме


Горячая линия

Суспільне визнання

Лиценции





вернуться к программам обучения вернуться к выбору тем


Курс "Основы по созданию адаптивного сайта оптимально отображающегося на всех устройствах"


Кол-во ак.ч. 32
Время Занятия в утреннее (9.30-12.20), дневное (12.30-15.20, 15.30-18.20) или вечернее (18.30-21.20) время
Срок обучения в группе 1 месяц

Цена 1500,00 грн за курс

По окончании курса выдается свидетельство

Скидки от 5% до 20%

Программа курса

• Акцент делается на наиболее важных моментах Отзывчивого WEB-дизайна (responsive web design) используя Bootstrap v3.2.0 Twitter Bootstrap.
• Курс посвящен адаптивной верстке.

Что такое адаптивный сайт?

Это сайт, который идеально подстраивается под любое устройство телефон, планшет, компьютер.
Но для сохранения пропорций и качественного отображения картинок и текста, необходимо использовать медиа запросы и Фреймворк под названием Bootstrap3.

Цель курса: Разработка адаптивного сайта

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

Преимущества Bootstrap - основы:
• сетка из 12 столбцов для расположения элементов на странице
• предназначен как для начинающих верстальщиков, так и профессионалов
• написан на less, что дает большой фронт работы (например, изменять кол-во столбцов, ширину и расстояние между ними)
• Responsive design.(Адаптивный дизайн) Меняется ширина макета, в зависимости от ширины окна браузера. Например, на 17'' мониторе сайт будет отображен по ширине во весь экран. А также на 19'' мониторе - сайт по ширине тоже будет отображен во весь экран. Это достигается за счет разной ширины столбцов сетки.
• кроссплатформленность ( все браузеры, мобильные устройства, планшеты, смартфоны). Есть также возможность скрывать элемент для определенного устройства.

ПЛАН КУРСА:

Занятие 1. Введение в Sublime Text 3. Изучение интерфейса и рабочего пространства Sublime Text 3. Стандарты HTML5 и CSS3

Установка плагинов для Sublime Text 3
Package Control: http://goo.gl/rava0k
SideBarEnhancements: http://goo.gl/feP6Zr
AdvancedNewFile: http://goo.gl/bhgmcw
Emmet: http://goo.gl/QTSldQ
Bootstrap 3 snippets: http://goo.gl/kfnx5g
AutoFileName: http://goo.gl/V2ZfpM
Tag: http://goo.gl/NtoZcp
ColorPicker: http://goo.gl/Z7Bz4H
FakeImg.pl: http://goo.gl/T6l6Sb
WebFont: http://goo.gl/WhLT8V
Стандарты HTML5 и CSS3
Обзор элементов в HTML5

 

Занятие 2. Как создать адаптивный дизайн сайта на CSS3

• Единицы измерения для адаптивного дизайна
• Работа с типографикой при адаптивном дизайне.
• Работа с изображениями при адаптивном дизайне.

 

Занятие 3. Трансформация. Техники адаптивного дизайна

• Трансформация меню, каталогов и контентной части в компьютере-планшете (для адаптивной версии сайта).
• Трансформация элементов и медиа на страницах:

  • Отзывчивая типографика
  • Гибкие макеты
  • Создание Web-приложений по принципу «сначала мобильное»

 

Занятие 4. Адаптивный дизайн и создание мобильных сайтов. Изучаем Media-запросы

• Что что такое адаптивный дизайн и насколько важно сегодня адаптировать свои сайты под различные устройства
• Что такое медиа-запросы, как их корректно составлять и использовать для выбора разных CSS-стилей в зависимости от особенностей пользовательского дисплея или устройства, таких как ширина области просмотра и разрешение экрана.
• Медиа-типы и медиа-выражения
• Медиа-типы и параметры медиа-выражений
• Синтаксис медиа запросов
• Простые медиа-выражения

  • Логический оператор not 
  • Логический оператор only 
  • Объединение медиа-выражений (and)
  • Объединение медиа-запросов 

• Использование медиа-запросов
• Отдельный файл со ст илями

  • Директива @import 
  • Медиа-запросы непосредственно в CSS-файле

 

Занятие 5. Начало работы с bootstrap R

• Загрузка Bootstrap файлов
• Bootstrap Grid System
• Работа в Bootstrap Grid System
• Создание макетов в Bootstrap Grid System
• Видимость элемента в зависимости от размеров экрана устройства
• Создание Фиксированного макета с Bootstrap
• Создание макета жидкости с Bootstrap
• Создание Отзывчивого макета с Bootstrap
• Небольшое устройство (таблетка)
• Дополнительное небольшое устройство (телефон)

 

Занятие 6. Дизайн и форматирование текста содержания, таблицы, формы, списка изображения и иконки в Bootstrap

• Заголовки
• Параграфы
• Создание простой таблицы с Twitter Bootstrap
• Использование контекстных классов в Bootstrap таблице
• Twitter Bootstrap Список
• Создание Twitter Bootstrap Forms.
• Создание вертикальной формы макета
• Создание горизонтального макета формы
• Статическая форма управления
• Создание инлайн формы макета
• Twitter Bootstrap изображения
• Twitter Bootstrap миниатюры
• Twitter Bootstrap медиа-объекты

 

Занятие 7. Bootstrap NAV, NavBar, панели, Breadcrumbs, нумерация страниц, пейджер и прогресс баров

• Twitter Bootstrap Nav
• Создание выпадающего меню с Twitter Bootstrap Счета и таблетки
• Twitter Bootstrap NavBar
• Создание фиксированных NavBar с Twitter Bootstrap

 

Занятие 8. Разработка сайта на TWITTER BOOTSTRAP 3

• Установка HTML документа с необходимыми файлами
• BOOTSTRAP заголовок и отзывчивая навигация
• Добавление баннера на ваш загрузочный шаблон
• Использование системы сети BOOTSTRAP для создания контента области

 




Поиск по сайту
Компьютерные курсы
Школа архитектурного и ландшафтного дизайна

Школа бухгалтерии

Школа иностранных языков

Академия бизнес решений

Дистанционное обучение

X
Клиенты учебного центра Успех Киев
Нас поздравляют:
Газета "Всё про бухгалтерский учёт"
20 лет учебному центру Успех Киев. Нас поздравляют наши клиенты
Компания "Корисна картка"
Поздравляем учебный центр "Успех" с такой серьёзной датой. Желаем успехов, процветания и побольше довольных клиентов.
Компания ООО "ГЛОБАЛ 17 ИСТ"
Мы работали с Вами впервые, но с удовольствием выразим нашу благодарность преподавателю Вашего учебного центра Грицаю Ихтиандру Алексеевичу!
Агентство интернет-рекламы "3-БИТ"
Сотрудничаем с Учебным центром "Успех" не один год. Ведем их рекламную кампанию в Интернете.
подарочный сертификат успех
Система электронного документооборота «M.E.Doc»



  О центре     |     Курсы     |     Цены     |     Запись на курсы     |     Корпоративные программы     |     Наши координаты
  Developed by Domino    
© 2003-2016 Успех: курсы дизайна, 3d, дизайн интерьера, курсы web, курсы обучения, бухгалтерские, компьютерные курсы, курсы 1С, курсы менеджеров, бизнес курсы.