Складчина Каталог
Мои курсы

Веб-дизайн. Создание дизайн-макета сайта

Школа Центр Мастеров

О чём курс

О курсе

Дизайн-макет сайта проходит полный цикл проектирования: от разработки архитектуры и технического задания до сборки страниц, базовой верстки и оптимизации перед публикацией.

Основными рабочими инструментами в рамках практических занятий выступают программы Adobe Photoshop и Adobe Dreamweaver.

Что изучается

В рамках курса рассматриваются следующие ключевые направления:

  • Информационная архитектура и юзабилити: принципы ориентации пользователя, эргономика страниц, разработка навигации и структуры меню.
  • Графика для веба: особенности форматов JPEG, GIF и PNG, методы уменьшения веса изображений, подготовка иконок, пиктограмм и favicon.
  • Оформление и стилизация: подбор цветовых схем, шрифтов и гарнитур, логическое форматирование текстов и применение таблиц стилей CSS.
  • Техники верстки: создание «резиновых», жестких и полурезиновых макетов с помощью табличной верстки, а также методы блочной верстки с использованием float и свободного позиционирования.
  • Динамика и мультимедиа: создание простой GIF-анимации и баннеров, вставка видеоматериалов, интерактивных слайдеров и Flash-роликов.
  • Финализация и развертывание: тестирование сайта, методы уменьшения времени загрузки страниц, внедрение поиска и карт, а также работа с системами управления контентом (CMS).

