Главная

Мурманский арктический государственный университет

eye Версия для слабовидящих    Письмо вебмастеру Сообщение администратору
Web-графика
 

Учебно-методическое обеспечение

дисциплины «Web- графика, web-дизайн»

 

 

1. Объем дисциплины и виды учебной работы

№ п/п

Шифр и наименование специальности

Курс

Семестр

Виды учебной работы в часах

Вид итогового контроля (форма отчетности)

 

Трудо-емкость

Всего аудит.

ЛК

ПР/

СМ

ЛБ

Сам.

работа

2

030500.04 - педагог профессионального обучения (дизайн)

заочное отделение

4

 

 

5

8

 

 

9

116

 

 

104

18

 

 

12

 

 

12

 

 

-

-

 

 

-

6

 

 

12

98

 

 

92

Зачет

 

 

Экзамен

 

2. Содержание разделов дисциплины.

Web- сайт. Классификации web-сайтов. Интернет, всемирная паутина. Web-сайт, Web- страница, web-сервер. Классификация сайтов по интерактивности, по частоте изменения, по использованию технологий, по функциональному назначению.

Этапы разработки web-сайта. Основные этапы разработки сайта: планирование, реализация, тестирование, размещение, рекламирование, сопровождение. Вопросы, решаемые на каждом этапе. Основные элементы, размещаемые на web-странице.

Навигационная структура web-сайта. Модели организации сайта: линейная организация, иерархия, решетка. Удобство использования и структуры сайта. Выбор структуры и типа сайта. Теория навигации. Размещение элементов навигации. Типы ссылок.

Формат web- страницы. Типы формата web-страниц: «резиновый» дизайн; «к верху от сгиба»; панорамные страницы; подгон страницы. Выбор формата и типа сайта.

Основные правила web-дизайна. Пространственные отношения. Формы. Цветовые сочетания. Текстуры. Особенности академического стиля. Дизайн домашней страницы.

Web-графика. Основные графические элементы на web- страницах. Выставочная графика, фон, логотип, баннер, визуалы. Основные графические форматы, используемые на страницах web-сайта: gif, jpeg, png. Палитра и диффузия. Оптимизация графики. 

Язык разметки гипертекста HTML. Определение. Назначение и принцип работы. Теги одиночные и контейнерные. Структура HTML документа. Основные теги форматирования текста. Заголовки, параграф, шрифт. Списки. Логическое и физическое форматирование. Представление цветов в документе. Теги вставки линий, изображений. Гиперссылки. Внешние и внутренние ссылки.

Фреймы. Фрейм и набор фреймов. Схемы наборов фреймов. Создание фреймов и их оптимизация. Решение проблем с фреймами.

Табличный дизайн. Создание таблицы. Работа с ячейками. Использование таблиц для оформления страниц. Вложенные таблицы.

Использование шаблонов. Определение, назначение. Создание. Изменяемые и неизменяемые области. Вложенные шаблоны. Недостатки шаблонов и их преодоление.

Каскадные таблицы стилей. Определение, назначение. Переопределение стиля. Способы задания стилевых описаний. Спецификация CSS. Классы. Динамические эффекты с использованием CSS.

Свободно позиционируемые элементы. Определение, назначение. Создание свободно позиционируемых элементов, параметры. Недостатки и их преодоление.

Использование сценариев. Язык JavaScript. Объекты. Объектная модель документа. Как пишутся web-сценарии. Альтернативные технологии.

Создание динамических эффектов. Создание динамических эффектов средствами программы Macromedia DreamWeaver и ImageReady. Особенности создания Rollovers. Создание кнопок.

Создание анимации. Создание анимации в DreamWeaver  и ImageReady. Эффект движения, эффект изменения прозрачности. Текстовые деформации. Банеры.

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

 

3. Темы для самостоятельного изучения.

 

№ п/п

Наименование раздела

дисциплины.

Тема.

Форма самостоятельной работы

Кол-во часов

Форма контроля выполнения самостоятельной работы

1.

Этапы разработки web-сайта.

Расчетно-графическое задание (РГЗ).

6

Защита РГЗ

 

2.

Навигационная структура web-сайта Тема: «Удобство использования навигации».

Сравнительный анализ систем навигации нескольких web-сайтов

4

Письменный отчет

 

3

Формат web- страницы

Составление конспекта

2

Проверка конспекта

3.

Основные правила web-дизайна. Тема: «Как повысить юзабилити сайта».

