Выдержки из программы спецкурса

Учебно-тематический план программы дополнительного образования «Основы веб-дизайна»

Тема занятия

Количество часов

Теория

Практика

Инструкция по технике безопасности. Введение в веб-дизайн и конструирование сайтов.

2

2

0

Введение в язык HTML.

2

1

1

Работа с текстом.

2

1

1

Форматирование текста.

2

1

1

Гиперссылки.

4

2

2

Таблицы.

6

4

2

Работа с изображениями.

8

4

4

Основы каскадных таблиц стилей CSS.

8

5

3

Фреймы. SSI.

2

1

1

Формы.

4

2

2

Мультимедиа на веб-странице.

2

2

0

Сценарии JavaScript.

6

4

2

Основы дизайна веб-страниц.

4

3

1

Разные приемы веб-дизайнера.

2

1

1

Публикация сайта в интернете.

2

2

0

Создание и редактирование веб-сайтов в программе KompoZer.

4

1

3

 

ИТОГО

60

36

24

Содержание программы

  1. Введение в веб-дизайн и конструирование сайтов. Основы интернета. Всемирная сеть. Введение в технологию конструирования сайтов и веб-дизайн. Планирование веб-сайта. Структура сайта.

  2. Введение в язык гипертекстовой разметки HTML. Код HTML. Стандарты. Версии языка. Синтаксис и правила HTML. Парные и непарные теги. Атрибуты тегов. Структура HTML-документа. Создание HTML-документа. Метаданные. Границы страницы. Фон страницы.

  3. Работа с текстом.  Создание нового абзаца. Выравнивание абзацев. Тег <CENTER> и </CENTER>. Новые строки. Заголовки. Цитирование. Комментарии. Создание списков: нумерованных и маркированных, вложенных, определений. Специальные символы.
  4. Форматирование текста.  Выделение текста: полужирным, курсивом, подчеркиванием. Гарнитура шрифта. Изменение размера шрифта. Цвет шрифта. Горизонтальный разделитель. Разные теги форматирования текста.
  5. Гиперссылки. Виды ссылок. Тег ссылки <A> и </A>. Атрибуты тега. О URL. Ссылка на страницу. Ссылка в изображении. Баннер. Ссылки на участки одной страницы (якоря). Ссылка на электронный адрес. Цвет ссылок. Создание карты ссылок с помощью кода HTML.
  6. Таблицы. Структура таблицы (столбцы, строки, ячейки). Создание таблицы. Размеры таблицы. Рамка. Размеры ячеек. Шапка таблицы, заголовок. Объединение ячеек. Группы строк и столбцов. Перенос текста. Вложенные таблицы. Табличная верстка.
  7. Работа с изображениями. Основы графики, геометрия цвета и цветовые модели. Форматы файлов изображений. Подготовка веб-изображений. Вставка изображений. Атрибуты тега <IMG>. Альтернативный текст и заголовок изображения. Выравниваний изображений по горизонтали и вертикали. Обтекание текста. Рамки, отступы изображений. Практический курс создания gif-анимации с помощью пакета Adobe Photoshop (Image Ready).
  8. Основы каскадных таблиц стилей (CSS). Назначение таблиц стилей. Создание внешней таблицы стилей. Привязка к таблице. Комментарии. Создание внутренней таблицы стилей. Создание класса. Локальные стили, встроенные в тег. Элементы, форматируемые CSS. Форматирование гиперссылок. Тег <DIV>. Слои. Положение элемента на странице. DIV-верстка.
  9. Фреймы. SSI. Создание фреймов. Версия HTML, поддерживающая фреймы. Поля во фрейме. Фиксация на странице. Полосы прокрутки. Вложенные наборы фреймов. Встроенные фреймы. Технология SSI – включения на стороне сервера.
  10. Формы. Типы управляющих элементов. Создание формы. Отправка данных по электронной почте. Однострочное и многострочное поля ввода текста. Флажки. Зависимые кнопки. Раскрывающийся список. Кнопка передачи. Кнопка сброса. Активные формы. Загрузка файлов на сервер. Тег <LABEL>.
  11. Мультимедиа на веб-странице. Модули (плагины) и элементы ActiveX. MIME-типы. Вставка звуковых файлов. Фоновый звук. Вставка видеофайлов. Вставка Flash-анимации.
  12. Сценарии JavaScript. Скрипт. Сценарии. События и обработчики событий. Вставка сценария. Файлы сценария. Альтернативный текст. Окна сообщений. Всплывающие окна. Эффект переката. Проверка правильности заполнения форм.
  13. Основы дизайна веб-страниц. Основные правила дизайна. Цветовая гармония. Шрифты с засечками и без засечек.
  14. Разные приемы веб-дизайнера. Наложение текста на изображение. Бегущая строка. Картинка в адресной строке. Автоматическое перенаправление на другую страницу. Ошибка 404.
  15. Публикация сайта в интернете. Веб-хостинг. Доменное имя. Поддержка сайта (на примере http://www.1580.ru). Распространенные ошибки. Продвижение сайта.
  16. KompoZer. Обзор функций и возможностей. Настройки программы. Создание нового документа – страницы. Кодировка. Работа с текстом. Гиперссылки. Графика. Мультимедиа. Таблицы. Табличный дизайн. Стили CSS. Шаблоны. Работа с веб-сайтами.

Методическое обеспечение

Дидактический материал

  • уроки, размещенные в интернете на сайте спецкурса (http://web-design.1580.ru);
  • дистанционный курс в среде moodle (http://moodle.1580.ru);
  • таблицы основных тегов языка HTML (печатная форма);
  • Мораренко В.В. Основы web-дизайна. М.: Изд-во МГТУ им. Н.Э. Баумана, 2013. – 161 с.: илл.

Техническое оснащение занятий

  • 15 персональных компьютеров;
  • проектор;
  • экран;
  • доска;
  • маркеры.

Программное обеспечение занятий — установленные пакеты: Adobe Photoshop, KompoZer (свободно распространяемый) – на всех компьютерах.

Список литературы (для педагога и детей)

  1. Гото К., Котлер Э. Веб-редизайн: книга Келли Гото и Эмили Котлер, 2-е издание. – СПб: Символ-Плюс, 2006. — 416 с.: цв. ил.
  2. Кинкоф Ш.В. HTML/ Шерри Виллард Кинкоф; пер. с англ. М.Г.Новикова. – М.: НТ Пресс, 2008. – 320 с.: ил. – (Наглядное руководство).
  3. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб: Символ-Плюс, 2004. – 376 с.: цв. ил.
  4. Круг С. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!», 2-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2008. – 224 с.: цв. ил.
  5. Михайлова Н.И. Создание Веб-сайта учебного заведения в CMS Joomla и Веб-дизайн. Дистанционный курс МИОО.
  6. Мораренко В.В. Основы веб-дизайна: учебно-методическое пособие.  – М.: Изд-во МГТУ им. Н.Э. Баумана, 2013. – 161 с.: ил.
  7. Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. – Пер. с англ. – СПб.: Символ-Плюс, 2008. – 752 с.: ил.
  8. Рева О.Н. Использование HTML, JavaScript и CSS: Руководство Веб-дизайнера / О.Н. Рева. М.:  Эксмо, 2008. – 464 с. (Мастер-класс).
  9. Терри Ли Стоун, Син Адамс, Норин Мориока. Дизайн цвета: практикум. Практическое руководство по применению цвета в графическом дизайне. М.: РИП-Холдинг, 2006. – 240 с.
  10. Т.М. Третьяк, М.В. Кубарева. Практикум Веб-дизайна. – М.: СОЛОН-ПРЕСС, 2007. – 176 с.: ил. – (Серия «Элективный курс * Профильное обучение»).
  11. Сайт, посвященный языку HTML, CSS, веб-дизайну, графике и процессу создания сайтов. Режим доступа: http://www.htmlbook.ru.
  12. Сайт, собравший огромное количество скриптов. Режим доступа: http://dynamicdrive.ru .

 

Программа одобрена и принята на заседании методического объединения учителей информатики ГОУ лицей № 1580 (при МГТУ им. Н. Э. Баумана)

Добавить комментарий