Программа обучения

  • МОДУЛЬ 1. ЧТО НУЖНО ЗНАТЬ ВЕБ-ДИЗАЙНЕРУ
    • СТАДИИ РАЗРАБОТКИ ВЕБ-САЙТА. ПРИМЕР ТЕХНИЧЕСКОГО ЗАДАНИЯ.
    • СИСТЕМА НАВИГАЦИИ НА САЙТЕ. ГЛУБИНА ВЛОЖЕННОСТИ И ПОЗИЦИЯ МЕНЮ.
    • ADOBE DREAMWEAVER CS5. НАСТРОЙКА ПРОГРАММЫ, ОБЩИЕ ПРИНЦИПЫ РАБОТЫ.
    • ПЕРЕНОС ТЕКСТА В ПРОГРАММУ, ВЕРСТКА ТЕКСТА.
    • ПРАКТИЧЕСКАЯ РАБОТА: ЛОГИЧЕСКОЕ ФОРМАТИРОВАНИЕ ТЕКСТА В ADOBE DREAMWEAVER
  • МОДУЛЬ 2. ИНФОРМАЦИОННАЯ АРХИТЕКТУРА САЙТА. ЦВЕТОВЫЕ СХЕМЫ.
    • ЦВЕТОВЫЕ СХЕМЫ, ПРИМЕНЯЕМЫЕ НА САЙТЕ. ИСПОЛЬЗОВАНИЕ "БЕЗОПАСНЫХ" ЦВЕТОВ
    • СОВРЕМЕННЫЕ СТИЛИ ДИЗАЙНА. ШРИФТЫ: СТАНДАРТНЫЕ РАЗМЕРЫ И ГАРНИТУРЫ.
    • ПРИЛОЖЕНИЯ ДЛЯ ПОДБОРА ЦВЕТОВ.
    • ПРАКТИЧЕСКАЯ РАБОТА: ОСВОЕНИЕ ИСПОЛЬЗОВАНИЯ CSS В ADOBE DREAMWEAVER ДЛЯ ОФОРМЛЕНИЯ СТРАНИЦЫ.
  • МОДУЛЬ 3. ЮЗАБИЛИТИ. ЭРГОНОМИКА ВЕБ-СТРАНИЦ
    • ЮЗАБИЛИТИ САЙТА.
    • ОСНОВНЫЕ ЭЛЕМЕНТЫ ЮЗАБИЛИТИ ГЛАВНЫХ СТРАНИЦ И ВНУТРЕННИХ.
    • ПРИНЦИПЫ ОРИЕНТИРОВАНИЯ ПОЛЬЗОВАТЕЛЯ ВНУТРИ САЙТА.
    • ПРАКТИЧЕСКАЯ РАБОТА: ОЦЕНКА ЭФФЕКТИВНОСТИ И ПРОЕКТИРОВАНИЕ ПОЛЬЗОВАТЕЛЬСКОГО ВЗАИМОДЕЙСТВИЯ
  • МОДУЛЬ 4. ПОДГОТОВКА ИЛЛЮСТРАЦИЙ И ГРАФИЧЕСКИХ ЭЛЕМЕНТОВ
    • ОСНОВНЫЕ ФОРМАТЫ ГРАФИКИ JPEG, GIF, PNG8, PNG24. ОСНОВНЫЕ РАЗЛИЧИЯ И ОБЛАСТИ ПРИМЕНЕНИЯ.
    • ПОДГОТОВКА ГРАФИКИ В ПРОГРАММЕ ADOBE PHOTOSHOP. СПОСОБЫ УМЕНЬШЕНИЯ ВЕСА ИЗОБРАЖЕНИЯ.
    • СОЗДАНИЕ СТАНДАРТНЫХ ГРАФИЧЕСКИХ ЭЛЕМЕНТОВ - ИКОНОК, ПИКТОГРАММ, FAVICON И ПР.
    • ПОДГОТОВКИ ИЗОБРАЖЕНИЙ НА ПРОЗРАЧНОМ ФОНЕ
    • ПРИМЕНЕНИЕ КАРТ ИЗОБРАЖЕНИЙ IMAGEMAP.
    • ПРАКТИЧЕСКАЯ РАБОТА: Сжатие и обрезка фотографий для вставки на страницы сайта. Создание обтекания и отступов через CSS.
    • ПРИМЕНЕНИЕ CSS ДЛЯ СОЗДАНИЯ ЭФФЕКТА «ПРИ НАВЕДЕНИИ» В МЕНЮ САЙТА.
  • МОДУЛЬ 5. МАКЕТИРОВАНИЕ ВЕБ-СТРАНИЦ С ПОМОЩЬЮ ТАБЛИЦ
    • НАРЕЗКА И СОХРАНЕНИЕ ТИПОВОГО МАКЕТА В ПРОГРАММЕ ADOBE PHOTOSHOP ДЛЯ ТАБЛИЧНОЙ ВЕРСТКИ.
    • СБОРКА МАКЕТА В ПРОГРАММЕ ADOBE DREAMWEAVER C ИСПОЛЬЗОВАНИЕМ ТАБЛИЦЫ
    • "РЕЗИНОВЫЙ" ИЛИ ЖЕСТКИЙ ДИЗАЙН, ПОЛУРЕЗИНОВЫЕ МАКЕТЫ ДИЗАЙНА.
    • ПРАКТИЧЕСКАЯ РАБОТА: Разметка области для нарезки макета. Создание таблицы и сборка макета. Способы создания резиновой «шапки» страницы
    • СПОСОБЫ ОФОРМЛЕНИЯ МЕНЮ, ЛЕВОЙ И ПРАВОЙ КОЛОНОК.
  • МОДУЛЬ 6. МАКЕТИРОВАНИЕ ВЕБ-СТРАНИЦ С ПОМОЩЬЮ БЛОКОВ
    • НАРЕЗКА И СОХРАНЕНИЕ ТИПОВОГО МАКЕТА В ПРОГРАММЕ ADOBE PHOTOSHOP ДЛЯ БЛОЧНОЙ ВЕРСТКИ.
    • СПОСОБЫ СБОРКИ МАКЕТА С ИСПОЛЬЗОВАНИЕМ СВОЙСТВ CSS FLOAT И СВОБОДНОГО ПОЗИЦИОНИРОВАНИЯ.
    • ПРИЁМЫ БЛОЧНОЙ ВЁРСТКИ WEB-СТРАНИЦЫ
    • ПРАКТИЧЕСКАЯ РАБОТА: Разметка области для нарезки макета. Сборка макета с использованием float. Применение свободного позиционирования на странице.
    • СПОСОБЫ ОФОРМЛЕНИЯ МЕНЮ, ЛЕВОЙ И ПРАВОЙ КОЛОНОК.
  • МОДУЛЬ 7. GIF-АНИМАЦИЯ И БАННЕРЫ. СОЗДАНИЕ ДИНАМИЧЕСКИХ ЭЛЕМЕНТОВ В DREAMWEAVER
    • ЧТО ТАКОЕ GIF-АНИМАЦИЯ
    • СОЗДАНИЕ АНИМИРОВАННЫХ БАННЕРОВ, АВАТАРОВ И СМАЙЛИКОВ
    • СПОСОБЫ ПОДКЛЮЧЕНИЯ РОЛИКОВ FLASH НА СТРАНИЦУ
    • ВСТАВКА ВИДЕО НА СТРАНИЦУ
    • ИСПОЛЬЗОВАНИЕ ДИНАМИЧЕСКИХ ЭЛЕМЕНТОВ НА WEB-СТРАНИЦЕ (НА ПРИМЕРЕ ВЫПАДАЮЩИХ МЕНЮ И ПР.), ПРИЁМЫ РАБОТЫ С ЭЛЕМЕНТАМИ SPRY В DREAMWEAVER
    • ВСТАВКА «СЛАЙДЕРОВ» НА СТРАНИЦУ
    • ПРАКТИЧЕСКАЯ РАБОТА: Создание баннера и установка на страницу сайта. Установка FLASH на страницу сайта.
    • ДОБАВЛЕНИЕ ДИНАМИЧЕСКИХ ЭЛЕМЕНТОВ
  • МОДУЛЬ 8. ТЕСТИРОВАНИЕ САЙТА. ИСПОЛЬЗОВАНИЕ СИСТЕМЫ УПРАВЛЕНИЯ САЙТОМ
    • ОПТИМИЗАЦИЯ САЙТА. СПОСОБЫ УМЕНЬШЕНИЯ ВРЕМЕНИ ЗАГРУЗКИ СТРАНИЦЫ.
    • ТЕСТИРОВАНИЕ САЙТА.
    • СИСТЕМА УПРАВЛЕНИЯ САЙТОМ.
    • ЭТАПЫ СТАНДАРТНОГО ТЕСТИРОВАНИЯ САЙТА.
    • ДОБАВЛЕНИЕ СИСТЕМЫ ПОИСКА НА САЙТЕ.
    • ВСТАВКА СХЕМЫ ПРОЕЗДА НА САЙТ.
    • ВЕБ 2.0 И СИСТЕМЫ УПРАВЛЕНИЯ КОНТЕНТОМ (CMS)