Составление конспекта

4

Проверка конспекта

 

4.

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

Составление конспекта

Самостоятельная работа в компьютерном классе

6

Проверка конспекта

Проверка созданных файлов

4.

Язык разметки гипертекста HTML. Основные теги форматирования текста. Заголовки, параграф, шрифт. Списки. Представление цветов в документе. Теги вставки линий, изображений. Гиперссылки. Внешние и внутренние ссылки.

Самостоятельное выполнение практической работы

8

Письменный отчет

5

Планирование и реализация сайта.

Самостоятельная работа в компьютерном классе по созданию сайта выбранной тематики.

20

Защита web-сайта

6.

Фреймы

Самостоятельное выполнение практической работы

2

Письменный отчет

7.

Табличный дизайн

Составление конспекта

Самостоятельная работа в компьютерном классе

6

Проверка конспекта

Проверка созданных файлов

8.

Создание шаблонов и библиотечных элементов.

Самостоятельная работа в компьютерном классе

2

Проверка созданных файлов

9.

Каскадные таблицы стилей. Их применение для форматирования текста.

Самостоятельная работа в компьютерном классе

8

Проверка созданных файлов

10.

Свободно позиционируемые элементы

С/Р в компьютерном классе

10

Проверка созданных файлов

11.

Использование сценариев. Создание сценариев на языке JavaScript

C/P в компьютерном классе

30

Проверка созданных файлов

12.

Динамические эффекты и их создание.

C/P в компьютерном классе

4

Проверка созданных файлов

8

Создание анимации

С/Р в компьютерном классе

14

Проверка созданных файлов

9

Создание интерактивного сайта

Работа над сайтом

64

Защита сайта

 

4. Методические рекомендации по организации изучения дисциплины.

 

Лекция №1

Тема: Web- сайт. Классификации web-сайтов.

 

План

1. Интернет, всемирная паутина. Web-сайт,

2. Web- страница, web-сервер.

3. Классификация сайтов

 

Лекция №2

Тема: Этапы разработки web-сайта.

 

План

  1. Основные этапы разработки сайта
  2. Вопросы, решаемые на каждом этапе.
  3. Основные элементы, размещаемые на web-странице.

 

Лекция №3

Тема: Навигационная структура web-сайта.

 

План

1. Модели организации сайта: линейная организация, иерархия, решетка.

2. Удобство использования и структуры сайта.

3. Выбор структуры и типа сайта.

4. Теория навигации. Размещение элементов навигации. Типы ссылок.

 

Лекция №4

Тема: Основные правила web-дизайна.

 

План

1. Формат Web-страницы. Типы формата web-страниц

2. Выбор формата и типа сайта.

3. Пространственные отношения. Формы.

4. Цветовые сочетания. Текстуры.

5. Особенности академического стиля.

6. Дизайн домашней страницы.

 

Лекция №5

Тема: Web-графика. Основные графические элементы на web- страницах.

 

План

1. Выставочная графика, фон, логотип, баннер, визуалы.

2. Основные графические форматы, используемые на страницах web-сайта: gif, jpeg, png. Палитра и диффузия.

3. Оптимизация графики.

 

Лекция №6

Тема: Язык разметки гипертекста HTML.

 

План

1. Определение. Назначение и принцип работы.

2. Структура HTML документа.

3. Основные теги форматирования текста.

4. Логическое и физическое форматирование.

5. Представление цветов в документе.

6. Теги вставки линий, изображений.

7. Гиперссылки. Внешние и внутренние ссылки.

 

Лабораторная работа №1

Тема: Этапы разработки web-сайта.

Цель работы: научиться формировать образ будущего сайта.

 

План

  1. Выбор темы сайта.
  2. Планирование:

цель создания;

целевая аудитория;

обратная связь с посетителем;

обновление информации.

 

Лабораторная работа №2

Тема: Язык разметки гипертекста HTML

Цель работы: научиться реализовывать сайт при помощи технологии HTML.

 

План

  1. Структура документа HTML. Основные текстовые элементы страницы. Теги форматирования.
  2. Вставка графических элементов на web-страницу.
  3. Создание гиперссылок.
  4. Таблицы.
  5. Формы.

 

Лабораторная работа №3

Тема: Подготовка графических элементов web-сайта.

Цель: научиться оптимизировать графику для web-страниц.

План

1. Подготовка логотипа.

