• Создавать веб-страницы, используя различные программы
• Грамотно размещать информацию на сайте
• Разрабатывать навигацию, использовать шаблоны
• Подбирать изображения нужного формата и размера
• Использовать gif-анимацию
• Работать с баннерами
• Оценивать и тестировать сайт

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

• Определения с тематикой сайта и возрастной группой. Подбор ключевых слов, названия, мета-тегов, и копирайтинг.
• Зарегистрироваться на yandex.ua и https://accounts.google.com (gmail)
• Подбор ключевых слов для своего сайта – с помощью сервисов http://wordstat.yandex.ua/ и https://adwords.google.ru/KeywordPlanner
• Анализ конкурентов
• Понятие гипертекстовых документов и web-сайтов. Классификации web-сайтов. 
• Различные типы web-сайтов, их назначение и использование. Типы гипертекстовых документов (web-страниц), их различия и сходства.
• Размещение и хранение web-страницы и сайты. Понятие web-сервера и принципы его работы с пользователем.

• Определение тематики сайта и возрастной группы. Подбор ключевых слов, названия, мета-тегов, и копирайтинг 
• Регистрация на https://accounts.google.com (gmail) 
• Подбор ключевых слов для своего сайта с помощью сервиса https://adwords.google.com/KeywordPlanner 
• Анализ конкурентов 
• Понятие гипертекстовых документов и web-сайтов. Классификации web-сайтов
• КРазличные типы web-сайтов, их назначение и использование. Типы гипертекстовых документов (web-страниц), их различия и сходства
• Размещение и хранение web-страницы и сайты. Понятие web-сервера и принципы его работы с пользователем 

Последовательная методика создания индивидуального дизайна

• Определение целей веб-сайта и его позиционирование. 
• Создание Технического Задания (ТЗ) на разработку веб-сайта
• Создание дизайн-макета веб-сайта
• Верстка сайта
• Программирование сайта
• Наполнение сайта информацией
• Расположение сайта в сети
• Тестирование сайта

• Интерфейс программы Adobe Photoshop
• Панель инструментов и палитра слоев
• Панель настроек Adobe Photoshop
• Создание простого документа и документа с монтажными областями в программе Adobe Photoshop CC 2018
• Линейки и направляющие
• Слои и их виды
• Основы векторной графики. Работа с кривыми Кривые Безье
• Инструменты для создания и редактирования кривых Безье
• Контур и фигура в Adobe Photoshop
• Подготовка фото

• HTML5 СТРУКТУРА СТРАНИЦЫ
• WEB-сервер, web-сайт, web-страница и чем они отличаются
• Структура HTML5-документа. Понятие элементов и атрибутов
• Типы тегов. Теги - header, nav, section, article,aside,footer и др... Правила оформления HTML5-документа 
• Использование комментариев. 
• Создание HTML5-документа в программе Sublime Text 3
• Возможности программы Sublime Text 3: Основы работы. Управление web-сайтом. Редактирование html5-кода 
• Создание новых файлов и папок

• Структурирование информации на WEB-странице при помощи списков. Типы списков
• Структурирование информации на странице при помощи списков и таблиц
• Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML5
•  Создание гиперссылок с помощью элемента A и его атрибутов. Типы ссылок 
• Размещение иллюстрации на web-странице. Типы файлов иллюстраций. Элемент IMG и его атрибуты 
• Распределение иллюстраций по страницам сайта: приемы и советы

• Виды CSS - внутренние стили глобальные или встроенные внешние или связанные
• Определение классов и идентификаторов 
• CSS-селекторы 
• БЛОЧНАЯ МОДЕЛЬ. УПРАВЛЕНИЕ ТИПАМИ ЭЛЕМЕНТОВ – СВОЙСТВО DISPLAY (BLOCK, INLINE, INLINE-BLOCK…)
• Создание и управление таблицами стилей в программе Sublime Text 3

