План лекций

Компьютерные курсы «Streamline»

Web-дизайн

План лекций

25.09.2015

Програма навчання Web-дизайн (66 годин)

№	Тема	Цель
1	2	3
Введение (6 часов)
1.1	Введение в предмет. Введение в языки разметки. Язык разметки гипертекста HTML.	Схема взаимодействия с помощью протоколов. Основные понятия.
1.2	Структура XHTML-документа. Основные элементы и их назначение.
1.3	Основные принципы HTML Правила записи тегов и их атрибутов в стандарте XHTML.
1.4	Классификация тегов: линейные и блочные элементы.
1.5	Модель форматирования текста: заголовки и абзацы. Элементы <p>, <h1>...<h6>. Кодировки и символьные подстановки.
1.6	Указание кодировки текста при помощи тега <meta> .Создание простейшей web-страницы
Форматирование текста (4 акад. час.)
2.1	Классификация тегов: логическое и физическое форматирование.
2.2	Теги физического форматирования: <b>, <i>. Отличие от тегов логического форматирования <strong>, <em>. Устаревшие теги, атрибуты и их нежелательное использование. Атрибут style. Преимущества использования стилей
2.3	Цвет в HTML и CSS. Изменение цвета фона и цвета текста на странице.
2.4.	Рекомендованная практика: оформление текста на веб-странице.
Графика в HTML (5 акад. час.)
3.1	Форматы графических файлов. Оптимизация.
3.2	Тег <img /> и его атрибуты (src, alt, width, height, border).
3.3	Отмененные атрибуты: align, valign, hspace, vspace.
3.4	Использование стиля для оформления. Настройка свойств с помощью стилей.
3.5	CSS Свойство max-width. Рекомендованная практика: создание веб-страницы с использованием изображений.
Гиперссылки (4 акад. час.)
4.1	Общие сведения о гиперссылках. Тег <a> и его атрибуты (href, target).
4.2	Эргономика, удобство навигации. Абсолютная и относительная адресация. Организация внешних ссылок.
4.3.	Организация внутренних ссылок, атрибут HTML-элементов id. Организация внутренних ссылок с помощью элемента <a>. Атрибут name
4.4	Организация «смешанного» перехода (на указанный элемент во внешнем HTML-документе). Графические ссылки.
Списки (3 акад. час.)
5.1	Неупорядоченные списки: элементы <ul>, <li>. Упорядоченные списки: элементы <ol>, <li>.
5.2	Списки определений: элементы <dl>, <dd>, <dt>. Вложенные списки.
5.3	Форматирование списков: CSS свойства list-style-type, list-style-image, list-styleposition, list-style.
Карты ссылок (2 акад. час.)
6.1	Общие понятия. Классификация и форматы карт ссылок: клиентский и серверный варианты.
6.2	Построение клиентского варианта карт ссылок: теги <map>, <area> и их атрибуты.
Таблицы (5 акад. час.)
7.1	Создание простейшей таблицы.
7.2	Атрибуты тегов <table>, <tr> и <td>, border, cellspacing cellpadding. Указание ширины и высоты ячейки: атрибуты width, height. Выравнивание данных в таблице: атрибуты align и valign. Управление цветом фона и цветом рамок таблицы (отдельной строки, отдельной ячейки). Использование изображений в качестве фона таблицы (отдельной строки, отдельной ячейки).
7.3	Объединение ячеек: атрибуты colspan, rowspan.
7.4	Теги логического структурирования таблиц: <thead>, <tbody>, <tfoot>. Теги логического группирования столбцов: <colgroup>, <col>.
7.5	Табличная верстка сайтов как устаревшая технология.
Оформление страниц с помощью CSS (6 акад. час.)
8. Каскадные таблицы стилей (2 акад. час.)
8.1	Введение в таблицы стилей. Возможности таблиц стилей. Спецификации CSS. Применение таблиц стилей: способы внедрения стилей в документ, каскадность. Селекторы, типы селекторов: классы, селекторы-потомки, идентификаторы, псевдоклассы etc. Псевдоклассы ссылок: hover, active, visited. Атрибут cursor.
8.2	Правила форматирования текста: атрибуты color, font-size, font-style, font-weight, font-family etc. Обобщенный атрибут font. Атрибуты блочных элементов текста: text-indent, text-align, text-justify, line-height, letter-spacing, word-spacing etc.
8.3	Модель визуального форматирования. Блочные элементы: Форматирование границ. Отступы margin, padding. Атрибуты стиля display, visibility, oat, overflow.
8.4	Примеры использования плавающих элементов. Схемы построения Управление фоновым цветом и рисунком.
8.5	Рекомендованная практика: проектирование сайта без использования графики.
8.6	Создание таблиц на веб-странице.
9. Каскадные таблицы стилей (2 акад. час.)
9.1	Относительное и абсолютное позиционирование. Атрибуты position, top, right, bottom. Примеры использования. Фиксированная позиция.
9.2	Рекомендованная практика: Фиксирование шапки сайта, позиционирование элементов на странице.
10. Кроссбраузерная верстка сайтов. (2 акад. час.)
10.1	Порезка макета в Photoshop. Принципы верстки с использованием исключительно CSS.
10.2	Интерпретация свойств CSS различными браузерами. Кросс-браузерность. CSS-hacks. Фиксированный дизайн, гибкий дизайн - Жидкие и эластичные макеты - на основе блоков <div> и свойства float.
Валидность кода. Использование валидаторов для проверки правильности кода web-страниц.
HTML 5
11. HTML 5 (5 академ. час.)
11.1	Устройство HTML5. Синтаксис. Новые элементы и устаревшие теги. Мультимедиа, возможности использования. Семантика. HTML5 APIs.
11.2	Примеры использования и поддержка браузерами. Использование HTML5‐целесообразность. CSS3. Основные свойства.
11.3	Border-radius, text-shadow, box-shadow, opacity, RGBA. Префиксы браузеров. Переходы в CSS3 и их использование.
11.4	Свойства: Поворот, кручение, сгиб, масштабирование. Создание галереи изображений с помощью возможностей CSS3.
11.5	Множественные фоны(Параллакс).Синтаксис и поддержка.
12. Веб-формы. Отзывчивый веб-дизайн.  (3 акад. час.)
12.1	Свойство media-queries. Адаптация сайта под мобильные устройства. Панель web-developer как помощник веб-дизайнера.
12.2	Тег <form>, <input>. Атрибут type. И его значения checkbox, radio. Общие принципы работы форм. Создание формы поиска, регистрации, входа на сайт, опроса
12.3	Улучшение форм с помощью стилей CSS3 и HTML5.Новые возможности и свойства.
13. Публикация web-сайтов (2 акад. час.)
13.1	Хостинг, регистрация доменного имени.
13.2	Размещение сайта в Internet. Работа с FTP-клиентами.
14. CMS - системы управления сайтом (3 акад. час.)
14.1	Введение в динамические сайты
14.2	Устройство веб-серверов. Понятие Базы данных. Определение динамического сайта и его преимущества по сравнению со статическими. Определение CMS.
14.3	Описание возможностей типовой CMS. Установка denwer. CMS Joomla, её достоинства и недостатки, сфера применения. Установка CMS Joomla на хостинг. Настройка системы.
15. CMS Joomla. Общие надстройки системы. Работа с меню (2 акад. час.)
15.1	Создания навигационной системы сайта. Взаимосвязью между пунктом меню и страницей сайта, меню и модулем.
15.2	Менеджер меню и работа с ним. Типы пунктов меню и создание новых пунктов. Работа с материалом сайта.
16. CMS Joomla (2 акад. час.)
16.1	Установка модулей, шаблонов, плагинов и их настройка. Создание своей фотогалереи, собственных модулей и их вывод в шаблоне.
16.2	Создание своего сайта на основе шаблона, наполнение материалом. Строение шаблона страницы. Создание интернет-магазина на основе  CMS Joomla.
17. Wordpress. (2 акад. час.)
17.1	Основы работы с WordPress. Установка и использование тем. Поиск, выбор и замена оформления сайта спомощью новой темы. Настройки тем.
17.2	Управление виджетами. Типовые виджеты. Плагины WordPress. Установка и использование плагинов. Строение шаблона страницы. Создание своего сайта на основе выбранной темы. Наполнение материалом
18. Flash и его применение в веб. (2 акад. час.)
18.1	Основы. Введение в анимацию, принципы анимации и ее виды. Shape tween, motion tween.
18.2	Понятие символа и работа с ним.
19. Слои и маски. (2 акад. час.)
19.1	Работа со слоями. Маска слоя. Анимация маски.
19.2	Создание баннера для своего сайта. Внедрение баннера на свой сайт.
20. AS3  (2 акад. час.)
20.1	Основы AS3, создание галереи изображений с помощью  AS3.
20.2	Создание своего сайта с помощью  AS3. Рекламный баннер как ссылка на сайт рекламодателя.

Также в курсе будут рассмотрены следующие вопросы:

Общие принципы проектирования веб-сайтов. Информационная архитектура и юзабилити сайта. Юзабилити-тестирование сайта Оптимизация текста для веб. Основные теги для оптимизации текста. Ключевые слова и работа с ними. как подключить уникальный шрифт  для своего сайта понятие кроссбраузерности Основы поискового маркетинга.