КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Листинг 5.1. Файл chap5\local. htm
|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<ТIТLЕ>Локальні посилання в документі HTML</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<P><A НRЕF="lосаl.htm#tаЬ1_1">Таблиця з подвійним заголовком</А>
<Р><А НRЕF="lосаl.htm#tab1_2">Таблиця з подвійним заголовком і підписом</А>
<Н2><А NАМЕ="tаЬ1_1">Таблиця з подвійним заголовком</А></Н2>
<TABLE BORDER WIDTH=100%>
<CAPTION VALIGN=TOP ALIGN=RIGHT>Ta6л. 1.1. Таблиця з подвійним заголовком</ САРТION>
<TR><TH COLSPAN=3>3aгoлoвок для всіх стовпчиків</ТН></ТR>
<TR><TH COLSPAN=2>Cтoлбцы 1 і 2</ТН><ТН>Стовпчик 3</TH></TR> <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>
<TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>
<TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
</TABLE>
<H2><A NAME="tab1 2">Таблиця з подвійним заголовком і підписом</А></Н2>
<TABLE BORDER WIDTH=100%>
<CAPTION ALIGN=BOTTOM>Ta6л. 1.2. Таблиця з подвійним заголовком</CAPTION>
<TR><TH COLSPAN=3>3aгoлoвок для всіх стовпчиків</ТН></ТR>
<TR><TH COLSPAN=2>Cтoлбцы 1 і 2</ТН><ТН>Стовпчик 3</TH></TR>
<TR><TD>000</TD><TD>OO1</TD><TD>002</TD></TR>
<TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>
<TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
</TABLE>
</BODY>
</HTML>
5.3. Використання графіки в посиланнях
Посилання у виді текстових рядків зручні, тому що після провідин відповідних сторінок вони змінюють свій цвіт. Проте більш привабливо виглядають посилання, оформлені з використанням графічних зображень. Для виконання такого оформлення є дві можливості. По-перше, можна вставити між операторами <А> і </А> графічне зображення невеличкого розміру. При цьому воно буде використана як дошкульна область. Якщо зробити щиголь лівою клавішею миші по цій області, відбудеться завантаження об'єкта, зазначеного в посиланні.
|
|
|
По-друге, для організації посилань можна застосувати так називані сегментированные графічні зображення (image maps). Такі зображення розділяються на декілька дошкульних областей, із кожній із який за допомогою окремого текстового файла зв'язується те або інше посилання.
Роздивимося обидві ці можливості.
5.3.1. Вставка графічного зображення в посилання
Зображення вставляется між операторами <А> і </А> за допомогою оператора <IMG>, наприклад:
<А HREF="http://www.dials.ccas.ru/frolov/home.htm">
<IMGSRC="httppage.gif"BORDER=O>
</A>
Тут на місці посилання в документі з'являється графічне зображення, записане у файлі homepage. gif. Якщо зробити щиголь лівою клавішею миші по цьому зображенню, у вікно навігатора буде завантажений документ, що має адресу http://www.dials.ccas.ru/frolov/home.htm. Звернете також увага на те, що прибрана рамка навколо графічного зображення, указавши значення параметра BORDER, рівне нулю.
Графічні зображення можна розмістити в осередках таблиці. Можна розташувати в такому осередку і посилання, виконаний із використанням графіки. От, наприклад, як оформлена на сервері WWW посилання на архів вихідних текстів до 14-му тому серії книг "Бібліотека системного програміста":
<HTML>
<BODY BGCOLOR="#FFFFFF">
<Н2>Графічний інтерфейс GDI у Microsoft Windows</H2>
<P><ADDRESS>© Олександр Фролов, Григорій Фролов<ВR>Тому 14, М.: Диалог-МИФИ, 1994, 288 CTp.</ADDRESS><HR>
<TABLE>
<TR><TD>
<P><A HREF="http://www.dials.ccas.ru/frolov/bin/dbsp14.lzh"><IMGSRC="disk.aif"BORDER=0></A>
<BR></TD>
<ТD>Дискета з вихідними текстами програм, 208 Кбайт</ТD>
</TABLE>
</BODY>
</HTML>
У файлі disk. gif, як неважко догадатися, знаходиться зображення дискети. Зробивши щиголь по цьому зображенню, можна завантажити до себе архів вихідних текстів.
|
|
|
5.3.2. Сегментированная графіка
Для того щоб зробити сегментированное графічне зображення, не потребуваються спеціальні графічні редактори. Можливо скористатися будь-яким редактором, спроможним зберігати зображення у форматі GIF.
Намалювавши зображення, варто визначити координати дошкульних областей, що будуть використані для посилань (у пикселах). Кожне зображення може містити довільну кількість дошкульних областей.
Тепер потрібно підготувати опис цих областей (карту областей), скориставшись для цього операторами <МАР> і </МАР>.
Оператор <МАР> має один параметр - ім'я карти дошкульних областей сегментированного графічного зображення. Між операторами <МАР> і </МАР> розташовуються оператори <AREA>, параметри яких описують окремі дошкульні області:
<МАР NAME="image_map">
<AREA...>
<AREA... >
</МАР>
 |
