Практична робота 6 Тема: Фрейми. Карти зображень

Мета: 1. Навчитися створювати фрейми.
2. Навчитися управляти властивостями фреймів.
3. Навчитися створювати і застосовувати карти зображень для не прямокутних посилань.

Питання для повторення:

1. HTML-документи, які містять фрейми.

2. Фрейми, їх теги й атрибути.

3. Використання посилань у фреймах.

4. Недоліки використання фреймів.

Завдання:

Створити HTML-сторінку з наведеними структурними елементами.

Хід роботи:

1. Створити html-файл (lab6_frame.html), що складається з трьох фреймів (див. рис. справа). Для створення фрейму необхідно після розділу заголовка документа вказати структуру фреймів: два фрейми вертикальні, а у другому вертикальному – ще два горизонтальні фрейми:

<frameset cols="20, *">

<frame src="file.html">

<frameset rows="100, *">

<frame src="file.html">

<frame src="file.html">

</frameset>

</frameset>

2. Помістити файл у свою папку і дати кожному фрейму унікальне ім’я: left, head, foot, для чого використати значення атрибуту name для тегу <frame>.

3. Задати лівому фрейму фіксовану ширину в 234 пікселя із забороною змінювати ширину фрейму (атрибут noresize).

4. У лівий фрейм помістити файл меню (menu.html), який складатиметься із списку лабораторних робіт. Меню розмістити в таблиці, що складається з 3-х рядків (у кожен рядок фоном помістити рисунок fon.jpg, взятий із архіву до лабораторної роботи).

<table>

<tr>

<td background=fon.jpg width="210" height="24" align="center"><a href="Lab1.html">Лабораторна робота 1</a></td>

</tr>

<tr>

<td background=fon.jpg width="210" height="24" align="center"><a href="Lab2.html">Лабораторна робота 2</a></td>

…

…

<td background=fon.jpg width="210" height="24" align="center"><a href="Lab5_anketa.html">Лабораторна робота 5</a></td>

</tr>

</table>

5. Задати для кожної лабораторної роботи посилання на відповідний документ, який буде відкриватися в правому нижньому фреймі. Для відкриття посилання в іншому фреймі використати атрибут target тегу <a>, як значення атрибута target вказати ім’я фрейму, в якому необхідно відкрити файл.

<a href="Lab1.html" target="foot">Лабораторна робота 1</a>

6. У верхній фрейм помістити, як джерело, пошукову систему google.com.ua. Значення атрибута src для другого тегу <frame>:

<frame src="http://www.google.com.ua/" name="head">

7. Створити в своїй папці файл lab6_map.htm, який буде містити карту-зображень.

8. Помістити у файл map.htm зображення-карту з геометричними фігурами:

<img src="figure_1.png" border="0" usemap="#navigation">

9. Доповнити файл обробкою карти зображень:

<map name="navigation">

<area shape="circle" coords="72,93,40" href="krug.html" title="Коло ">

<area shape="rect" coords="129,129,268,194" href="pryam.html" title="Прямокутник ">

<area shape="poly" coords="168,108,221,15,279,108" href="triangle.html" title="Трикутник ">

</map>

10. Перевірити роботу карти-зображень. Звернути увагу на спливаючі підказки і посилання.

11. Створити в окремому файлі аналогічну карту-зображень для задання областей України. У карті-зображень виділити три області, на київську область призначити посилання на сайт http://meta.ua/, на дві інших області – посилання на сайт міської адміністрації. Щоб дізнатися координати точок зображення можна використати програму Paint).

12. Додати у лівий фрейм файлу lab6_frame.html, посилання на створену карту-зображень.

13. Показати виконану роботу викладачеві.

Контрольні запитання:

1. Для чого використовуються фрейми?

2. За що відповідає атрибут target тегу <a>?

3. Як вказати посиланню в якому фреймі треба відкритися?

4. У яких одиницях можна задати ширину або висоту фрейму?

5. Чи можна змінювати границі між фреймами?

6. Для чого використовуються карти-зображень?

7. Які форми фігур можуть використовуватися в картах-зображень?

8. Як можна підписати фігури карти-зображень?

9. Які види карт-зображень бувають?

10. Що може служити альтернативою використання карт-зображень?

Не нашли, что искали? Воспользуйтесь поиском: