ГлавнаяОсновы ...Web-дизайн

Программа курса «Знакомство с Интернет, Web-дизайн»

1. Пояснительная записка

Рабочая программа курса «Знакомство с Интернет, Web-дизайн» основана на требованиях к обязательному минимуму содержания основной образовательной программы подготовки учителя информатики по специальности 030100 «информатика», которые изложены в разделе ДПП.Ф.17 (Компьютерные сети, интернет и мультимедиа технологии) Государственного образовательного стандарта от 14 апреля 2000 года.

Курс «Знакомство с Интернет, Web-дизайн» расчитан на 72 часа. За это время выпускник должен научиться работать в сети Интернет и овладеть технологиями создания Интернет-публикаций.

2. Учебный план

В соответствии с указанными требованиями ГОСа излагается материал по следующим разделам:

  1. Работа в глобальной сети Internet.
    Цель: Подготовка слушателей к поиску информации и самостоятельной работе в сети Интернет, обучение работе с электронной почтой.
    Академ. часов – 12. Аудиторные/ практические занятия – 4/8.
    Формы контроля: контроль выполнения практических занятий
  2. Основы Web-дизайна. Цель: Получение основных сведений о технологиях, связанных с разработкой структуры WEB-сайта и созданием web-страниц и web-анимаций. Практическое создание собственного сайта.
    Академ. часов – 60. Аудиторные/ практические занятия – 16/44.
    Формы контроля: контроль выполнения практических занятий.

3. Учебно-тематический план

1. Раздел: «Работа в глобальной сети Internet»

№

Тема

Академ. часов

Ауд./ практ.

1

Введение и первое путешествие по Internet

4

1/3

2

Поиск информации в Internet, FTP

6

2/4

3

Электронная почта

2

1/1

Итого:

12

4/8

2. Раздел: «Основы Web-дизайна»

№

Тема

Академ. часов

Ауд./ практ.

1

Введение. Создание гипертекстовых страниц

4

1/3

2

Основные сведения о HTML. Таблицы, списки, ссылки, иллюстрации

4

1/3

3

Каскадные таблицы стилей (CSS)

4

1/3

4

DreamWeaver, настройка. Создание структуры web-сайта

4

1/3

5

Создание макета «домашней страницы». Стили

4

1/3

6

Разработка системы навигации. Фреймы и формы

6

2/4

7

События. Оптимизация html кода

4

1/3

8

Техника рисования и выделения областей изображения

6

1/5

9

Web-оптимизация изображений. Создание HTML файла

4

2/2

10

Создание графических элементов Web-дизайна

4

1/3

11

Flash-технологии в web-дизайне

2

1/1

12

Объекты Flash. Слои, символы

4

1/3

13

Создание Flash-анимаций

6

1/5

14

Создание интерактивных элементов. Публикация

4

1/3

Итого:

60

16/44

4. Учебная программа

1. Раздел: «Работа в глобальной сети Internet»

1. Введение и первое путешествие по Internet
  • Понятие Internet и его функции, краткий обзор служб e-mail, www, ftp, chat и пр.;
  • Выбор кодировки для просмотра страниц на русском языке;
  • Изменение начальной страницы, закладки;
  • Сохранение информации, работа с несколькими окнами;
  • Особенности работы с разными браузерами IExplorer, Opera, Netscape;
  • Практическая работа в WWW.

2. Поиск информации в Internet, FTP и программы закачки файлов
  • Введение. Поисковый сервер;
  • Наиболее эффективные поисковые сервера. Составление запросов;
  • Протокол FTP. Программа докачки FlashGet;
  • Программы «пауки»,TelePort.

3. Электронная почта
  • Настройка почтового клиента;
  • Создание отправление и прием писем;
  • Ответ на письмо, пересылка письма;
  • Прикрепление файлов к письмам;
  • Бесплатные сервисы, получение почтового адреса.

2. Раздел: «Основы Web-дизайна»

1. Введение. Создание гипертекстовых страниц

  • Создание гипертекстовых страниц в Word;
  • Программы для создания WEB-страниц;
  • Этапы разработки WEB-сервера;
  • Практическая работа: создание логической структуры сайта школы.

2. Основные сведения о HTML. Таблицы, списки, ссылки, иллюстрации
  • Язык HTML, виды тэгов. Тэги <head>, <title>, <body>;
  • Форматирование текста страницы при помощи тэгов <b>, <i>, <h1>…<h6>, <font>, <br>, <p>, <div>;
  • Таблицы – основное средство для управления расположением материалов;
  • Строение таблицы. Параметры тэгов <table>, <tr>, <td>, задание размеров таблиц;
  • Создание списков;
  • Создание ссылки. Параметры тэга <a>. Внешняя и внутренняя ссылки.

