Часть III. Создание меню с помощью карт-изображений

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

2. С помощью графического редактора Pain создать рисунок размером 10х10 см или 300х300 точек (пикселей), состоящий из 3-х фигур (рис 7.3).

Рис. 7.3

3. Сохранить рисунок в файлах различного формата с соответствующими именами:

bmp- 24-разрядный fig_1_24.bmp, bmp – 16-цветный fig_1_16.bmp, jpg – под именем fig_13.jpg и gif - под именем fig_14.gif.

Проанализировать, какой объем занимает каждый файл и какое при этом обеспечивается качество изображения. Выбрать для дальнейшей работы файл с наименьшим объемом и приемлемым качеством, переименовать его в fig_1.

4. Определить координаты активных зон для дальнейшего использования в карте-изображения. Для этого можно использовать графический редактор.

   1. Открыть файл fig_1 в графическом редакторе и уточнить координаты областей рисунка- последовательно выделяя предполагаемые активные зоны, прочитать в строке состояния координаты нужных точек (рис. 7.3) и записать их для дальнейшего использования.

5. Создать HTML документ – map_1.html, содержащий заголовок:

Психологические портреты

Укажите на рисунке, какая фигура Вам больше всего нравится.

Далее разместить рисунок и фрагменты текста, поясняющие какие черты характера символизируют соответствующие фигуры. Каждый фрагмент должен начинаться названием фигуры и занимать не менее половины страницы. Названия оформить шрифтом с выделением.

6. Модифицировать документ так, чтобы рисунок служил картой-изображением. Теги для определения карты и активных зон приведены в приложении.

   1. Ввести теги закладок перед заголовками – названиями фигур.

   2. Ввести теги определения карты.

   3. Проверить работоспособность активных зон.

   4. Обеспечить средства для возврата в начало документа.

7. Создать файл с картой-изображением, обеспечивающей переходы на другие документы.

   Рис. 7.4

   Нарисовать рисунок (подготовить фотографию), с изображением нескольких персон, например, Ваша компания или Ваша семья (рис. 7.4). Размер рисунка не должен превышать 10х10 см, объем файла - не более 15кБ. Дать название файлу company.gif и сохранить в подготовленной папке. Определить координаты областей – активных зон для гиперссылок с помощью графического редактора.

   1. Подготовить HTML-документы для описания каждой персоны. Разместить их в рабочей папке, дать названия persona_1.html, persona_2.html и persona_3.html. В конце каждого документа обеспечить средство возврата в главный документ.

8. Подготовить главный документ – my_company.html, который должен содержать заголовок, краткий текст о представляемой компании, рисунок и подпись. Для создания эффекта обтекания рисунка рекомендуется использовать таблицу.

9. Убедиться в правильности переходов, предъявить результат преподавателю.