Учебный центр «Звенислав»

Программа курса «WEB дизайн»

1. Сайт, структура, цели и задачи.
Понятие «web-сайт», его структура. Разработка дизайнерской и логической концепции на основе поставленных задач, выявленной целевой аудитории, а также фирменного стиля организации (на примере). Способы определения перечня страниц и навигации (ссылок) между ними. Виды сайтов: простые, порталы, корпоративные, internet-магазины и так далее. Основные элементы информационной архитектуры. Распределение информации по разделам сайта с учетом информационной, логической и визуальной взаимосвязи между разделами.

WEB-страница. Основные компоненты WEB-страницы и способы их визуального представления. Цвет. Цветовые схемы. Современные стили дизайна

Практическая работа: Структурирование информации и разработка системы навигации на конкретном примере (задания: магазин, визитка, электронное СМИ, портал).


2. Дизайн статических изображений.
Создание макета. Принципы логического построения макета сайта. Роль размеров в дизайне. Эргономика сайта (web-usability). Факторы, затрудняющие и облегчающие восприятие пользователем информации.
Оформление текста на сайте (контента). Выбор шрифтов и размеров. Создание дизайн – макетов страниц согласно структуре: главная страница, информационная страница, страница каталога, фото-галерея и так далее.
Иллюстрации. Требования к иллюстрациям в интернете. Обзор форматов иллюстраций JPEG, GIF, PNG, SWF.
Программа Adobe PhotoShop. Принципы работы. Панель инструментов, основные приемы работы с программой. Обработка изображений, работа с прозрачным фоном.

Практическая работа: Создание различных элементов дизайна. Подготовка графики в программе Adobe PhotoShop. Подготовка изображений с учётом стиля дизайна. Оптимизация изображений, способы уменьшения объема файла. Создание стандартных графических элементов - иконок, пиктограмм, favicon и пр. Нарезка сайта.

3. Анимация.
Разновидности «живых» изображений. Преимущества применения того или иного типа в каждом конкретном случае. Обзор программ, которые могут быть использованы WEB дизайнером при создании анимационных изображений. Автоматизация процесса.
Создание анимированных изображений в Adobe PhotoShop.
Создание анимации.

Практическая работа:
Создание анимированных баннеров, кнопок, элементов дизайна при помощи Adobe PhotoShop, Macromedia Flash и еще нескольких программ.

4. Создание действующего макета страницы сайта:
Создание страницы при помощи языка верстки HTML.
«Тег» как ключевое понятие HTML, его атрибуты, виды, синтаксис теговой структуры. Основные способы работы с HTML кодом страниц. Открывающие и закрывающие теги.
Как работают браузеры. Способы распознавания HTML-страниц различными браузерами (Internet Explorer, Opera, Mozilla).
Оформление кода – теги. Правила использования тега. Маркировка текста. Правила размещения графических изображений, размеры текста, настройка текста. Особенности табличной верстки сайта. Создание таблиц и размещение информации в них (текст, картинки, видео). Объединение ячеек таблицы, создание «резиновых» и фиксированных таблиц.

Практическая работа:
Создание основной страницы с текстом и изображениями. Редактирование текста.

5. Создание действующей модели сайта.
Блочная верстка страниц, «резиновая» верстка особенности и применение.
Каскадные таблицы стилей, CSS, построение навигации по сайту, include. Способы форматирования. Размещение изображений (jpg, gif, png), звука, бегущей строки и видео на страницах. Кнопки, формы. Кроссбраузерная верстка. Проверка отображения сайта в наиболее распространенных браузерах.
Практическая работа: создание сайта «визитки».

6. Автоматизация процессов создания сайтов и управления ими.
Macromedia Dreamweaver, web page maker, notepad++ и другие HTML редакторы. Способы работы, преимущества и недостатки применения.
Системы управления сайтами. Бесплатные и условно-бесплатные CMS, платные CMS (Битрикс, ShopCMS и др.). «Антивзлом» - система сохранности информации и защита сайта, на примере платформы WEB Dragon.
Правила размещения на бесплатных хостах: narod.ru, ucoz.ru
Использование FTP протокола, программы Total Commander, FileZilla и т.п.


Зачет: собеседование.