Создание и оптимизация интернет-проектов

Объем курса - 88 (аудиторных занятий) ак. часов.

«Разработка концептуального решения будущего сайта».
- Вводное занятие. Ознакомление со следующими темами:
  - фирменный стиль: фирменный знак (логотип), цветовая гамма, шрифты;
  - виды сайтов (визитка, каталог и т.п.);
  - строение страниц сайта (составные части макета).
- Самостоятельная работа – сбор исходных данных для будущего проекта (работа в Интернете):
  - анализ сайтов-аналогов в сети;
  - подготовка клипартов для фирменного знака;
  - подбор цветовой гаммы, выбор наиболее подходящего макета для собственного сайта;
  - составление иерархии для будущего сайта и эскизирование внешнего вида страниц;
  - подбор шрифтовых гарнитур.
«Разработка фирменного знака».
- Сборка фирменного знака из готовых клипартов либо его ручная отрисовка, за неимением таковых, в векторном редакторе CorelDRAW. Изучение инструментов:
  - перо;
  - кривая и ее составляющие;
  - геометрические фигуры;
  - ввод и форматирование текста;
  - заливка и ее составляющие.
«Создание макета главной страницы в программе AdobePhotoshop».
- Лекция по инструментальным возможностям растрового графического редактора AdobePhotoshop.
- Полный разбор основных инструментов, панелей, меню и палитр программы.
- Начало работы с холстом, фоном и компоновкой основных элементов:
  - создание нового документа;
  - подготовка фона сайта;
  - составление сетки макета;
  - организация слоев и папок документа.
«Оформление визуала главной страницы в программе Adobe Photoshop».
- Проработка шапки (визуала/хедера) главной страницы с помещением в нее логотипа:
  - оформление фона шапки;
  - размещение логотипа и эмблемы;
  - вставка контактов и прочей информации.
«Оформление навигации главной страницы в программе Adobe Photoshop».
- Проработка панели навигации главной страницы, левой и/или правой панели, древа каталога:
  - подбор фона навигационной панели и внешнего вида;
  - оформление кнопок и/или выпадающих меню;
  - выбор шрифтовых гарнитур для пунктов меню.
«Оформление слайдера главной страницы в программе Adobe Photoshop».
- Создание слайдера с его последующим размещением на главной странице. Подготовка 4-6 слайдов для дальнейшего размещения в тексте кода в формате .png:
  - выбор рекламной темы и контента для каждого слайда;
  - композиционное оформление коллажа слайда, согласно общей идее.
«Оформление мейна и футера главной страницы в программе «Adobe Photoshop».
- Проработка мейна (главной области контента), заполнение его контетом, оформление подвала (футера):
  - группировка разделов мейна;
  - подготовка изображений для главной страницы и их оформление;
  - подготовка текста и его форматирование на странице;
  - оформление заголовков и т.п.
«Создание страницы каталога и текстовой страницы в программе «Adobe Photoshop».
- Создание страницы каталога:
  - проработка контента и подготовка иконок изображений товара;
  - оформление иерархии групп и т.п.
- Создание текстовой страницы и заполнение ее контентом.
«Создание страницы с карточкой товара в программе Adobe Photoshop».
- Подготовка изображений товаров и контента, оформление страницы с необходимым функционалом: кнопками, вкладками, списками, лупой и т.п.
«Завершение работы с макетом сайта».
- Проверка компоновки, соответствия страниц задуманной концепции и т.д.
- Создание других страниц (страница 404, страница формы обратной связи, другие страницы). Отрисовка мобильной версии.
«Создание анимированного рекламного баннера».
- Подборка клипартов, шрифтов и написание сюжета рекламного сообщения, начальная обработка кадровых слоев в программе Adobe Photoshop.
«Создание анимированного рекламного баннера».
- Сбор кадров в единую последовательность, задание времени анимации, выгрузка анимированного баннера в формат .gif.
«Введение. Знакомство с разметкой страницы».
- Язык разметки гипертекста HTML. Понятие тега. Виды тегов.
- Структура страницы.
- Теги заголовочной части страницы.
- Теги тела страницы. Блочные и строчные тэги.
- Организация комментариев.
- Создание списков.
«Организация контейнеров страницы».
- Таблицы. Особенности организации и оформления таблиц.
- Формы. Создание форм на странице с использованием различных типов полей ввода и выбора.
«Другие элементы организации страницы».
- Тэги HTML5. Семантическая организация страницы.
- Аудио и видео и другие элементы на странице.
- Использование фреймов при создании страниц.
- Создание карты изображений.
«Знакомство с CSS».
- Подключение таблицы стилей на страницу.
- Основные селекторы.
- Фон на странице и фон для блоков.
- Создание рамок для блоков.
«Позиционирование элементов на странице».
- Назначение размеров блоку. Внутренние и внешние отступы. Выравнивание блоков на странице.
- Плавающие элементы на странице.
- Позиционирование элементов на странице.
«Оформление текстовых элементов страницы».
- Назначение оформления шрифта.
- Подключение нестандартных шрифтов на страницу.
- Декорирование текстовых элементов.
«Оформление остальных элементов страницы».
- Оформление таблиц.
- Изменение отображения элементов страницы.
- Псевдоэлементы, псевдоклассы и их использование.
«Дополнительные возможности CSS3».
- Организация колонок.
- Трансформация и анимация элементов.
- Медиа-запросы.
«Размещение сайта в сети интернет. Использование систем управления контентом напримере CMS Wordpress».
- Хостинг для сайта.
- Установка CMS на примере Wordpress.
- Стандартные шаблоны и их индивидуализация.
«Создание собственного шаблона для Wordpress».
- Функции Wordpress.
- Элементы страницы.
- Ваш индивидуальный дизайн страниц сайта.
«Язык программирования Javascript».
- Подключение скриптов на страницу.
- Основные элементы языка программирования JavaScript;
- Условия и циклы в JavaScript.
- Функции JavaScript.
«Работа с элементами страницы, DOM модель».
- DOM - Объекты страницы.
- Доступ к элементам страницы.
«Продвижение сайта».
- Семантическая ядро для сайта.
- Использование мета-тэгов.
- Как понравиться поисковым роботам.
- О программах автоматической раскрутки.

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