Створення зображень-карт на Web -сторінці

⇐ ПредыдущаяСтр 5 из 5

Зображення-карти роблять сторінку наочною, зрозумілою, інформативною і красивою. Суть зображення-карти в тому, що як гіперпосилання використовується частина великого графічного зображення (малюнка або фотографії). Принцип роботи гіперпосилання звичайний (перехід здійснюється клацанням миші), але зображення необхідно підготувати й описати в сторінці. Є спеціальні програми для підготовки й опису зображень-карт (MapThis) — робота полягає в заданні координат активних областей зображення. Одиницею вимірювання є піксель. Задати координати активним областям зображення можна, використовуючи графічний редактор Paint. Опис карти, зазвичай, розташовують відразу після тега <IMG>, що описує зображення.

<IMG src="URL" usemap="#Ha3Ba"> — розміщення на сторінці зображення, "#назва" — якір для тегів, що описують карту;

<МАР пате="назва">. </МАР> — розділ опису карти;

<AREA shape=rect cords="10, 10, 100,100"

href="URL"> — опис активної області зображення;

shape=rect — форма зображення (значення: rect

— прямокутник, circle — коло, poly — багатокутник, default — неописані частини зображення);

coords — координати фігури (для rect лівого-вер-хнього і правого-нижнього кутів, для circle координати центру і радіус, для poly координати всіх кутів

— перший кут описується і в кінці); href="URL" — посилання вказує на документ,

задається стандартним чином, див. пр. роботу №23; alt="Підпис до фрагмента-посилання" — виводиться на екран у випадку наведення на картинку покажчика миші.

Порядок виконання роботи

1. Підготуйте фотографію класу для використання як карти — за допомогою редактора Paint опишіть координати меж зображення своїх друзів на фотографії. Відкрийте сторінку «Перший досвід» для редагування HTML-коду.

2. У розділі «Про себе» розташуйте фотографію класу й опишіть її як зображення-карту. Для посилань використовуйте зображення своїх друзів.

3. У значенні атрибуту title вкажіть імена друзів.

4. Перевірте роботу карти на сторінці.

ПРАКТИЧНА РОБОТА №1 1

Мета роботи: Отримати практичні навички організації навігації по сайту за допомогою фреймів.

Прості сайти. Навігація по сайту з використанням фреймів

Сайт — це сторінки, об'єднані однією тематикою й оформлені в однаковому стилі, і що належать одній особі або компанії. Навігація на сайті організована за допомогою гіперпосилань. Структура сайту (зв'язки між сторінками) може бути різною. Найбільшою популярністю користуються сайти організовані з використанням фреймів. Фрейми — це області, що створюються у вікні браузера для одночасного перегляду декількох документів. Фрейми підвищують інформативність, наочність, зрозумілість сайту, полегшують навігацію по сайту, позбавляють від прокручування сторінки.

Для створення сайту з фреймами розробляється структура сайту (layout) і зміст інформаційних сторінок (content). Інформаційні сторінки мають традиційну структуру HTML-документа.

Опис структури сайту має наступний вигляд:

<HTML>

<FRAMESET ...> — опис зовнішнього вигляду вікна браузера (способу розбиття на окремі області) має атрибути:

cols ="50%, 50% " — вертикальне ділення на дві рівні області;

rows="150, 30% ,*" — горизонтальне ділення на З області, перша — 150 пікселів, друга — 30% екрану, третя — все, що залишилося;

frameborder=l — об'ємна рамка між областями;

framespacing= n. — ширина рамки між областями в пікселях.

<FRAME namе="ім'я фрейма" src="URL"> — опис першої області (фрейма), непарний тег, має атрибути:

namе="ім'я фрейма" — локальне (індивідуальне) ім'я області, використовується браузером під час переходів по сторінках;

src="URL" — адреса сторінки, що відкривається в області за замовчуванням;

noresize — не має значення, забороняє змінювати межі завантажених фреймів;