Практические работы:

  1. структурирование информации при помощи списков и таблиц;
  2. оформление текстовой части персональной страницы.

3. Каскадные таблицы стилей (CSS)
  • Спецификация CSS;
  • Наследование и классы;
  • Псевдоклассы ссылок;
  • Практические работы: подключение таблицы стилей к HTML-документу.

4. DreamWeaver, настройка. Создание структуры web-сайта
  • Практические работы;
  • Настройка DreamWeaver;
  • Логическая структура сайта. Создание «локальной» структуры сайта;
  • Размещение индексных файлов в разделах сайта;
  • Создание графики в Fireworks, размещение и последующее редактирование ее в DreamWeaver.

5. Создание макета «домашней страницы». Стили.
  • Дизайн страниц с помощью таблиц с фиксированной ширины и расчет ширины на основе параметров окна браузера, создание страниц с адаптируемыми размерами;
  • Форматирование текстовых элементов страницы: применение стилей CSS;
  • Применение CSS для унификации дизайна сайта.

Практические работы:

  1. Макетирование и создание страниц с использованием текстовых и графических элементов;
  2. Редактирование стилей в DreamWeaver;
  3. Формирование стилевого файла сайта.

6. Разработка системы навигации. Фреймы и формы.
  • Правила работы с формами. Элементы форм;
  • Разбиение окна браузера на фреймы;
  • Организация системы навигации, включающей фреймы, формы и др. элементы;
  • Практическая работа: Cоздание системы навигации для сайта с использованием фреймов и форм.

7. События. Оптимизация html кода

  • Обработка событий. Классификация событий. Прохождение событий;
  • Объекты, свойства. Создание событий в DreamWeaver;
  • Работа со слоями, поведения объектов;
  • Практическая работа: Создание событий в web-документе.

8. Техника рисования и выделения областей изображения
  • Работа с Macromedia FireWorks;
  • Создание растровых, векторных, текстовых объектов;
  • Изменение свойств объектов. Свойства линий и «заливка», эффекты;
  • Особенности работы с многослойным документом;
  • Инструменты выделения. Управление параметрами инструментов;
  • Изменение размеров, трансформация и поворот объектов;
  • Практическаие работы: создание коллажей.

9. Web-оптимизация изображений. Создание HTML файла.
  • Требования к иллюстрациям в Internet. Обзор типов файлов иллюстраций;
  • Форматы JPEG, GIF, PNG и их оптимизация;
  • Баннерная реклама. Статичные баннеры;
  • Создание анимированных баннерных изображений;
  • Сохранение GIF-анимации. Форматы анимированных изображений.

Практические работы:

  1. Назначение ссылок графическим элементам;
  2. Сохранение и оптимизация HTML файла;
  3. Разработка и создание логотипа школы.

10. Создание графических элементов Web-дизайна.

  • Оптимизация нарезки фрагментов изображений с помощью инструмента Slice;
  • Создание карт изображений (ImageMap) с помощью инструмента HotSpot;
  • Создание "rollover" (перекатывание) кнопок;
  • Сохранение и оптимизация HTML файла;
  • Практические работы: создание html-файла с внедренными слайсами, картами изображений, кнопками, оптимизация графических элементов.

11. Flash-технологии в web-дизайне

  • Возможности и среда Flash;
  • Создание линий и форм;
  • Практическая работа: Рисование во Flash.

12. Объекты Flash. Слои, символы.
  • Объекты Flash: формы, символы, экземпляры, звуки.
  • Выделение и трансформация объектов.
  • Работа со слоями и библиотеками.
  • Практическая работа: Создание символов, экземпляров, рисунка из экземпляра.

13. Создание Flash-анимаций.
  • Работа с кадрами. Покадровая анимация;
  • Автоматическая анимация движения и формы. Движение по пути;
  • Создание кнопок. Озвучивание событий;
  • Практическая работа: Создание анимаций движения, формы, кнопки.

14. Создание интерактивных элементов. Публикация.
  • Язык ActionScript. Работа с панелью команд;
  • Основные команды интерактивности;
  • Тестирование клипов и их публикация в swf, exe и html-файлах;
  • Практическая работа: Создание интерактивных кнопок и переходов.