Создание сайтов

Длительность курса: 2 семестра по 3 месяца, 24 занятия по 3 часа
1-й семестр: сентябрь - декабрь
2-й семестр: февраль - май

Верстка сайта. 1-й семестр.

Базовые понятия

• Общие понятия – что такое браузер, назначение HTML и CSS.
• Какой редактор выбрать для работы.
• Структура HTML-документа.
• Понятие тега.
• Кодировка документа.
• Работа с хостингом (переносим сайт на хостинг)
• Подбор доменного имени, связываем доменное имя с сайтом

HTML

• Форматирование заголовков и абзацев. Назначение заголовков.
• Базовые теги форматирования текста.
• Ссылки, ссылки-закладки, ссылки-изображения.
• Добавление изображений на страницу, изменение параметров изображения.
• Списки. Простое меню. Выпадающее меню.
• Таблицы. Сложные таблицы, вложенные таблицы.
• Добавление на страницу элементов форм.
• Разделители, спецсимволы.
• Размещение на сайте видео и аудио, блока "поделиться в соцсетях".
• Вставка на сайт иконки-фавикон.
• Основы поисковой оптимизации (SEO)

CSS

• Для чего нужны стили на странице.
• Способы подключения CSS.
• Понятие селектора.
• Работа с текстом – задание шрифта (системные, внешние, гугл-шрифты), начертания, размера. Оформление текста – подчеркивание, красная строка, высота строки, межсимвольный интервал, смена регистра.
• Единицы измерения.
• Способы задания цвета.
• Оформление списков.
• Работа с фоном элементов и страницы.
• Оживление ссылок. Псевдоселекторы ссылок. CSS-спрайты.
• Знакомство с классами и идентификаторами.
• Свойства блоков – размеры, отступы, рамки.
• Позиционирование элементов.
• Знакомство со свойством float.
• CSS3: прозрачность, тени, скругления, трансформации и плавные переходы, анимация.

Вёрстка

• Вёрстка жесткого дизайна.
• Вёрстка резинового дизайна.

Основы Photoshop для верстальщика

• Знакомство с редактором, настройка его под себя. Основные элементы интерфейса.
• Где в макете найти информацию для верстки.
• Нарезаем изображения из макета.
• Параметры текста.

Программирование для сайта. 2-й семестр.

Введение в JavaScript, основные сведения, синтаксис

• Введение в JavaScript, основные сведения, синтаксис
• Что такое JavaScript. Что мы можем сделать с его помощью
• Как добавить JavaScript на страницу
• Понятие переменных и работа с ними
• Понятие массивов, виды массивов
• Понятие алгоритма, условия, цикла
• Работа со строками
• Работа с функциями
• Как получить доступ к элементам страницы.
• Изменение элементов страницы с помощью JavaScript

jQuery – самый популярный фреймворк

• Подключение jQuery
• Основы jQuery, структура кода
• Эффекты плавности и анимация для элементов на странице
• Делаем элементы страницы интерактивными, оживляем их
• Формы. Обрабатываем данные введенные в поля. Подготовка формы обратной связи для отправки на сервер (на почту используя шаблон PHP)
• Делаем форму просчета и обработки введенной информации
• Знакомство с технологией AJAX (обмен данными браузера с web-сервером без перезагрузки страницы)
• Drag-and-drop – перетаскивание элементов страницы и реакция страницы на это

Итог: По окончанию курса у каждого студента будет несколько сайтов с интерактивными элементами.