Чтение онлайн

на главную - закладки

Жанры

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

Предельно простой фильтр, имеющий лишь один параметр – цвет фона, окружающего буквы.

‹p style=“filter: Glow(Strength= 6', Color= #00FF00 ); width: 400; height: 60; font-size: 30pt; font-weight: bold; text-align: center; color: green”›ПОСЛЕ ДОЖДЯ‹/p›

Фильтр обладает двумя параметрами. Strength показывает интенсивность ореола, а Color – его окраску.

Назовем и некоторые другие украшения текста. Они весьма многочисленны, причем количество их растет, точно снежный ком. Много полезных украшений вы найдете на нашем сайте «Образованные котята», а здесь приведен пример одного из наиболее простых и одновременно полезных – зачеркивание, задаваемое тэгом ‹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.

Разумеется, текст украшают не только буквицы и заголовки, но и аккуратное форматирование. Заветным желанием всех начинающих дизайнеров является сохранение текста в такой верстке, какая ему предана в Блокноте. Оказывается это возможно. Для данной цели вам потребуется заключить весь текстовый массив между тэгами ‹pre›‹/pre›, которые сохранят разбиение на строки, выполненное в блокноте. Разрывы между абзацами и принудительные переносы на новую строку удобнее всего не отбивать в визуальном редакторе, а помечать непарным тэгом ‹br› (не нуждается в закрытии).

Что касается непосредственно абзаца, то как вы могли видеть, для его верстки применяется два рода парных тэгов – ‹р›‹/р› и ‹div›‹/div›. Они почти одинаковы, так что применять вы можете в равной степени и тот и другой, вот только ‹div› – это новшество последних лет, ожидается, что он вытеснит собой ‹р›. Броузеры пока понимают оба тэга, но вот веб-редакторы пишут преимущественно ‹div›. И лучше переходить на новые тэги.

Главный атрибут тэга ‹div› (‹р›) – align=, обозначающий выравнивание. Выравнивание осуществляется по центру (center), по левому краю (left) и по правому краю (right). Например: ‹div align=“right”›А вот и я!‹/div›.

Другим важным способом организации текста является маркированный и нумерованный список, удобный для каких-либо перечислений. Он приятен для глаз и облегчает чтение большого массива информации. Задается маркированный список всегда парным тэгом ‹ul›‹/ul›. Каждый отдельный элемент, напротив которого стоит маркер, буква или число, полагается обозначать парным тэгом ‹li›‹/li›, который обладает тем удивительным свойством, что не требует к себе закрытия. То есть ‹/li› можно писать, а можно и не писать, греха в том не будет. Маркированный список задается в Web Page Maker через текстовый редактор точно так же, как в Word’е (см. рис. 20).

Рис. 20. Создание маркированного списка в Web Page Maker

Но в этой программе маркер всегда является черным кружочком (Bullet style). Если нам нужно воспользоваться другим видом маркера – незакрашенным кружочком, квадратиком или картинкой-иконкой из папочки images.files, то нам придется научиться вносить свою правку в html-код. Пишем к тэгу маркированного списка атрибут стиля ‹ul style=“list-style-type:…;”›. На место многоточия нужно внести название выбранного нами маркера. Черный кружочек называется disc, но он нам не нужен, так как ставится программой самостоятельно. Незакрашенный кружочек обозначается словом circle, а квадратик – square. Если нам понадобилось поместить на место маркера картинку, то атрибуту придаем новое значение, меняя type (тип) на image (изображение): ‹ul style=“list-style-image: url( ваша папка для картинок/название рисунка. gif);”›.

Поделиться:
Популярные книги

Новобрачная

Гарвуд Джулия
1. Невеста
Любовные романы:
исторические любовные романы
9.09
рейтинг книги
Новобрачная

Аномальный наследник. Том 1 и Том 2

Тарс Элиан
1. Аномальный наследник
Фантастика:
боевая фантастика
альтернативная история
8.50
рейтинг книги
Аномальный наследник. Том 1 и Том 2

И вспыхнет пламя

Коллинз Сьюзен
2. Голодные игры
Фантастика:
социально-философская фантастика
боевая фантастика
9.44
рейтинг книги
И вспыхнет пламя

Барону наплевать на правила

Ренгач Евгений
7. Закон сильного
Фантастика:
боевая фантастика
попаданцы
аниме
5.00
рейтинг книги
Барону наплевать на правила

Запасная дочь

Зика Натаэль
Фантастика:
фэнтези
6.40
рейтинг книги
Запасная дочь

Возвышение Меркурия. Книга 5

Кронос Александр
5. Меркурий
Фантастика:
боевая фантастика
попаданцы
аниме
5.00
рейтинг книги
Возвышение Меркурия. Книга 5

Ученичество. Книга 1

Понарошку Евгений
1. Государственный маг
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Ученичество. Книга 1

Купец VI ранга

Вяч Павел
6. Купец
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Купец VI ранга

Корсар

Русич Антон
Вселенная EVE Online
Фантастика:
боевая фантастика
космическая фантастика
6.29
рейтинг книги
Корсар

Неверный

Тоцка Тала
Любовные романы:
современные любовные романы
5.50
рейтинг книги
Неверный

Девятый

Каменистый Артем
1. Девятый
Фантастика:
боевая фантастика
попаданцы
9.15
рейтинг книги
Девятый

Убивать чтобы жить 7

Бор Жорж
7. УЧЖ
Фантастика:
героическая фантастика
космическая фантастика
рпг
5.00
рейтинг книги
Убивать чтобы жить 7

Полковник Империи

Ланцов Михаил Алексеевич
3. Безумный Макс
Фантастика:
альтернативная история
6.58
рейтинг книги
Полковник Империи

Аргумент барона Бронина 2

Ковальчук Олег Валентинович
2. Аргумент барона Бронина
Фантастика:
попаданцы
аниме
сказочная фантастика
фэнтези
5.00
рейтинг книги
Аргумент барона Бронина 2