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


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


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

Лиценции на программное обеспечение учебного центра Успех





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


Курс "Создание адаптивного сайта"


Кол-во ак.ч. 24 ак. часов (8 занятий по 3академ. часа)
Время 
Срок обучения в группе 1 месяц

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

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

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

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

Мы предлагаем также и другие курсы web разработки:
Курсы СЕО
Курс "Создание Web-приложений в социальных сетях"
Курс "Разработка Web-приложений с применением технологии AJAX"

• Акцент в данном делается на наиболее важных моментах Отзывчивого 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
Компьютерные курсы
Школа архитектурного и ландшафтного дизайна

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

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

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

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

Курсы психологии


Компьютерные курсы для школьников
 
Онлайн обучение по Скайпу от учебного центра Успех Киев
Ще наші
сайти
Новый сайт учебного центра Успех uspeh.ua Киев
Новый сайт учебного центра Успех uspeh.net.ua/design для дизайнеров в Киеве
Отримайте сертифікат
Autodesk
Учебный центр «Успех» дает возможность получить международный Сертификат Autodesk по курсам Autodesk 3D Max, Autodesk Revit MEP и Revit Architecture
 
Клиенты учебного центра Успех Киев
Нас вітають:
Газета "Все про бухгалтерський облік"
20 лет учебному центру Успех Киев. Нас поздравляют наши клиенты
Медіа група "Авізо"
Вітаємо навчальний центр "Успіх" з Днем Народження! Бажаємо процвітання, успіхів у всіх починаннях. Благополуччя, надійних партнерів та вдячних клієнтів.
Компанія "Корисна картка"
Вітаємо навчальний центр "Успіх" із такою серйозною датою. Бажаємо успіхів, процвітання та більше задоволених клієнтів.
Компанія ООО "ГЛОБАЛ 17 ИСТ"
Ми працювали з Вами вперше, але із задоволенням висловимо нашу подяку викладачеві Вашого навчального центру Грицаю Іхтіандру Олексійовичу!
Агентство інтернет-реклами "3-БІТ"
Співпрацюємо з Навчальним центром "Успіх" не один рік. Ведемо їхню рекламну кампанію в Інтернеті.



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