• Верстка web-страниц со стандартными элементами - шапка, навигация, содержание и подвал.
• Создание меню с помощью маркированных списков.
• Введение понятия псевдоклассов.
• Определение float для позиционирования элементов меню.
• Сознание веб страничек и связей между ними. 
• Хостинг. HTML-элементы: виды, параметры...

• Использование CSS-свойств: Особенности отображения текста на web-странице. 
• CSS-свойства, используемые для оформления текста.
• Примеры работы со шрифтами, общие способы и методы применения шрифтов, их характеристики и атрибуты.

• Определение, основные свойства. 
• Создание слоев в Sublime Text 3. Элементы DIV и SPAN. 
• Особенности разработки элементов макетов для блочной верстки. 
• Использование свойства float: выравнивание изображений, реализация эффекта таблицы. 
• Псевдостили гиперссылок. Реализация эффекта ролловера средствами CSS.

• Содержимое и слои. Фон слоя. CSS-свойства списков.
• Особенности использования блочной модели. 
• Использование фоновых изображений.
• Способы позиционирования элементов.
• Абсолютное и относительное позиционирование. 
• Точное размещение блочных элементов HTML-разметки в окне браузера: размеры блока, абсолютные и относительные координаты. 
• Наложение и вложение слоев, свойство z-index.
• Управление видимостью слоя и видимостью содержания слоя.

• Внедрение сценариев в HTML документ 
• Синтаксис 
• Переменные и типы данных 
• Написание первого сценария – таблицы умножения 
• Условные операторы 
• Операторы циклов 
• Оператор обработки исключений 
• Использование циклов 
• Создание фотогаллерей

• Описание и вызов функций
• Аргументы функций 
• Возврат значений 
• Область видимости переменных 
• Рекурсивный вызов функций 
• Использование функций 
• Объекты JavaScript 
• Объекты типов данных 
• Массивы 
• Использование объектов

• Объекты браузера 
• Объект window 
• Лабораторная работа: использование объекта window 
• Объект navigator 
• Объект document

• Загрузка Bootstrap файлов 
• Bootstrap Grid System
• Работа в Bootstrap Grid System
• Создание макетов с Bootstrap Grid System
• Видимость элемента в зависимости от размеров экрана устройства
• Создание Фиксированный макет с Bootstrap
• Создание макета жидкости с Bootstrap
• Создание Отзывчивый макет с Bootstrap
• Небольшое устройство (таблетка)
• Дополнительное небольшое устройство (телефон)
• Заголовки
• Параграфы
• Создание простой таблицы с Twitter Bootstrap
• Использование контекстных классов в Bootstrap таблице
• Twitter Bootstrap Список
• Создание Twitter Bootstrap Forms.
• Создание макета вертикальной формы
• Создание горизонтальной макет формы
• Статическая форма управления
• Создание Инлайн формы макета
• Twitter Bootstrap Изображения
• Twitter Bootstrap Миниатюры
• Twitter Bootstrap медиа-объектов
• Twitter Bootstrap Nav
• Создание выпадающего меню с Twitter Bootstrap Счета и таблетки
• Twitter Bootstrap NavBar
• Создание фиксированных NavBar с Twitter Bootstrap

WordPress является одной из самых популярных CMS по созданию блогов в Интернете, делая его легким для размещения своих идей, изображений, аудио / видео. WordPress может использоваться не только для блогов сообщения, но и для хранения статической информации, которая может быть легко модернизирована, через систему управления контентом (CMS).

• Создание новых и редактирование существующих меню, добавление ссылок в меню
• Добавление и управление стандартными блоками на сайте
• Создание своего блока произвольного HTML кода
• Добавление и редактирование дополнительных стандартных блоков на сайте
• Включение дополнительных стандартных модулей и их настройка
• Настройка прав доступа на сайт
• Добавление ролей для пользователей
• Создание новых пользователей
• Добавление стандартной формы обратной связи на сайт
• Создание вручную и автоматически собственных адресов страниц (алиасов)