ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 13.06.2024
Просмотров: 14
Скачиваний: 0
Лабораторна робота № 8
Графіка на веб-сторінці
Мета роботи: отримати навики по розміщенню графіки на веб-сторінках, створенню карт зображень
ТЕОРЕТИЧНІ ВІДОМОСТІ
Графіка — це прикраса веб-вузла. Під графікою мають на увазі значки, малюнки, фотографії і карти зображень. При розміщенні графіки на веб-сторінках необхідно стежити за тим, щоб розмір графічних файлів був якомога менше.
Для вставки зображення в текстHTML-документа використовується елемент IMG. Для завдання цього HTML-елемента застосовується одинарний тег <IMG> Атрибути тега <IMG>:
o Src — задає URI зображення;
oAlt — альтернативний текст, який відображається на місці зображення, якщо по яких-небудь причинах само зображення не може бути показане;
o Border — задає товщину межі навколо малюнка в пікселах; o Align — визначає вирівнювання зображення;
o Height — задає висоту зображення в пікселах;
o Width — визначає ширину зображення в пікселах;
oVspace — задає величину вільного простору між зображенням і текстом зверху і знизу
o Hspace — визначає величину вільного простору між зображенням і текстом справа і зліва;
oName дозволяє ідентифікувати зображення так, що на нього можуть посилатися різні сценарії.
Обов'язковим атрибутом тега<IMG> є Scr. Атрибути height і Width використовуються для того, щоб браузер ще до завантаження зображення міг правильно розташувати його в тексті. Також ці атрибути можна застосовувати для примусової зміни (стиснення або збільшення) розміру зображення.
Вирівнювання зображень
За допомогою атрибуту ALIGN можна задати спосіб вирівнювання зображення на веб-сторінці. На мал. 1 перший малюнок вирівняно управо, другий — вліво (лістинг
1)
Лістінг1. Приклад вирівнювання зображень на веб-сторінці |
|
|
||||
<HTML> |
|
|
|
|
|
|
<HEAD><TITLE>PICTURE</TITLE></HEAD> |
|
|
|
|||
<BODY> |
|
|
|
|
|
|
<H1 align=center>Обтікання текстом об'єктів</H1> |
|
|
||||
<IMG SRC="016.jpg" width="200" height="230" align=right> |
|
|||||
<FONT size=5> |
Карти |
зображень |
дозволяють користувачеві |
|||
зв'язувати |
посилання |
на |
інші |
документи |
з |
ок |
частинами зображень.
1
Клацаючи мишею на частинах зображення, так званих активних
областях, користувач |
може |
виконувати |
ті |
або |
інші |
дії, |
||||
переходити до інших документів. |
|
представлення |
графіч |
|||||||
Тег |
<MAP>применяется |
для |
|
|||||||
зображення у вигляді карти з активними областями. активні |
||||||||||
області можна |
ідентифікувати |
по спливаючій підказці, яка |
||||||||
з'являється |
при |
наведенні |
на |
таку |
область |
покаж |
||||
миші.Контейнер, що складається |
з тегов <MAP> |
і |
</MAP>, є |
|||||||
блоком описувачів активних областей.</FONT> |
|
|
|
|||||||
<BR> |
|
|
|
|
|
|
|
|
|
|
<BR> |
|
|
|
|
|
|
|
|
|
|
<BR> |
|
|
|
|
|
|
|
|
|
|
<IMG SRC="017.jpg" width="200" height="230" align=left> |
|
|||||||||
<FONT |
size=5> |
Щоб |
включити |
підтримку |
карти |
зображення, |
||||
необхідно ввести атрибут USEMAP |
в тег IMG: |
|
|
|
||||||
IMG SCR="URL" USEMAP="URL#MAP_NAME" |
|
|
|
|
|
|||||
Даний атрибут указує, в якому місці знаходиться карта
зображення. |
Карта |
зображення |
визначає, якій |
ділянці |
зображення яка URL-адрес відповідає. Карта-зображення може |
||||
знаходитися |
в тому |
ж документі, що |
і зображення, |
або в |
іншому документі. |
|
|
|
|
</BODY> |
|
|
|
|
</HTML> |
|
|
|
|
Мал. 1. Приклад вирівнювання зображень на веб-сторінці
2
На малюнку 2 показаний приклад розміщення чотирьох зображень шириною 140 і висотою 154 пікселів кожне в таблиці (лістинг 2).
Лістинг 2. Приклад створення чотирьох малюнків в таблиці
<HTML>
<HEAD><TITLE>PICTURE</TITLE></HEAD> <BODY BGCOLOR=#A1633D>
<TABLE BORDER=0 CELLPADDING=1 CELLSPACING=0> <TR>
<TD>
<IMG SRC="012.jpg" WIDTH="160" HEIGHT="154"> </TD>
<TD>
<IMG SRC="013.jpg" WIDTH="160" HEIGHT="154"> </TD>
</TR>
<TR>
<TD>
<IMG SRC="014.jpg" WIDTH="160" HEIGHT="154"> </TD>
<TD>
<IMG SRC="017.jpg" WIDTH="160" HEIGHT="154"> </TD>
</TR>
</BODY></HTML>
Мал. 2. Чотири малюнки в таблиці
3
Масштабування зображень
На мал. 3 показана веб-сторінка (лістинг 3), що містить три зображення різного розміру, джерелом яких є один і той же файл. Файл має розміри154 піксели завширшки і 248 пікселів у висоту. Перше зображення збільшене в два рази, друге має реальний розмір, розміри третього зображення зменшені в два рази. Зображення знаходяться один від одного на відстань трьох нерозривних пропусків.
Якщо непродумано задати ширину і висоту зображення, воно спотвориться.
Лістинг 3. Приклад створення трьох зображень різного розміру з одного файлу
<HTML>
<HEAD>
<TITLE>size</TITLE>
</HEAD>
<BODY>
<IMG WIDTH=308 HEIGHT=496 SRC="BASKTBAL.JPG">
<IMG WIDTH=154 HEIGHT=248 SRC="BASKTBAL.JPG">
<IMG WIDTH=77 HEIGHT=124 SRC="BASKTBAL.JPG"> </BODY>
</HTML>
Мал. 3. Три зображення різного розміру з одного файлу
4
Карти зображень
Карти — це спосіб зробити різні частини одного графічного зображенн гіперпосиланнями. Вони дозволяють виділити окремі області зображень і визначити для кожної з них свою дію.
Щоб створити карту потрібно вставити в <IMGтег SRC=""> атрибут USEMAP="#name", де name - ім'я карти (значок # обов'язковий). У прикладі використовувалася назва Map_example.
Далі описуємо активні області карти. Починаємо відкриваючого тега<MAP NAME="name"> (тут повторюється ім,'я але вже без значка#), а закінчуємо замикаючим тегом </MAP>.
Між цими тегами поміщаємо опис кожної активної області зображення: <AREA
SHAPE="форма" COORDS="координати" HREF="адреса" TITLE="альтернативний текст">. Елемент <AREA> має наступні атрибути і їх значення:
Таблиця 1
Атрибути елементу <AREA>
Описує форму області, що виділяється, можливі значення: RECT - прямокутник
SHAPE
CIRCLE - круг
POLY - багатокутник
DEFAULT - визначає всю область, т.е весь малюнок може стати посиланням.
Координати, що визначають розміри і положення області на зображенні. Всі координати відлічуються в пікселях від лівого верхнього кута зображення. Кількість і порядок значень залежить від значення атрибута SHAPE:
COORDS
RECT: - лівий-X, верхній-Y, правий-X, нижній-Y (тобто спочатку координати лівого верхнього кута, потім правого нижнього) CIRCLE: - центр-X, центр-Y, радіус (тобто горизонтальна і вертикальна координати центру круга і радіус)
POLY: - X1, Y1, X2, Y2 ..., Xn, Yn (просто перераховуються координати всіх вершин багатокутника).
Визначає, що даній області не відповідає ніяке посилання. Де це NOHREF може стати в нагоді? Ну, наприклад, якщо ви хочете зробити
посилання не у вигляді круга, а у вигляді кільця
ALT
Альтернативний текст для виділеної області, використовується невізуальними браузерами.
TITLE
Назва виділеної області, виводиться у вигляді підказки, спливаючої при наведенні курсора на область малюнка.
TARGET
Значення цього атрибута ("_top", "_blank", "_self" або "_parent")
визначає, в якому вікні буде відкритий документ
5
