Задания для самостоятельного решения. Методические рекомендации для учащихся

Методические рекомендации для учащихся

По выполнению лабораторной работы № 6

По дисциплине

«Программные средства создания INTERNET-приложений»

Тема: использование изображений-карт на HTML-странице.

Цель: сформировать умения использовать изображения-карты на HTML-страницах.

Оборудование: персональные компьютеры с установленной операционной системой Windows, Notepad, Internet Explorer версии выше 6.0.

Краткие теоретические сведения

Карта - элемент <MAP>

Применяется для представления графического изображения в виде карты с активными областями. Он поддерживает атрибут name, который задает его имя, и включает внутри себя элемент <AREA>, который и задает собственно активные области карты, связанные ссылками с прочими ресурсами.
Синтаксис: <MAP name="имя"> … </MAP>

Активная область карты - элемент <AREA>

Задает активные области карты, представляющие собой ссылки, щелчком по которым можно осуществить переход по ссылке. Элемент не имеет конечного тэга.

Примечание: с изображениями карт удобно работать в стандартном приложении для Windows - редакторе Paint, для него изображение должно быть трансформировано в формат BMP. Используя сетку в режимах увеличения нажатием Ctrl+Gи выбрав инструмент Выделение, когда указатель мыши принимает вид тонкого крестика, координаты курсора можно определить с точностью до одного пикселя. Такая точность может очень пригодиться при задании координат активных областей карты. Элемент <AREA> поддерживает различные атрибуты:

· HREF -этот атрибут указывает URLссылки.

· ALT -задает альтернативный текст для браузеров, которые не поддерживают данный элемент.

· TITLE- задает альтернативный текст для браузеров, который всплывает при наведении курсора на данный элемент.

· SHAPE -задает форму активной области на карте и её координаты, он может принимать значения: "circle" coords=“X,Y,R”, где X,Y,R - координаты центра круга и его радиус; "poly" coords=“X1,Y1,X2,Y2,X3,Y3...”, где X1,Y1,X2,Y2,X3,Y3... - координаты вершин многоугольника; если прямоугольник, то достаточно указать его верхнюю левуюи правую нижнюювершины "rect" coords=“X1,Y1,X2,Y2”.

Задания для самостоятельного решения

Задание на 4 балла:

Создайте в графическом редакторе Paintкартинку в виде:

и сохраните ее с именем «Фигуры.jpg».

Наберите код, приведенный ниже, в любом текстовом редакторе и сохраните его под именем «MyWeb-6» с расширением .html или .htm.

где в качестве адресов для перехода заданы страницы из лабораторных работ № 2, 3 и 4; а значения координат соответствуют фактическим значениям координат в пикселях из вашей картинки «Фигуры.jpg».

Задание на 6 баллов:

1. Создайте web-документ с названием «MyWeb-6_6»

2. В заголовке web-документа разместите ваши данные: группа, ФИ.

3. Создайте рисунок и задайте на нем активные области, согласно варианту:

Используя картинку, создать карту-изображение. Заданный элемент которой, будет являться активной областью (ссылкой на html-страницу), содержащую название данного элемента. Например: если в задании задано слово «круг», значит необходимо создать страницу html с именем “круг” и словом «круг» - ссылкой. При нажатии на ссылку, осуществляется переход на страницу с картой.

Вариант 1

Зеленый круг, фиолетовый треугольник.

Вариант 2

Синий прямоугольник, зеленая трапеция.

Вариант 3

Зеленый прямоугольник, сиреневый треугольник.

Вариант 4

Сиреневый круг, голубая трапеция.

Вариант 5

Желтый треугольник, голубой круг.

Вариант 6

Желтый круг, красный треугольник.

Вариант 7

Фиолетовый прямоугольник, голубой треугольник.

Вариант 8

Синий треугольник, красный прямоугольник.

Вариант 9

Красный круг, серая трапеция.

Вариант 10

Зеленая трапеция, голубой круг.

Задание на 8 баллов:

1. Создайте web-документ с названием «MyWeb-6_8»

2. В заголовке web-документа разместите ваши данные: группа, ФИ.

3. Задайте карту-изображение согласно варианту задания, вкладки которой являются ссылками на соответствующие практические работы. В подсказке для вкладок задайте описание практической работы.

Примечание: копирование и перемещение web-документов из практических работ недопустимо.

Вариант 1

Вариант 2

Вариант 3

Вариант 4

Вариант 5

Вариант 6

Вариант 7

Вариант 8

Вариант 9

Вариант 10

Задание на 10 баллов:

1. Создайте web-документ с названием «MyWeb-6_10»

2. В заголовке web-документа разместите ваши данные: группа, ФИ.

3. Сохраните рисунок «карта Беларуси». Задайте в web-документе рисунок «карта Беларуси» картой-изображением. Наведение курсора мыши на область (согласно варианту задания) выводит подсказку с размером площади этой области и количеством районов. Нажатие на область (согласно варианту задания) осуществляет переход на страницу с картой этой области, в которой выделены районы с городами с наибольшим количеством населения. Наведение курсора мыши на выделенный район выводит подсказку с названием этого района.

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

Вариант 1

Витебская область включает 21 район и 2 города областного подчинения (Витебск, Новополоцк), площадь - 40050 км².

Вариант 2

Могилевская область состоит из 21 района, площадь - 29079 км².

Вариант 3

Гомельская область включает 21 район, площадь - 40362 км².

Вариант 4

Брестская область состоит из 16 районов и включает 3 города областного подчинения (Брест, Барановичи, Пинск), площадь - 32791 км².

Вариант 5

Гродненская область включает 17 районов, площадь - 25118 км².

Вариант 6

Минская область подразделяется на 22 района и включает один город областного подчинения — Жодино, площадь - 39912 км².

Содержание отчёта:

1. номер работы;

2. название работы;

3. цель работы;

4. условие задачи;

5. программный код решенной задачи;

6. выводы о проделанной работе.

Контрольные вопросы:

1. Что такое карта-изображение?

2. С помощью каких тегов создается карта-изображение?

3. Какие значения может принимать атрибут shape?

4. Какое расширение должно иметь изображение для карты?

5. С помощью какого атрибута тега <IMG> осуществляется привязка карты к изображению?

Литература

Гончаров А. Самоучитель HTML - СПб.: Питер, 2002 - стр. 98-100;

Петюшкин А. В. HTML. Экспресс-курс. - СПб.: БХВ-Петербург, 2003. - стр. 108-129.