г. Иваново, ул. Жиделева, д.21, офис 125
т. (4932) 346-290, 282-004
Email: inter_37@mail.ru
Создание и продвижение WEB-сайтов

Создание и продвижение WEB-сайтов

Объем курса - 100 академических часов.
  1. «Разработка концептуального решения будущего сайта».
    • Вводное занятие. Ознакомление со следующими темами:
      • фирменный стиль: фирменный знак (логотип), цветовая гамма, шрифты;
      • виды сайтов (визитка, каталог и т.п.);
      • строение страниц сайта (составные части макета).
    • Самостоятельная работа – сбор исходных данных для будущего проекта (работа в Интернете):
      • анализ сайтов-аналогов в сети;
      • подготовка клипартов для фирменного знака;
      • подбор цветовой гаммы, выбор наиболее подходящего макета для собственного сайта;
      • составление иерархии для будущего сайта и эскизирование внешнего вида страниц;
      • подбор шрифтовых гарнитур.
  2. «Разработка фирменного знака».
    • Сборка фирменного знака из готовых клипартов либо его ручная отрисовка, за неимением таковых, в векторном редакторе CorelDRAW. Изучение инструментов:
      • перо;
      • кривая и ее составляющие;
      • геометрические фигуры;
      • ввод и форматирование текста;
      • заливка и ее составляющие.
  3. «Создание макета главной страницы в программе AdobePhotoshop».
    • Лекция по инструментальным возможностям растрового графического редактора AdobePhotoshop.
    • Полный разбор основных инструментов, панелей, меню и палитр программы.
    • Начало работы с холстом, фоном и компоновкой основных элементов:
      • создание нового документа;
      • подготовка фона сайта;
      • составление сетки макета;
      • организация слоев и папок документа.
  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.
  13. «Введение. Знакомство с разметкой страницы».
    • Язык разметки гипертекста HTML. Понятие тега. Виды тегов.
    • Структура страницы.
    • Теги заголовочной части страницы.
    • Теги тела страницы. Блочные и строчные тэги.
    • Организация комментариев.
    • Создание списков.
  14. «Организация контейнеров страницы».
    • Таблицы. Особенности организации и оформления таблиц.
    • Формы. Создание форм на странице с использованием различных типов полей ввода и выбора.
  15. «Другие элементы организации страницы».
    • Тэги HTML5. Семантическая организация страницы.
    • Аудио и видео и другие элементы на странице.
    • Использование фреймов при создании страниц.
    • Создание карты изображений.
  16. «Знакомство с CSS».
    • Подключение таблицы стилей на страницу.
    • Основные селекторы.
    • Фон на странице и фон для блоков.
    • Создание рамок для блоков.
  17. «Позиционирование элементов на странице».
    • Назначение размеров блоку. Внутренние и внешние отступы. Выравнивание блоков на странице.
    • Плавающие элементы на странице.
    • Позиционирование элементов на странице.
  18. «Оформление текстовых элементов страницы».
    • Назначение оформления шрифта.
    • Подключение нестандартных шрифтов на страницу.
    • Декорирование текстовых элементов.
  19. «Оформление остальных элементов страницы».
    • Оформление таблиц.
    • Изменение отображения элементов страницы.
    • Псевдоэлементы, псевдоклассы и их использование.
  20. «Дополнительные возможности CSS3».
    • Организация колонок.
    • Трансформация и анимация элементов.
    • Медиа-запросы.
  21. «Размещение сайта в сети интернет. Использование систем управления контентом напримере CMS Wordpress».
    • Хостинг для сайта.
    • Установка CMS на примере Wordpress.
    • Стандартные шаблоны и их индивидуализация.
  22. «Создание собственного шаблона для Wordpress».
    • Функции Wordpress.
    • Элементы страницы.
    • Ваш индивидуальный дизайн страниц сайта.
  23. «Язык программирования Javascript».
    • Подключение скриптов на страницу.
    • Основные элементы языка программирования JavaScript;
    • Условия и циклы в JavaScript.
    • Функции JavaScript.
  24. «Работа с элементами страницы, DOM модель».
    • DOM - Объекты страницы.
    • Доступ к элементам страницы.
  25. «Продвижение сайта».
    • Семантическая ядро для сайта.
    • Использование мета-тэгов.
    • Как понравиться поисковым роботам.
    • О программах автоматической раскрутки.
Зачетное занятие