scrolling="..." — управляє прокручуванням усередині області [значення: Yes — смуги показуються обов'язково; No — прокручування заборонено (використовується в банерах); Auto — смуги прокручування показуються у разі необхідності (значення за замовчуванням)];

longdesc="URL" — адреса файла з описом фрейма (використовується замість title при описах великого об'єму);

frameborder= n — задає рамку навколо фрейма [значення: 1 — створити рамку; 0 — рамку не створювати];

marginheight= n — величина відступу сторінки від верхнього і нижнього країв фрейма в пікселях;

marginwidth= n — величина відступу сторінки від лівого і правого країв фрейма в пікселях;

<NOFRAMES>...</NOFRAMES> — розділ виводиться на екран браузерами, що не підтримують фрейми.

</FRAMESET>

</HTML>

Приклади опису областей:

Фрейм 1 Фрейм 2

Фрейм 1 Фрейм 2

Атрибути гіперпосилань доповнюються новою властивістю:

<А target="фрейм 1" .> — визначає властивість посилання [значення: "фрейм 1" — локальне ім'я області (фрейма), у якій буде відкрито документ, на який указує гіперпосилання; _parent (або _top) — посилання вказує на сторінку без фреймів; _self — документ, на який указує посилання, відкриється усередині поточної області; _blank — документ, на який указує посилання, відкриється в новому вікні].

<IFRAME „>_</IFRAME> — плаваючий фрейм (область із смугами прокручування) для перегляду на сторінці іншого документа в окремому вікні, окрім стандартних атрибутів (name, src, scrolling, longdesc, frameborder, marginheight, marginwidth, target) додатково має:

width= n — ширина вікна в пікселах (за замовчуванням 300);

height= n — висота вікна в пікселях (за замовчуванням 150);

Порядок виконання роботи

1. В окремій паппі «Мій сайт» підготуйте файли для сайту.

Файл home.htm

<TITLE> Головна сторінка </TITLE> <HEAD> <BODY>

<!—В основну частину сторінки скопіюйте фрагмент вітання із сторінки "Перший досвід" — > <А href="index.htm">'no4ani перегляд"</А> </BODY> </HTML>

Файл index.htm

<HTML>

<HEAD>

<TITLE> Структура сторінки </TITLE>

</HEAD>

<FRAMESET frameborder=l framespacing=5

cols="20%,80%"> <FRAME name="menu" NORESIZE

src="menu.htm">

</HTML>

Файл menu.htm

<HTML>

<HEAD>

<TITLE> Лівий фрейм — меню </TITLE>

<HEAD>

<BODY>

<A target=_parent href="home.htm"> Головна

сторінка </А> <A target="texts" href="framesl.htm">

Біографія</А> <A target="texts" href="frames2.htm">

Захоплення</А> <A target="texts" href="frames3.htm">

Досягнення</А>

<!—Якщо на вашій сторінці "Перший досвід" є інші розділи, підготуйте посилання і для них—> </BODY> </HTML>

Файл framesl .htm

<HTML>

<HEAD>

<TITLE> Правий фрейм — Біографія

</TITLE>

<HEAD>

<BODY>

<!—В основну частину сторінки скопіюйте фрагмент Біографія із сторінки "Перший досвід"—>

</BODY>

</HTML>

Файл frames2.htm

<HTML>

<HEAD>

<ТПХЕ>Правий фрейм — Захоплення

</TITLE>

<HEAD>

<BODY>

<!—В основну частину сторінки скопіюйте фрагмент Захоплення із сторінки "Перший досвід"—>

</BODY>

</HTML>

Файл frames3.htm

<HTML>

<HEAD>

<ТІТЬЕ>Правий фрейм — Досягнення

</TITLE>

<HEAD>

<BODY>

<!—В основну частину сторінки скопіюйте фрагмент Досягнення із сторінки "Перший досвід"—>

</BODY>

</HTML>

2. Доповніть створені файли відповідними фрагментами зі сторінки «Перший досвід». Доповніть заголовки файлів МЕТА визначеннями і стилями сторінки «Перший досвід».

3. Перевірте роботу гіперпосилань на сайті.

Дата добавления: 2020-04-25; просмотров: 76; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 1 2 3 45

Мы поможем в написании ваших работ!