Нехай, наприклад, підготовлене графічне зображення, показане на мал. 5.1.
Мал. 5.1. Графічне зображення з трьома дошкульними областями buttons. gif
На цьому зображенні є 3 області у виді прямокутників із координатами, кожний із який має свій цвіт. Карта, що описує ці області, має такий вид:
<МАР NAME="buttons">
<AREA SHAPE="RECT" COORDS="10,10,30,20" HREF="blue.htm">
<AREA SHAPE="RECT" COORDS="10,30,30,40" HREF="yellow.htm">
<AREA SHAPE="RECT" COORDS="40,10,60,40" HREF="red. htm">
</MAP>
Параметр NAME оператора <МАР> має значення buttons. Ця назва карти дошкульних областей, що буде використано при вставці сегментированного графічного зображення в документ HTML. Оператор <AREA> має три параметри: SHAPE, COORDS і HREF. Параметр SHAPE задає форму дошкульної області. Для цього параметра можна вказувати такі значення:
| Значення параметра SHAPE | Форма дошкульної області |
| RECT | Прямокутна область. Параметр COORDS задає координати верхніх лівих і правих нижнього рогів області |
| CIRC | Окружність. Через параметр COORDS передається 3 значення: координата центру окружності по осі X, координата центру окружності по осі Y і радіус окружності |
| POLY | Багатокутник. Параметр COORDS задає координати вершин багатокутника у виді пар значень |
Параметр HREF оператора MAP задає адреса URL об'єкта, що повинний бути завантажений, коли користувач робить щиголь лівою клавішею миші по дошкульній області.
|
|
|
Додатково за допомогою параметра NOHREF можна зазначити області, нечувствительные до щиголів миші.
Після того як створена карта дошкульних областей, можна вставляти сегментированное зображення в документ HTML. Ця процедура виконується за допомогою оператора <IMG>, для котрого додатково вказується параметр USEMAP:
<IMG SRC="buttons. gif" BORDER=0 USEMAP="#buttons">
У параметрі USEMAP вказується ім'я карти дошкульних областей. Якщо ця карта розташовується в тому ж файлі, у якому знаходиться і посилання на сегментированное зображення, ім'я карти записується в параметрі USEMAP після символу #. Якщо ж карта знаходиться в окремому файлі (що припустимо), перед символом # необхідно зазначити ім'я файла, що містить карту:
<IMG SRC="biittons. gif" BORDER=0 USEMAP="map. htm#buttons">
У деяких випадках зручніше розміщати карту саме в окремому файлі, щоб при редагуванні сегментированного зображення і відповідної карти не торкати документа, у котрий це зображення вставлено.
У листинге 5.2 приведений вихідний текст документа HTML, у якому використовується сегментированная графіка.
|
|
|
|
|
Дата добавления: 2014-11-29; Просмотров: 394; Нарушение авторских прав?; Мы поможем в написании вашей работы!