Искусство оформления сайта. Практическое пособие

Назовем и некоторые другие украшения текста. Они весьма многочисленны, причем количество их растет, точно снежный ком. Много полезных украшений вы найдете на нашем сайте «Образованные котята», а здесь приведен пример одного из наиболее простых и одновременно полезных – зачеркивание, задаваемое тэгом ‹strike›. Оно может применяться как в шутливых текстах, так и в текстах вполне серьезных: о правилах русского языка (зачеркивание ошибок), о ценовых скидках (зачеркивание старых цен), о результатах голосований (зачеркивание фамилий проигравших кандидатов), о результатах тестирования (зачеркивание неверных ответов) и т. д. Тэг парный, ему необходимо закрытие в виде ‹/strike›. По слухам, какие-то броузеры понимают сокращенное написание этого тега – ‹S›, но для обеспечения стопроцентной совместимости лучше писать тэг полностью.

Говоря о спецэффектах, нельзя не вспомнить про динамические эффекты, из которых здесь будет рассмотрена бегущая строка. Она легко вставляется через Web Page Maker, в котором достаточно пройти путь Insert › Marquee – «Вставка › Бегущая строка». В диалоговое окошко всплывающего текстового редактора заносится фраза, которую мы хотим прокручивать (рис. 19). Словам строки можно придать разные цвет и начертание, а некоторые даже сделать гиперссылками. Так мы и поступим, внесем в редактор следующую фразу: «Компания „Сказочная роскошь“ предлагает вашему вниманию унитазы плюшевые (в широком ассортименте), скамеечки для ног золотые (с подогревом), самонаполняющиеся джакузи». Подчеркнутые слова будут ссылками, кликая на которые потенциальный покупатель сможет больше узнать о рекламируемом товаре. В коде документа данная запись принимает вид:

‹marquee width=… height=…›‹font style=“font-size:13px” color=“#000000” face=“Tahoma"›‹div›Компания «Сказочная роскошь» предлагает вашему вниманию ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/unitaz.html”›унитазы плюшевые‹/a›‹/i›‹/font› (в широком ассортименте), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/skameika.html”›скамеечки для ног золотые‹/a›‹/i›‹/font› (с подогревом), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/djakkuzi.html”›самонаполняющиеся джакузи‹/a›‹/i›‹/font›‹/div›‹/font›‹/marquee›

Рис. 19. Вставка бегущей строки в Web Page Maker

На этом можно было бы успокоиться, но Web Page Maker не дает нам полного управления бегущей строкой. Допустим, что мы захотели кое-что изменить в этом тексте. Во-первых, нас совершенно не устраивает движение словесной ленты справа налево. Затем мы найдем, что прокрутка неудобна для покупателя, поскольку ему приходится ловить ссылки. Вот почему наш идеал – сдвиг, при котором текст выкатывается на страничку из ниоткуда, движется до некоего предела, а потом замирает неподвижно. И конечно, нам хотелось бы отрегулировать скорость строки, а также как-то зрительно обособить ее от остального текста, например специфическим фоном и рамочкой. Для этого добавим к тэгу ‹marquee› следующие атрибуты:

‹marquee width=… height=… behavior=“slide” direction=“right” scrolldelay=“ 70” style=“border-style: double; border-width: 5; padding-left: 3; padding-right: 3; padding-top: 2; padding-bottom: 2” bgcolor=“#C0C0C0”›‹font style=“font-size:13px” color=“#000000” face=“Tahoma"›‹div›Компания «Сказочная роскошь» предлагает вашему вниманию ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/unitaz.html”›унитазы плюшевые‹/a›‹/i›‹/font› (в широком ассортименте), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/skameika.html”›скамеечки для ног золотые‹/a›‹/i›‹/font› (с подогревом), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/djakkuzi.html”›самонаполняющиеся джакузи‹/a›‹/i›‹/font›‹/div›‹/font›‹/marquee›

Атрибут «поведение» behavior имеет значение «сдвиг» – slide. Атрибут «направление» direction получил значение «направо» – right. Атрибут «задержка прокрутки» scrolldelay принят равным 70. Атрибут «стиль» style (который весьма вместителен и может включить в себя немало чего другого) содержит следующие параметры: стиль рамочки border-style – двойная (double), с шириной (border-width) 5 пкс, при отступе текста от рамки слева (padding-left) в 3 пкс, справа (padding-right) в 3 пкс, сверху (padding-top) в 2 пкс, снизу (padding-bottom) в 2 пкс. Цвет фона для бегущей строки задается атрибутом «фоновый цвет» bgcolor.