| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Бегущая строка
|
|
Бегущая строка
Текстовая бегущая строка
Существуют множество вариантов. чтобы установить бегущую строку себе на сайт. Но она служит только лишь целью рекламного характера или как украшение Web-страницы. Многие просто не задумываются, что к текстовой бегущей строке можно прикрепить графическое изображение, а так-же сделать его ссылкой на другую страницу либо документ.
Но не следует злоупотреблять ею. Так как любое мелькание на сайте, отрицательно сказывается на посетителях. Обычно пользователи долго не задерживаются на таких сайтах, где одна реклама или мелькание. Это очень сильно мешает сосредоточится. Поэтому если уж решили поставить, то лучше знать меру.
Вот перед вами живой пример обычной бегущей текстовой строки. Она не имеет ни какой ссылки, только текст и все! Теперь давайте попробуем превратить текст в ссылку. Чтобы он ссылался на другую станицу или документ необходимо вставить ccылку внутрь тега <marquee> перед текстом бегущей строки и соответственно сразу закрыть после него.
<marquee scrollamount="3"><a href="url страницы">Бегущая строка</a></marquee>
Если необходимо задать цвет и размер бегущей строки, то нужно дополнительно указать следующее:
<marquee scrollamount="3"><a href="url страницы"><span style="font-size:15pt">
<font color="#FC0FC0">Бегущая строка</font></span></a></marquee>
Результат:
С текстом бегущей строки можно эксперементировать сколько угодно: добавлять цвет, задавать размер, прикреплять ссылку, а так-же если поместить текст в тег <blink>, то в довесок ко всему перечисленному, она будет еще и мигать!
Графическая бегущая строка
Как мы уже поняли, чтобы создать текстовую бегущую строку и прикрепить к ней ссылку, труда много не составит. А вот чтобы создать графическую (анимационную) бегущую строку, придется маленько похлопотать! Начнем с более простого варианта, так нам будет намного проще усвоить метод ее добавления на сайт.
Для этого надо:
- Загрузить картику в корневую папку сайта. (Как уже писалось, в папку "kartinki").
- Выбрать наиболее подходящий вариант оформления бегущей строки для графики
(если требуется: рамка, фон...) и вставить полученный url изображения в этот код.
- Бегущая строка у нас сделана. Осталось только вставить стандартную ссылку перед
изображением, в коде бегущей строки. Необходимо закрыть ссылку в конце url картинки.
Пример:
<marquee behavior="scroll" direction="right" scrollamount="3">
<a href="url Web-страницы">
<img src="url картинки" /></a></marquee>
Результат:
Бегущая строка - таблица
Чтобы создать бегущую строку состоящую из нескольких графических изображений, с опцией просмотра в виде слайда, необходимо создать таблицу. Ниже приведенный пример состоит из двух отделов. В одно можно загрузить несколько картинок для онлайн просмотра, а в другом приведен пример вертикальной бегущей строки. ( Если убрать в тексте тег <br>, то бегущая строка станет горизонтальной )
Так-же эту таблицу можно использовать для личных целей, например, для просмотра собственных фотографий на сайте. По желанию можно добавить в начало и в конец текста по изображению. Для этого необходимо прописать url картинки перед началом текста. Поскольку у нас заданы параметры размера и цвета, то адрес придется прописать перед ними. С другого конца текста, url cледует прописать сразу после тега <br>.
<marquee direction="up" width="100" height="150" class="styleredbig">
<img src="url" alt="имя" width="200" height="135" border="0">
<span style="font-size:11pt"><font color="red"><b><br>
Т
Е
К
С
Т</b></font></span>
<br>
<img src="url" alt="имя" width="200" height="135" border="0">
</marquee>
Остался последний штрих - это прикрепить к каждому изображению собственную ссылку. Для этого необходимо прописать ссылку, на нужную вам страцу, перед тегом <img>, а после тега него ссылку закрыть.
<a href="url ссылки"><img src="url image" alt="имя" width="200" height="136" border="0"></a>
В таком случае, если мы все сделаем правильно, то при нажатии на любую из картинок, нас перенаправят на указанный адрес. Точно тоже самое можно сделать и с текстом, который расположен в другой части таблицы или с картинками, которые его окружают.
Этот пример можно использовать как навигацию по сайту. Содержащая тему картинка, в большинстве случаев, должна нести ту же тематику, что и Web-страница. Поскольку пользователь изначально должнен быть информирован, куда его сейчас переправят, с этой страницы.
А мы переходим к изучению листинга 7.6. Высоту и ширину мы пока изменять не будем. Так как изменив размеры в большую сторону, необходимо будет изменить и размер самой таблицы (тоже самое - если уменьшить). Нам сейчас нужно загрузить картинки в корневую папку сайта - "kartinki" и установить url каждого изображения в таблицу. Потом нужно задать для каждого изображения альтернативный текст (имя картинки). Вот и все!
Листинг 7.6
<table width="90%" border="1" align="center" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td width="50%" height="200" align="center" valign="top">
<marquee direction="up" width="100" height="150" scrollamount="2" scrolldelay="40">
<img src="url" alt="имя" width="200" height="136" border="0">
<br>
<br>
<img src="url" alt="имя" width="200" height="135" border="0">
<br>
<br>
<img src="url" alt="имя" width="200" height="135" border="0">
<br>
<br>
<img src="url" alt="имя" width="200" height="135" border="0">
<br>
<br>
<img src="url" alt="имя" width="200" height="135" border="0">
</marquee>
</td>
<td width="50%" align="center" valign="top">
<marquee direction="up" width="100" height="150" class="styleredbig">
<span style="font-size:11pt"><font color="red"><b><br>
Т
<br>
Е
<br>
К
<br>
С
<br>
Т</b></font></span>
<br>
</marquee>
</td>
</tr>
</tbody>
</table>
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