2. Создание фона.

3. Создание других графических элементов.

 

Лабораторная работа №4

Тема: Знакомство с интерфейсом программы Macromedia DreamWeaver

Цель: научиться проектировать и создавать web-узлы.

 

План

  1. Основные элементы окна программы.
  2. Планирование web-узла.
  3. Создание локального web-узла.

 

Лабораторная работа №5

Тема: Создание и редактирование HTML-документа.

Цель: научиться создавать html-документы.

 

План

  1. Определение параметров страницы.
  2. Ввод и форматирование текста.

 

Лабораторная работа №6

Тема: Создание гиперссылок.

Цель: научиться связывать html-документы в пределах одного web-узла.

 

План

  1. Гиперссылка на документ
  2. Гиперссылка на почтовый адрес
  3. Гиперссылка на метку
  4. Создание меню переходов.

 

Лабораторная работа №7

Тема: Использование графики.

Цель: научиться вставлять рисунки в html-документ.

 

План

  1. Вставка изображения
  2. Создание интерактивного рисунка.
  3. Создание карты изображения.

 

Лабораторная работа №8

Тема: Таблицы.

Цель: научиться создавать и форматировать таблицы.

 

План

  1. Создание таблицы.
  2. Форматирование таблицы.
  3. Разметка web-страницы при помощи таблицы.

 

Лабораторная работа №9

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

Цель: научиться управлять стилем документа, создавать внутренний и внешний стиль, работать со слоями.

 

План

 

1. Стиль. Свойства стиля. Определение стиля.

2. Внутренний стиль

3. Внешний стиль документа.

4. Свободные элементы на странице и их позиционирование.

 

Рекомендуемая литература:

Основная литература

1. Пауэлл Т. Web-дизайн. - СПб: «БХВ-Петербург», 2004.- 1045 с.

2. Д. Кирсанов. Веб- дизайн. - СПб: «Симбо», 2004.- 358 с.

3. Якоб Нильсен. Веб- дизайн. - СПб: «Симбо», 2004.- 504 с.

Дополнительная литература

4. А.А. Кожемякин. HTML и CSS в примерах. Создание web-страниц. - М.: «Альтекс-А», 2004. - 410 с.

5. А.А. Дуванов. Web- конструирование. HTML. - СПб: «БХВ-Петербург», 2003.- 320 с.

6. И.Е. Смирнова. Начала web-дизайна - СПб: «БХВ-Петербург», 2003.- 244 с.

7. В. Дунаев. JavaScript. - СПб: «Питер», 2004. - 394 с.

 

5. Примерные зачетные тестовые задания.

ВАРИАНТ 1

1. Что такое HTML-программа?

A) документ на экране броузера;

Б) интернетовская web-страница;

B) текст на языке HTML;

Г) список тегов.

2.   Кто выполняет HTML-программу?

A)  человек:

B)  броузер;

В) компилятор;

Г) Windows.

3.   Записывая абзац, между двумя соседними словами вы поставили 5 пробелов. Сколько пробелов вы увидите в броузере?

A) пять;

Н) один:

B) ни одного:

Г) два.

4.   Записывая на HTML свое имя. Иван Гавриков написал так:

Иван Гавриков

Как покажет этот текст броузер?

A) в две строчки;

Б) в одну строчку с двумя пробелами:

B) в одну строчку с одним пробелом:
Г) не покажет вовсе.

 Какие теги (табл.5) формируют список (рис.5)?

Все. что может испортиться - портится.

Все, что не может испортиться - портится гоже.

Рис. 5

Таблица 5

A) в первом столбце;

Б) во втором столбце;

B) в третьем столбце.

6.  Какие теги способны изменить hbci фона документа?

  • A) ... ;
    Б) ...;

В) ...
Г) <Р>.

7.  Какие команды способны изменить цвет шрифта?

A)... ;

Б) ... ;

В) ...

Г) <Р>...

;Д) ...

 

ВАРИАНТ 2

1. Отметьте верные высказывания:

а) существует атрибут для задания ширины таблицы:

Б) существует атрибут для задания высоты таблицы:

В) для таблицы можно задать фоновый рисунок;

Г) задавая разные значения атрибутами width, height, можно изменить объем картинки (размер файла

на диске);

Д) нельзя сделать картинку ссылкой.

2. Имя атрибута тега <А> для задания гиперссылки:

A) name:

Б) link;

B) img;

Г) sre;

