КАТЕГОРИИ:
Архитектура-(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)
Графика
|
|
|
|
Чтобы добавить графический объект в текст Web-страницы, используйте дескриптор <IMG SRC= 'имя файла' >.
Границы вокруг рисунка создаются с помощью атрибута BORDER
<IMG BORDER=10 SRC="images/1.JPG">
Размер рисунка на Web-странице устанавливается с помощью атрибутов WIDTH и HEIGHT
¨ Для выравнивания рисунка относительно текста документа атрибуту ALIGN присваиваются следующие значения:
▪ left — рисунок выравнивается влево, свободное пространство справа от рисунка заполняется текстом;
▪ right — рисунок выравнивается вправо, свободное пространство слева от рисунка заполняется текстом.
¨ Для выравнивания текста абзаца, в который добавлен рисунок, атрибуту ALIGN присваиваются следующие значения:
▪ top — текст выравнивается по верхнему краю рисунка;
▪ middle — текст выравнивается по средней линии рисунка;
▪ bottom — текст выравнивается по нижнему краю рисунка.
Рисунки можно использовать в качестве фона Web-страницы. Фон Web-страницы устанавливается в дескрипторе <body>: <body background='?'>
Чтобы зафиксировать фон, установите атрибут BGPROPERTIES:
<BODY BACKGROUND='images/logo.gif' BGPROPERTIES='fixed'>
Для автоматического определения координат наберите следующий ниже код.
Код:
<a href="#">
<img ismap="ismap" src="../images/casino.jpg" width="300" height="200">
</a>
Для обозначения прямоугольника используется значение rect ( shape="rect" )
Закончили с красными фишками – переходим к зеленой.
Определяем центр окружности и радиус: х- 275, у-147, r-18
Для обозначения окружности используется значение circle ( shape="circle" )
Для обозначения многоугольников используется значение poly ( shape= “ poly” )
Листинг1:
<html>
<head>
<title>Навигационная карта в HTML</title>
|
|
|
</head>
<body>
<img src="../images/casino.jpg" width="300" height="200" usemap="#fishki" border="0" hspace="27" />
<map id="fishki" name="fishki">
<area shape="rect" coords="192,90,230,140" alt="Красные фишки" title="Красные фишки" href="#" />
<area shape="circle" coords="275,147,18" alt="Зеленая фишка" title="Зеленая фишка" href="#" />
</map>
</body>
</html>
Гиперссылки
Гиперссылки создаются с помощью дескриптора <А>, как в следующем примере:
<А HREF=' адрес' >гиперссылка</А>
По умолчанию гиперссылка открывает документ в текущем окне обозревателя. Таким образом, один щелчок на гиперссылке, ведущей на документ в Интернет, — и посетитель покинул ваш узел. Чтобы этого не произошло, настройте работу гиперссылки с помощью атрибута TARGET. В значениях этого атрибута указывается целевое окно обозревателя, в котором будет открыт документ по гиперссылке:
► '_blank' — в новом окне обозревателя;
► '_self ' — в текущей рамке;
► '_parent' — в рамке предыдущего уровня, если используется набор вложенных рамок;
► ' _top' — в текущем окне обозревателя (по умолчанию);
► ' имя_рамки' — в рамке с указанным именем.
По умолчанию текст гиперссылки выделен на Web-странице подчеркиванием и синим цветом шрифта, или фиолетовым цветом, если документ по гиперссылке уже посещался пользователем. При наведении указателя мыши на гиперссылку цвет шрифта становится красным.
Эти три цвета — новой, посещенной и активной гиперссылок — устанавливаются для всей страницы соответственно в атрибутах link, vlink и alink дескриптора <BODY>. Цвет гиперссылки можно переустановить, присвоив этим атрибутам значения альтернативного цвета.
Пример переустановки цвета гиперссылок Web-страницы:
<body link='white' alink='green' vlink='yellow' >
1. Подберите или создайте необходимый рисунок.
2. Добавьте рисунок на Web-страницу с помощью дескриптора <IMG>.
3. В любом месте HTML-кода страницы в разделе <BODY> создайте элемент разметки страницы с уникальным именем: <МАР NAME=' имя_разметчика' >...< /МАР>.
|
|
|
4. В дескрипторе < IMG> рисунка присвойте атрибуту USEMAP имя элемента разметки. (Имя элемента разметки следует после символа #.)
5. Между открывающим и закрывающим дескрипторами элемента разметки рисунка добавьте области с помощью дескрипторов <AREA> и установите следующие атрибуты областей:
o shape — стандартные значения формы областей rect (прямоугольник), circle (окружность), polygon (многоугольник) и default (незанятая часть рисунка);
o coords — пары координат х и у в пикселях для верхней левой и нижней правой точек прямоугольника, всех точек многоугольника и центральной точки с радиусом окружности;
o href — URL-адрес гиперссылки;
o title — текст экранной подсказки.
Чтобы обратиться к разделу документа, его нужно маркировать с помощью закладки. Закладка в тексте, так же, как и гиперссылка, создается с помощью дескриптора <А>. Отличие состоит в том, что в дескрипторе не устанавливается атрибут href, но зато устанавливается атрибут NAME, значение которого соответствует имени закладки. Например:
<А NAME='chapterl'> текст раздела </А>
Закладкой выделяется текст, заключенный между дескрипторами <А>...</А>. Закладке присвоено имя chapter1.
После этого можно создать в документе гиперссылку, нацеленную на данную закладку:
< A HREF='#chapter1'> текст гиперссылки< / А>
o
Таблицы
Таблица создается с помощью пары дескрипторов <table>...</TABLE>
► <tr>...</tr> — новая строка таблицы;
► <th>...</th> — ячейка заголовка;
► <td>...</td> — обычная ячейка таблицы.
Поэтому для создания заголовков лучше использовать дескриптор <CAPTION>, который создает заголовок непосредственно в таблице.
<CAPTION>Корреляционная таблица</CAPTION>
¨ CELLSPACING — устанавливает расстояние между ячейками (по умолчанию 2 пикселя);
¨ CELLPADDING — устанавливает отступ текста от края ячейки (по умолчанию 1 пиксель).
Для установки цвета ячейки таблицы применяется атрибут bgcolor
Фоновый рисунок устанавливается в атрибуте BACKGROUND
размеры ячеек устанавливаются с помощью атрибутов WIDTH и HEIGHT и две ячейки в первом столбце объединяются с помощью атрибута ROWSPAN.
|
|
|
Чтобы изменить цвет, воспользуйтесь атрибутом BORDERCOLOR.
¨ FRAME — устанавливает показ внешних границ таблицы:
• void — нет внешних границ;
• above — граница но верхнему краю таблицы;
• below — граница по нижнему краю таблицы;
• rhs — граница по правому краю таблицы;
• Lhs — граница по левому краю таблицы;
• hsides — границы но верхнему и нижнему краям таблицы;
• vsides — границы по левому и правому краям таблицы;
• border — все границы (задано по умолчанию).
¨ rules — устанавливает показ внутренних границ таблицы:
• none — нет внутренних границ;
• cols — границы между столбцами;
• rows — границы между строками;
• groups — границы между группами столбцов и строк;
• all — все внутренние границы (задано по умолчанию).
Атрибуты FRAME и RULES устанавливаются в дескрипторе <TABLE>.
¨ <COLGROUP> — структурная группа столбцов, применяется для разбивки таблицы на столбцы разных типов, например: столбец заголовков и столбцы данных;
¨ <COL> — неструктурная группа столбцов, применяется для произвольного группирования столбцов таблицы, имеющих общий формат данных.
¨ <THEAD> — создает группу строк заголовков, этот дескриптор можно использовать в коде таблицы только один раз;
¨ <TBODY> — используется для создания одной или нескольких групп строк;
¨ <TFOOT> — создает группу строк нижнего колонтитула таблицы, этот дескриптор можно использовать в коде таблицы только один раз.
|
|
|
|
|
Дата добавления: 2015-06-27; Просмотров: 382; Нарушение авторских прав?; Мы поможем в написании вашей работы!