Без какого языка не обойтись, работая с любой веб-технологией? Конечно же, без HTML/CSS!
Знание HTML/CSS - это основа для дальнейшего изучения серверных языков программирования и один из основных инструментов работы верстальщика, программиста или дизайнера.
Изучив HTML - язык гипертекстовой разметки - вы сможете создать статичную веб-страничку или веб-сайт.
Язык CSS - каскадные таблицы стилей - позволит оформить сверстанный сайт в соответствии с любой задумкой дизайнера.
Курс построен на принципе обучения через практику: студенты создают сайты и в течение все работы над проектами изучают свойства и возможности применения HTML/CSS.
По окончании курса «Web-дизайн» вы получите Свидетельство Учебного центра об успешном окончании курсов.
Программа курса:
Тема 1. Основные понятия в веб-разработке
Что представляет собой веб-страница; виды сайтов; процесс разработки сайта; что такое гипертекст, теги и атрибуты; структура HTML-документа; основные теги оформления текста; простая HTML страница; пример сложной веб-страницы.
Тема 2. Основы языка разметки документов HTML
Гиперссылки; типы изображений для web; загрузка изображений на страницу; списки. Основные элементы форматирования ссылок, списков и изображений. Цвета и спецсимволы. Фон страницы, блоков.
Тема 3. Основы каскадных таблиц стилей (CSS)
Основы CSS, описание стилей для элементов HTML. Область применения CSS, семантическая верстка. Основные селекторы: класс, ID. Основные CSS-свойства, способы задания. Внешние таблицы стилей, подключение внешней таблицы к HTML.
Тема 4. Псевдоклассы и псевдоэлементы, табличная вёрстка
Приоритеты применения стилей; псевдоклассы и псевдоэлементы; создание таблиц; объединение ячеек; вложенные таблицы; стилевое оформление таблиц.
Тема 5. Блочная верстка HTML-документа
Основные теги для верстки (div и span); отступы элементов (margin и padding); обтекаемые элементы; позиционирование блоков. Виды позиционирования: static, relative, absolute, fixed. Совместное использование нескольких видов позиционирования. Свойства float, clear.
Тема 6. Адаптивная верстка HTML-документа
Понятие адаптивного дизайна. Макет сайта. Mockup страницы. Верстка макета страницы при помощи блоков. Адаптивная верстка: виды макетов, разрешения, особенности каждого вида. Использование медиа-запросов. Примеры адаптивной верстки.
Тема 7. HTML5: Семантические элементы
Обзор HTML5, Новые семантические элементы HTML5, Новый способ структурирования страниц. Семантика текстового уровня. Настройка редактора, примеры применения семантических тегов, для создания структуры сайта.
Тема 8. HTML5 формы. Добавление Аудио и Видео на страницу
Работа с формами (кнопки, текстовые поля, флажки и переключатели, списки). Усовершенствование традиционных форм (добавление подсказок, фокусировка на элементе и т.д.). Проверка форм на ошибки заполнения. Новые типы элементов (адреса электронной почты, URL-адреса и т.д.). Работа тэгов <VIDEO> <AUDIO>.
Тема 9. Эффекты перехода и трансформации CSS3
Эффекты перехода. Применение трансформации. Поворот элементов при наведении на него. Создание анимации средствами в CSS3. Добавление анимации для элементов сайта.
Тема 10. Flexbox верстка
Основные преимущества flexbox. Выравнивание элементов. Основные свойства flex-контейнера, для создания гибкой структуры внутренних блоков сайта.
Тема 11. Grid Layout
Что такое Grid Layout. Основы CSS Grid - создание сетки сайта. Функция repeat и свойство grid. Размеры строк и столбцов. Отступы между столбцами и строками. Позиционирование и наложение элементов. Макет страницы в Grid Layout.
Тема 12. Графический дизайн для web
Графический дизайн web-страниц. Разработка дизайн-макетов в графическом редакторе. Элементы дизайна. Графические элементы в HTML – документе. Характеристики растровых изображений. Форматы растровых изображений. Модели цвета.
Тема 13.Типовой дизайн страниц
Типовой дизайн страниц. Реализация основных функциональных решений: авторизация, каталог, галерея, блог, личный кабинет, лента новостей. Типографическое оформление страниц.
Тема 14. Верстка и дизайн landing page
Landing page: принципы компоновки. Обязательные и необязательные элементы. Особенности дизайна и верстки. Типовые макеты. Примеры решений.
Занятия проводятся 2 раза в неделю, общая продолжительность курса - 9 недель.
Дата начала курса и расписание может меняться,
информацию уточняйте по телефонам:
8-800-250-11-10 или +7 (3452) 38-77-77
Преподаватель курсов: "Web – дизайн" и "Web –программирование".
Образование: ТюмГУ, кандидат технических наук
Опыт работы: 18 лет