Общая трудоемкость дисциплины составляет 4 зачетных единицы (144 часа).
№ п.п.
| Наименование раздела
дисциплины
| Содержание раздела
(дидактические единицы)
|
| Введение. Теория Web-дизайна
| Основные понятия и определения. Основные сведения о языках разметки: HTML, XML, XHTML. Эволюция языков разметки. Цели и задачи языка HTML. Что такое WEB-сервер, web-сайт, web-страница и чем они отличаются.
Теория Web-дизайна. Планирование сайта. Файловая структура сайта. Сетевая среда, практичность Web-сайтов, общие характеристики пользователей и особенности программирования сайтов в зависимости от этих характеристик.
|
| Процесс Web-дизайна
| Практический сайт и его основные характеристики, проектирование сайтов, план сайта, классификация сайтов. Жизненный цикл сайта. Сопровождение. Структура сайта, классификация моделей сайтов, сравнение сайтов, теория навигации. Экспертная оценка сайта.
|
| Создание Web-страниц
| Структура HTML-документа. Понятие элементов и атрибутов. Что такое тег? Типы тегов. Правила оформления HTML-документа. Основные элементы форматирования текста. Элементы блочной (block) и текстовой (inline) разметки. Элементы стилей абзацев. Упорядоченные и неупорядоченные списки, списки определений. Использование комментариев.
|
| Гипертекстовые ссылки и иллюстрации на Web-страницах
| Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML. Создание гиперссылок с помощью элемента A и его атрибутов. Ссылки на элементы текущей страницы. Ссылка mailto.
Размещение иллюстрации на web-странице. Типы файлов иллюстраций. Элемент IMG и его атрибуты. Размещение текста и изображений. Выравнивание изображений.
|
| Построение таблиц.
| Создание таблицы. Правила задания размеров для таблицы и ее ячеек. Цвета ячеек и строк. Дополнительные атрибуты таблиц (width, border, align, cellpadding, cellspaсing). Группировка строк и столбцов таблицы. Рамки и линии.
|
| Фреймы и формы. Метаданные
| Основы HTML-форм. Элементы формы. Создание форм (текстовые поля и атрибуты, элемент <input>, создание меню). Дизайн электронных бланков. Методы отправки информации из полей формы.
Разбиение окна браузера на фреймы. Описание фрейма на языке HTML. Задание логики взаимодействия фреймов. Типичные проблемы сайта с фреймами.
Метаданные. Кодировки символов и выбор кодировок. Формирование ключевых слов. Формирование описания сайта.
|
| Каскадные таблицы стилей (CSS)
| Назначение и применение CSS. Блочные и строковые элементы. Управление отображением цветами текста и фоном. Свойства текстовых фрагментов. Применение стилей и классов к элементам документа HTML. Позиционирование элементов на странице при помощи CSS. Создание и использование внешнего стилевого файла. Подключение к страницам сайта путем связывания и импорта. Приемы макетирования web-страницы с использованием стилей.
|
| Интерактив на сайте. Реклама.Расширения, компоненты, модули, плагины
| Что такое интерактив. Работа с пользователем. Включение различных видов интерактива на сайте. Виды рекламы в Интернет. Особенности применения рекламы на сайте.
Каталоги. Интернет-магазины. Галереи. Архивы. Виедо-архивы. Управление пользовательскими правами. Файловые менеджеры. Форумы. Гостевые книги.
|
| Инструменты разработчика. Общий обзор
| Верстка. Программы верстки. Сайты-конструкторы. CMS-cистемы. CMF-системы. Когда и что применяется
|
| Графика для Web. Фирменный стиль и логотип
| Виды графики. Требования к иллюстрациям в Internet. Обзор форматов иллюстраций JPEG, GIF, PNG, SWF, SVG. Условия применения графики в Web. Основные форматы. Программы для обработки графики. Оптимизация. Создание кнопок, форм. Разработка шаблона. Особенности фирменного стиля для Web. Выбор графического редактора для разработки. Разработка логотипа и элементов шапки сайта. Использование готовых шаблонов для дизайна.
|
| Техническое задание. Разработка проекта сайта
| Разработка технического задания для создания сайта, основные принципы и условия. Ограничивающие моменты. Работа в команде. График работы.
Что такое проект сайта. Выбор целевой аудитории. Разработка структуры сайта. Разработка дерева сайта. Выбор средств для работы с графикой и верстки.
|
| Работа с текстом сайта. Макетирование страницы.
| Технический писатель. Организация коммуникаций и сбор информации. Распределение информации по разделам сайта с учетом информационной, логической и визуальной взаимосвязи между разделами. Оптимизация текста для поисковых систем.
Принципы построения макета. Роль размеров в дизайне. Оформление веб-страницы с использованием CSS. Работа с CSS в DreamWeaver. Эргономика сайта (web-usability). Факторы, которые затрудняют и факторы, которые облегчают восприятие пользователем информации на сайте. Версии сайта, адаптированные для печати и для мобильных устройств. Оформление текстового материала. Выбор шрифтов и размеров. Практические советы и рекомендации
|
| Подготовка иллюстраций и графических элементов
| Подготовка графики в программе Adobe PhotoShop. Способы уменьшения объема файла. Особенности использования векторных программ. Создание стандартных графических элементов - иконок, пиктограмм, favicon и пр. Подготовка изображений с учётом стиля дизайна. Особенности подготовки изображений на прозрачном фоне. Применение карт изображений ImageMap в WEB-дизайне. Использование CSS для создания эффектного дизайна
|
| Gif-анимация и баннеры. Создание динамических элементов.Flash-технологии в web-дизайне
| Что такое GIF-анимация. Создание анимированных баннеров, аватаров и смайликов. Способы подключения роликов FLASH на страницу. Вставка видео на страницу. Использование динамических элементов на web-странице (на примере выпадающих меню) и пр. Возможности и среда Flash. Создание линий и форм. Объекты Flash: формы, символы, экземпляры, звуки. Выделение и трансформация объектов. Работа со слоями и библиотеками. Работа с кадрами. Покадровая анимация. Автоматическая анимация движения и формы. Движение по пути. Создание кнопок. Озвучивание событий.
|
| Кроссплатформенные сборки
| Необходимость кроссплатформенных сборок. Имитация серверных приложений на локальной машине. Инструментарий. Denwer. Xxamp. Основные особенности. Подключение и использование баз данных.
|
| Верстка сайта. CMS и CMF системы
| Верстка сайта в блокноте. Верстка в специализированных программах. Условия использования специальных шаблонов (внешних и внутренних).
Понятие CMS и CMF систем. Платные и бесплатные системы. Особенности их применения. Наиболее популярные платные и бесплатные системы. Верстка сайта в CMS-системе. Работа с базами данных.
|
| Хостинг, тестирование,отладка
| Выбор хостинга. Выбор доменного имени. Особенности бесплатного и платного хостинга. Перенос сайта. Тестирование сайта. Этапы стандартного тестирования сайта. Добавление системы поиска на сайте. Периодичность обновления
|