Складчина создана 1 февраля 2014 г.

Теги курса

Профессии
Веб-дизайнер
Навыки
Веб-дизайнВерстка
Инструменты
PhotoshopСайт

Другие материалы школы 12

ЦМ Центр Мастеров Все материалы
G Google Analytics: Профессиональная web-аналитика 1 485 ₽ 23 700 ₽ −94%X XML. Применение и практика 528 ₽ 4 500 ₽ −88%M Microsoft Excel 2010/2013. Базовый 1 160 ₽ 3 500 ₽ −67%Основы продвижения сайтов для руководителей. Как контролировать специалистов по SEO Основы продвижения сайтов для руководителей. Как контролировать специалистов по SEO 1 547 ₽ 3 500 ₽ −56%X XML и JavaScript 435 ₽ 2 500 ₽ −83%M Microsoft Excel 2010/2013. Расширенные возможности 1 889 ₽ 6 000 ₽ −69%M Microsoft Excel 2016/2019 Большие таблицы L.2 954 ₽ 7 700 ₽ −88%X XML и PHP 1 162 ₽ 4 500 ₽ −74%M Microsoft Excel 2016/2019 PowerQuery L.3.1 3 301 ₽ 16 500 ₽ −80%M Microsoft Excel 2016/2019 Формулы массивов L.3 1 211 ₽ 9 900 ₽ −88%M Microsoft Excel 2016/2019 PRO функции L.2.1 954 ₽ 7 700 ₽ −88%P PHP. Расширенные возможности 1 843 ₽ 9 000 ₽ −80%

Ещё интересные курсы 12

Ещё интересные курсы

12 700 ₽