У Вас есть навыки работы на персональном компьютере, но Вам этого недостаточно? Вы хотите научиться создавать Web-сайты, изучить Internet-графику и мультипликацию? На курсе Web-дизайна Вы познакомитесь с основами организации гипертекста, принципами работы в редакторе Adobe ImageReady, основами JavaScript и XML, особенностями создания сайтов в различных программах.

... Возможности современных программ, используемых для создания Web-страниц. Обзор современных браузеров и программ создания Web-сайтов. Основные компоненты Web-страницы и способы их визуального представления. Создание навигации. GIF-анимация и баннеры. Карты изображения ImageMap. Оценка и тестирование сайта... В программе курса обучения Web-дизайну - все, что необходимо знать и уметь начинающему разработчику Интернет-проектов, эксперту по разработке и поддержке Web-сайтов, Web-дизайнеру.

Выпускники курса «Web-дизайн» получают свидетельство государственного образца - пропуск в мир информационных технологий различных компаний, холдингов, дизайн-студий. Средний уровень заработной платы специалиста - от 800$ до 2500$.

1. Основные понятия.

1.1. Дизайн в Internet: задачи, подходы, решения. Основные понятия и терминология.

1.2. Этапы разработки Web-сайта. Основные формулировки в техническом задании на разработку сайта.

1.3. Язык гипертекста HTML. Стандарты HTML 4.01, XHTML 1.1. Разработка сайта при помощи текстового редактора. Имена файлов.

1.4. Средства Web-дизайнера. Текстовые редакторы различных уровней сложности (AkelPad, PSPad, HTML-Kit, HomeSite), визуальные HTML-кодеры (Dreameweaver, Nvu, Quanta). Графические редакторы (Adobe Photoshop, Adobe ImageReady, GIMP) и просмотрщики (IrfanView, XnView, ImageMagick). Современные браузеры MSIE 5.5 и 6, Mozilla (в том числе Firefox) и Opera; их сравнительные преимущества и недостатки.

Практическая работа: написание Web-страницы, отражающей содержание занятия.

2. Основы HTML.

2.1. Принципы HTML: логическая и физическая разметка, горизонтальный и вертикальный потоки, типы тегов, атрибуты и их значения. Значение логической разметки для индексирования.

2.2. Подход к цвету в HTML, цветовое пространство RGB, именованные и шестнадцатеричные цвета, выбор цвета при помощи Adobe Photoshop и вспомогательных программ. Цветовая гармония.

2.3. Оформление текста в HTML. Основные блоковые и строчные теги. Особенности набора формул, язык MathML. Спецсимволы. Кодировки русского языка (CP1251, KOI8-R) и Unicode (UCS-2, UTF-8). Работа с кодировками.

2.4. Основные компоненты Web-страницы и способы их визуального представления на страницах сайта. Теги структуры документа: заголовки, списки и таблицы. Использование таблиц для верстки. Атрибуты тегов таблиц, строк и ячеек. Организация таблиц по колонкам.

Практическая работа: оформление рекламного объявления средствами HTML-таблиц.

3. Разработка информационной архитектуры.

3.1. Гиперссылки. Относительные, серверные и локальные ссылки, ссылки по протоколам HTTP, FTP и SMTP.

3.2. Элементы информационной архитектуры. Распределение информации по разделам сайта с учетом информационной, логической и визуальной взаимосвязи между разделами.

3.3. Размещение рисунков. Атрибут "alt" и неграфические (текстовые, голосовые) браузеры. Рисунок как элемент верстки и как символ.

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

4. Подготовка иллюстраций для Internet.

4.1. Требования к иллюстрациям в Internet. Обзор растровых форматов иллюстраций JPEG, GIF и PNG. Векторные форматы SVG и PDF.

4.2. Подготовка графики в программах Adobe Photoshop, Adobe ImageReady и Macromedia Fireworks. Способы уменьшения объема файла. Подготовка изображений, имеющих прозрачные области; MSIE и PNG-прозрачность.

Практическая работа: оптимизация и размещение заданных изображений на Web-странице.

5. Специализированные графические элементы. 

5.1. Создание фоновых иллюстраций. Техника создания бесшовных узоров в программах Adobe PhotoShop и Adobe ImageReady. 

5.2. «Нарезка» изображений на фрагменты в программе Adobe ImageReady. Оптимизация фрагментов изображений.

5.3. Применение карт изображений ImageMap в Web-дизайне.

5.4. Что такое GIF-анимация. Способы создания и параметры анимации. Использование Adobe ImageReady и GIMP для создания GIF-анимации.

5.5. Баннеры: параметры, размещение на Web-странице. Разработка сюжета баннера. Использование GIF-анимации и роликов Macromedia Flash в баннерной рекламе. Воздействие баннерной рекламы на пользователя. 

5.6. Создание кнопок. Имитация различных состояний кнопки, создание эффекта «rollover». Обработка событий JavaScript.

Практическая работа: создание кнопок, фоновых элементов и баннеров.

6. Построение сайтов. Макетирование в Web. 

6.1. Формы. Способы построения интерактивных страниц. Клиентские и серверные решения.

6.2. Фреймы, их преимущества и недостатки. Работа браузеров с фреймами.

6.3. META-теги и их использование в "раскрутке" сайта. Выбор кодировки. Декларация DOCTYPE.

6.4. Приемы макетирования. Создание фиксированных и адаптируемых страниц. Размещение информации на странице с учетом решаемых задач. Примеры удачных и неудачных решений. Эргономика сайта (Web-usability). Факторы, которые затрудняют и факторы, которые облегчают восприятие пользователем информации на сайте.

6.5. Система навигации на сайте. Принципы построения системы навигации. Создание навигационных панелей.

6.6. Критерии оценок созданного сайта. Способы снижения визуального шума и повышения четкости подачи материала. Методика тестирования сайта на аудитории. Выработка предложений по редизайну и обоснование необходимости редизайна.

Практическая работа. Создание сайта с двухуровневой системой навигации.

7. Каскадные таблицы стилей CSS.

7.1. Стандарты CSS, CSS 1 и 2. Проблемы с реализацией CSS в различных браузерах.

7.2. Организация CSS, основные типы селекторов. Классы, идентификаторы, псевдоэлементы и псевдоклассы. Интерактивность в CSS.

7.3. CSS-свойства. Написание кросс-браузерного кода. Работа в программе TopStyle.

7.4. Отделение кода CSS. Способы представления информации на экране и на принтере.

Практическая работа: построение таблицы CSS и применение к сайту.

8. Будущее Web: XML-технологии.

8.1. Основы XML: элементы и атрибуты. Древовидная структура XML. Определения типа документа DTD. Стили XSLT. Офисные расширения XML: OpenOffice и WordprocessingML.

8.2. XML и Интернет: технологии RDDL, SVG, MathML, RDF, RSS и XHTML.

8.3. Сравнение HTML, XHTML и XML. Основные особенности стандарта XHTML 1.1. Конвертация и проверка HTML-страниц: программа HTML Tidy.

Практическая работа: перевод сайта в формат XHTML 1.1.