Д) href.

3. Имя атрибута тега <А> для задания метки внутри документа:

A) name;

Б) link;

B) img:

Г) sre;

Д) href.

4. Имя тега для вставки изображения на web-странице:

A) name:

Б) link;

B) img;

Г) src:

Д) href.

5. Выберите относительный адрес с указанием на текущий каталог:
А) ../00.html;

Б) C:/HOME/00.html;

B) 00.html;

Г) ./00.html

6. Имя атрибута для задания способа выравнивания:
A) top;

Б) left;

В middle;

Г) bottom;

Д) align.

7. Значение размер шрифта в атрибуте size задается:

A) в пикселях:

Б) в пунктах;

B) не имеет единиц измерения:

Г) и процентах.

 

6. Примерный перечень вопросов к зачету.

 

  1. Глобальная сеть, всемирная паутина.
  2. Что такое web-сайт, web-страница, web- сервер, гипертекстовый и гипермедиа-документ?
  3. Классификация web-сайтов.
  4. Этапы разработки web-сайта.
  5. Работы, выполняемые на этапе планирования и реализации web-сайта.
  6. Тестирование и публикация web-сайта.
  7. Рекламирование и сопровождение web-сайта.
  8. Навигационная схема сайта, базовые схемы навигации.
  9. Основные (стандартные) элементы web-страницы, их функциональное назначение.
  10. Основы web-дизайна (академический стиль, шрифт, цвет, контраст, графика, анимация).
  11. Язык разметки гипертекста (теги, атрибуты, конструкция HTML-документа).
  12. Основные теги форматирования текста.
  13. Вставка таблиц на web-странице.
  14. Размещение графики на web-странице.
  15. Построение гипертекстовых связей (внутренние и внешние гиперссылки).
  16. Формы.
  17. Технология CSS.
  18. Форматы web-графики, оптимизация.

 

7. Примерный перечень вопросов к экзамену.

  1. Глобальная сеть, всемирная паутина.
  2. Что такое web-сайт, web-страница, web- сервер, гипертекстовый и гипермедиа-документ?
  3. Классификация web-сайтов.
  4. Этапы разработки web-сайта.
  5. Работы, выполняемые на этапе планирования и реализации web-сайта.
  6. Тестирование и публикация web-сайта.
  7. Рекламирование и сопровождение web-сайта.
  8. Навигационная схема сайта, базовые схемы навигации.
  9. Основные (стандартные) элементы web-страницы, их функциональное назначение.
  10. Основы web-дизайна (академический стиль, шрифт, цвет, контраст, графика, анимация).
  11. Язык разметки гипертекста (теги, атрибуты, конструкция HTML-документа).
  12. Основные теги форматирования текста.
  13. Вставка таблиц на web-странице.
  14. Размещение графики на web-странице.
  15. Построение гипертекстовых связей (внутренние и внешние гиперссылки).
  16. Формы.
  17. Технология CSS. Назначение.
  18. Способы подключения каскадных таблиц стилей.
  19. Динамические эффекты в CSS.
  20. Форматы web-графики, оптимизация.
  21. Фреймы.
  22. Табличный дизайн.
  23. Дизайн на основе шаблонов.
  24. Свободно позиционируемые элементы. Определение, назначение.
  25. Создание свободно позиционируемых элементов, параметры.
  26. Недостатки свободно позиционируемых элементов и их преодоление.
  27. Анимация элементов web-страниц.
  28. Язык JavaScript. Объекты.
  29. Объектная модель документа.
  30. Как пишутся web-сценарии.
  31. Интерактивные сайты. Серверное программирование.

 

8. Примерный перечень тем курсовых работ.

 

1. Разработка и реализация web-сайта компьютерной фирмы.

2. Разработка и реализация web-сайта туристической фирмы.

3. Разработка и реализация web-сайта школы.

4. Разработка и реализация web-сайта спортивного клуба.

5. Разработка и реализация web-сайта книжного магазина.

6. Разработка и реализация web-сайта модельного агентства.

7. Разработка и реализация web-сайта риэлторской фирмы.

8. Разработка и реализация web-сайта охранной фирмы.

9. Разработка и реализация web-сайта экологического общества.

10. Разработка и реализация web-сайта рыбного порта.

11. Разработка и реализация web-сайта аэропорта.

12. Разработка и реализация web-сайта салона красоты.

13. Разработка и реализация web-сайта фитнес-клуба.