НЕГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ ЧАСТНОЕ УЧРЕЖДЕНИЕ

ДОПОЛНИТЕЛЬНОГО ОБРАЗОВАНИЯ
«УЧЕБНЫЙ ЦЕНТР «ИНТЕР»

УЧЕБНАЯ ПРОГРАММА
«СОЗДАНИЕ И ПРОДВИЖЕНИЕ WEB-САЙТОВ»
Объем курса - 100 академических часов.

1. «Разработка концептуального решения будущего сайта».

Вводное занятие. Ознакомление со следующими темами:
- фирменный стиль: фирменный знак (логотип), цветовая гамма, шрифты;
- виды сайтов (визитка, каталог и т.п.);
- строение страниц сайта (составные части макета).
Самостоятельная работа – сбор исходных данных для будущего проекта (работа в Интернете):
- анализ сайтов-аналогов в сети;
- подготовка клипартов для фирменного знака;
- подбор цветовой гаммы, выбор наиболее подходящего макета для собственного сайта;
- составление иерархии для будущего сайта и эскизирование внешнего вида страниц;
- подбор шрифтовых гарнитур.
2. «Разработка фирменного знака».
Сборка фирменного знака из готовых клипартов либо его ручная отрисовка, за неимением
таковых, в векторном редакторе CorelDRAW. Изучение инструментов:
- перо;
- кривая и ее составляющие;
- геометрические фигуры;
- ввод и форматирование текста;
- заливка и ее составляющие.
3. «Создание макета главной страницы в программе AdobePhotoshop».
Лекция по инструментальным возможностям растрового графического редактора AdobePhoto-
shop.
Полный разбор основных инструментов, панелей, меню и палитр программы.
Начало работы с холстом, фоном и компоновкой основных элементов:
- создание нового документа;
- подготовка фона сайта;
- составление сетки макета;
- организация слоев и папок документа.
4. «Оформление визуала главной страницы в программе Adobe Photoshop».
Проработка шапки (визуала/хедера) главной страницы с помещением в нее логотипа:
- оформление фона шапки;
- размещение логотипа и эмблемы;
- вставка контактов и прочей информации.
5. «Оформление навигации главной страницы в программе Adobe Photoshop».
Проработка панели навигации главной страницы, левой и/или правой панели, древа каталога:
- подбор фона навигационной панели и внешнего вида;
- оформление кнопок и/или выпадающих меню;
- выбор шрифтовых гарнитур для пунктов меню.
6. «Оформление слайдера главной страницы в программе Adobe Photoshop».
Создание слайдера с его последующим размещением на главной странице. Подготовка 4-6
слайдов для дальнейшего размещения в тексте кода в формате .png:
- выбор рекламной темы и контента для каждого слайда;
- композиционное оформление коллажа слайда, согласно общей идее.
7. «Оформление мейна и футера главной страницы в программе «Adobe Photoshop».
Проработка мейна (главной области контента), заполнение его контетом, оформление подвала
(футера):
- группировка разделов мейна;
- подготовка изображений для главной страницы и их оформление;
- подготовка текста и его форматирование на странице;
- оформление заголовков и т.п.
8. «Создание страницы каталога и текстовой страницы в программе «Adobe Photoshop».
Создание страницы каталога:
- проработка контента и подготовка иконок изображений товара;
- оформление иерархии групп и т.п.
Создание текстовой страницы и заполнение ее контентом.
9. «Создание страницы с карточкой товара в программе Adobe Photoshop».
Подготовка изображений товаров и контента, оформление страницы с необходимым
функционалом: кнопками, вкладками, списками, лупой и т.п.
10. «Завершение работы с макетом сайта».
Проверка компоновки, соответствия страниц задуманной концепции и т.д.
Создание других страниц (страница 404, страница формы обратной связи, другие страницы).
Отрисовка мобильной версии.
11. «Создание анимированного рекламного баннера».
Подборка клипартов, шрифтов и написание сюжета рекламного сообщения, начальная
обработка кадровых слоев в программе Adobe Photoshop.
12. «Создание анимированного рекламного баннера».
Сбор кадров в единую последовательность, задание времени анимации, выгрузка
анимированного баннера в формат .gif.
14. «Введение. Знакомство с разметкой страницы».
- Язык разметки гипертекста HTML. Понятие тега. Виды тегов.
- Структура страницы.
- Теги заголовочной части страницы.
- Теги тела страницы. Блочные и строчные тэги.
- Организация комментариев.
- Создание списков.
15. «Организация контейнеров страницы».
- Таблицы. Особенности организации и оформления таблиц.
- Формы. Создание форм на странице с использованием различных типов полей ввода и выбора.
16. «Другие элементы организации страницы».
- Тэги HTML5. Семантическая организация страницы.
- Аудио и видео и другие элементы на странице.
- Использование фреймов при создании страниц.
- Создание карты изображений.
17. «Знакомство с CSS».
- Подключение таблицы стилей на страницу.
- Основные селекторы.
- Фон на странице и фон для блоков.
- Создание рамок для блоков.
18. «Позиционирование элементов на странице».
- Назначение размеров блоку. Внутренние и внешние отступы. Выравнивание блоков на
странице.
- Плавающие элементы на странице.
- Позиционирование элементов на странице.
19. «Оформление текстовых элементов страницы».
- Назначение оформления шрифта.
- Подключение нестандартных шрифтов на страницу.
- Декорирование текстовых элементов.
20. «Оформление остальных элементов страницы».
- Оформление таблиц.
- Изменение отображения элементов страницы.
- Псевдоэлементы, псевдоклассы и их использование.
21. «Дополнительные возможности CSS3».
- Организация колонок.
- Трансформация и анимация элементов.
- Медиа-запросы.
22. «Размещение сайта в сети интернет. Использование систем управления контентом
напримере CMS Wordpress».
- Хостинг для сайта.
- Установка CMS на примере Wordpress.
- Стандартные шаблоны и их индивидуализация.
23. «Создание собственного шаблона для Wordpress».
- Функции Wordpress.
- Элементы страницы.
- Ваш индивидуальный дизайн страниц сайта.
24. «Язык программирования Javascript».
- Подключение скриптов на страницу.
- Основные элементы языка программирования JavaScript;
- Условия и циклы в JavaScript.
- Функции JavaScript.
25. «Работа с элементами страницы, DOM модель».
- DOM - Объекты страницы.
- Доступ к элементам страницы.
Работа с модулем WP-shop – модуль интернет-магазина для Wordpress.
26. «Продвижение сайта».
- Семантическая ядро для сайта.
- Использование мета-тэгов.
- Как понравиться поисковым роботам.
- О программах автоматической раскрутки.

Зачетное занятие.