Создание бегущей строки
Для того чтобы создать бегущую строку, надо воспользоваться дескриптором <MARQUEE>.
Управлять движением позволяет атрибут BEHAVIOR.
Значение scroll - заставляет строку появляться с одной стороны экрана и исчезать за противоположной стороной.
Значение slide - строка появляется из-за одной стороны экрана и останавливается у другой.
Значение alternate - заставляет строку бегать взад-вперед.
Атрибут DIRECTION задает направление перемещения строки.
Атрибут LOOP - определяет количество циклов перемещения.
Атрибут BGCOLOR - позволяет изменять цвет фона бегущей строки.
Атрибут SCROLLAMOUNT - служит для задания шага перемещения строки в экранных пикселях.
SCROLLDELAY - служит для указания времени задержки в миллисекундах между отдельными тактами перемещения строки.
Ниже приведены примеры бегущих строк. Следует сказать, что дескриптор <MARQUEE> до последнего времени поддерживался только Microsoft IE.
Пример:
HTML-код:
<marquee behavior="scroll" direction="left">Бегущая строка 1</marquee> <marquee behavior="alternate" direction="right" loop="30" scrollamount="10">Бегущая строка 2</marquee> <marquee behavior="scroll" direction="left" scrolldelay="500" bgcolor="#00ff00">Бегущая строка 3</marquee> |
|
Размещение текста поверх изображения
Если возникает задача размещения изображения поверх текста, то в этом вам поможет, уже изученная, обыкновенная таблица.
Надо создать таблицу, состоящую из одной строки и одного столбца. Чтобы удалить обрамление и свободные участки между ячейкой и границей таблицы, надо атрибутам BORDER CELLPADDING CELLSPACING присвоить нулевые значения. Атрибутами WIDTH HEIGHT надо "подогнать" размеры таблицы под размер изображения.
Вот и все. Пример смотрите ниже.
Пример:
HTML-код:
<table border="0" cellpadding="0" cellspacing="0" background="img/tigr.jpg" height="41" width="50"><tr><td> Это тигр </td></tr></table> |
Отображение в браузере:
|
Создание всплывающих подсказок
Для создания всплывающих подсказок служит атрибут TITLE. Этот атрибут можно применять в контексте многих тэгов. Например, если применить этот атрибут в теле дескриптора гиперссылки <A>, то при наведении курсора на данную гиперссылку, пользователю будет показан текст, набранный в атрибуте TITLE.
Если в графическом изображении был использован атрибут ALT, то пользоваться TITLE вовсе не обязательно, т.к. в этом случае пользователю показывается данные атрибута ALT.
Создание водяного знака
Водяной знак - это фоновое изображение, которое остается в окне браузера в постоянном положении в то время, когда пользователь пролистывает содержимое Вэб-страницы.
Для создания водяного знака надо в теле тэга <BODY> для определения графического фона, использовать атрибут BACKGROUND. Для предотвращения перемещения фона надо атрибуту BGPROPERTIES присвоить значение fixed.
В качестве фона можно использовать как небольшое изображение, которое будет автоматически размножено браузером, так и крупноформатный рисунок, который заполнит все пространство окна целиком. В любом случае надо помнить о времени загрузки страницы.
Эффект постепенной прорисовки
Microsoft IE позволяет сделать эффект постепенной прорисовки страницы при ее открытии или закрытии. Для этого используется дескриптор <META>. Чтобы эффект появлялся в момент открытия страницы, надо указать тип прорисовки Page-Enter, перед закрытием страницы - Page-Exit. Каждому виду прорисовки соответствует определенный номер (от 0 до 23). Определяя параметры прорисовки необходимо указывать временной интервал продолжительности процесса прорисовки.
Например:
<meta http-equiv="Page-Enter"
content="RevealTrans (Duration=5, Transition=2)">
Ниже в таблице представлены названия и номера всех возможных вариантов прорисовки. Щелкнув на соответствующей строке, можно посмотреть прорисовку в действии.
0 Box in
1 Box out
2 Circle in
3 Circle out
4 Wipe up
5 Wipe down
6 Wipe right
7 Wipe left
8 Vertical blinds
9 Horizontal blinds
10 Checkboard across
11 Checkboard down
12 Random Dissolve
13 Split vertical in
14 Split vertical out
15 Split horizontal in
16 Split horizontal out
17 Strips left down
18 Strips left up
19 Strips right down
20 Strips right up
21 Random bars horizontal
22 Random bars vertical
23 Random transition
Карта ссылок
Карта ссылок - это изображение, разбитое на определенные зоны, каждая из которых представляет собой гиперссылку. После щелчка кнопкой мыши в пределах зоны браузер открывает страницу, отвечающую этой зоне.
Для удобства выбора зоны изображение должно состоять, по возможности, из четко разграниченных областей.
Прежде чем создавать карту ссылок, надо в графическом редакторе определить координаты крайних точек зон. Зоны могут быть трех типов.
Прямоугольная зона (rect). В этом случае задаются координаты двух точек - левого верхнего угла, правого нижнего угла.
Многоугольник (poly). В этом случае задаются координаты каждой точки многоугольника.
Круг (circle). В этом случае задается координата центра круга и его радиус.
Для создания карты ссылок необходимо вставить нужное изображение с помощью дескриптора <IMG>, затем, при помощи атрибута USEMAP, присвоить ему имя. После этого можно приступить непосредственно к вводу данных при помощи тэга <MAP>.
Дескриптор <AREA> определяет зоны изображения карты ссылок.
Атрибут SHAPE описывает форму зоны карты ссылок.
Атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон (прямоугольник, круг, многоугольник).
Если при вводе координат произошла ошибка, то браузер воспринимает область пересечения как часть той зоны, которая описана первой. Если же введенные координаты выходят за границы изображения, то они игнорируются браузером.
Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.
Ниже представлена простая карта ссылок с исходным кодом. Изображение условно разбито на четыре прямоугольных области.
<center>
<img src="img/map.jpg" width="132" height="121"
border="0" usemap="#australia">
</center>
<map name="australia">
<area shape="rect" coords="0,0,68,60"
href="lsn022_1.html" target="_blank"
alt="Северо-восточная часть Австралии">
<area shape="rect" coords="68,0,132,60"
href="lsn022_2.html" target="_blank"
alt="Северо-западная часть Австралии">
<area shape="rect" coords="0,60,68,120"
href="lsn022_3.html" target="_blank"
alt="Юго-восточная часть Австралии">
<area shape="rect" coords="68,60,132,120"
href="lsn022_4.html" target="_blank"
alt="Юго-западная часть Австралии">
</map>
Внутренний лист стилей
Лист стилей (CSS - Cascading Style Sheets) - позволяет сосредоточить описания признаков форматирования Вэб-страниц в одном месте и дает возможность избежать необходимости их повторного ввода в дескрипторах.
Внутренний лист стилей размещается в промежутках между дескрипторами <HEAD> </HEAD> отдельной Вэб-страницы и начинается с объявления тэга <STYLE>. При создании листа стилей надо указать наименование дескриптора, свойства которого надо будет определить, а затем перечислить значения этих параметров. Листы стилей являются очень удобным средством форматирования Вэб-страниц, т.к. позволяют сконцентрировать управление внешним видом страницы в одном месте.
Еще более удобным является создание внешнего листа стилей, который позволяет сконцентрировать в одном месте управление внешним видом всего сайта.
Пример:
HTML-код:
<head> <style> H6{text-align: right; font-style: italic; color: blue} </style> </head> <h6>Этот текст отформатирован при помощи внутреннего листа стилей</h6> |
Отображение в браузере:
Этот текст отформатирован при помощи внутреннего листа стилей |
Работа с листами стилей
Внешний лист стилей
Частное определение стилей
Атрибут ID
Класс стилей
Форматирование произвольного фрагмента Вэб-страницы