Практическое занятие №6

Наименование: Создание интерактивных карт

1. Цель: Научится создавать ссылки из различных частей изображения. Формировать компетенции ОК 1, ОК 2, ОК 4, ОК 6, ОК 7, ОК 8; овладеть знаниями и умениями для освоения ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5

2. Подготовка к занятию: по предложенной литературе повторить тему «Ссылки на веб – страницах», «Вставка объектов на веб – страницу» и ответить на следующие вопросы:

2.1 Как просмотреть координаты заданной точки?

2.2 Какие формы точек перехода с карты можно организовать?

3. Литература:

3.1 Шомас Е.А. Веб – дизайн, учебное пособие. Самара, КС ПГУТИ, 2014

3.2 https://html5book.ru/osnovy-html/ - Основы HTML

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

4.4 Графический редактор Paint

5. Задание:

5.1 В строке заголовка должен отражаться номер практической работы

5.2 В теле документа создайте заголовок первого уровня, где укажите наименование работы. Заголовком второго уровня – цель работы.

5.3 Поместите по центру документа карту Самарской области (найти соответствующий рисунок в сети Интернет). Можно выбрать любую другую карту.

5.4 На карте сделайте ссылки из определенного населенного пункта на отдельный документ, где содержится текст о данном населенном пункте и рисунок (сведения и рисунки найти в сети Интернет). Для зачета необходимо предоставить сведения не менее чем о пяти населенных пунктах.

6. Порядок выполнения работы:

6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;

6.2 Выполнить задание практического занятия;

6.3 Дать ответы на контрольные вопросы;

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

7.1 Наименование и цель работы

7.2 Код программы

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

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

8.1 Как организовываются ссылки из карты - изображения?

8.2 Как поменять размеры изображения?

ПРИЛОЖЕНИЕ:

Чтобы разбить картинку на несколько "горячих" областей, лучше использовать специальные программы, которые рассчитывают координаты таких областей по щелчкам мыши. Итак, для начала, нужно поместить изображение в HTML-документе обычным способом

Затем, добавить атрибут картирования:
USEMAP="#....."
где: вместо точек, пишется имя карты:

Далее, пишется код самой карты изображения с координатами всех "горячих" областей. Карта определяется тегами:
<MAP NAME="...."> и </MAP>

Код координат областей имеет вид:
<AREA SHAPE="RECT" COORDS="..,.. " HREF="URL">
Код координат вписывается между тегами карты.
Форма "горячих" областей определятся содержимым атрибута SHAPE="..."

SHAPE="CIRCLE" – сферическая форма.

Примерный код:

SHAPE="RECT" – прямоугольная форма.

Примерный код:

Практическое занятие №7

Наименование: Создание простых и сложных таблиц на веб – страницах

1. Цель: Научится создавать различные виды таблиц, применять к ним свойства. Формировать компетенции ОК 1, ОК 2, ОК 4, ОК 8; овладеть знаниями и умениями для освоения ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5

2. Подготовка к занятию: по предложенной литературе повторить тему «Создание таблиц средствами HTML» и ответить на следующие вопросы:

2.1 Перечислите основные теги создания таблиц в HTML – документе

2.2 С помощью какого тега можно подписать таблицу?

2.3 Какой атрибут отвечает за объединение ячеек в таблицу по горизонтали (вертикали)?