Использование фонового изображения для замены текста
Категория реферата: Рефераты по информатике, программированию
Теги реферата: реферат по культурологии, доклад по биологии
Добавил(а) на сайт: Jakushkov.
Предыдущая страница реферата | 1 2 3 4 | Следующая страница реферата
Нас не устроит буквица, стоящая особняком на строке (именно так получилось бы, если бы мы заключили её в тег div). Договоримся, что мы не хотим, чтобы первая буква как-нибудь выделялась на общем фоне в том случае, когда стилевые правила недоступны для броузера. В таком случае мы используем пару универсальных тегов span:
Ever wanted a ...
Помните, что мы применяем фоновое изображение к внешнему тегу , а внутренний используем для сокрытия текста. В этом примере мы зададим для внешнего тега "плавучесть" (float) для того, чтобы текст абзаца охватывал его справа и снизу. Для лучшей совместимости с различными броузерами зададим для этого же элемента свойство display: block; (впрочем, это должно произойти автоматически при использовании float). У нас получится вот такой набор стилевых правил:
span.dropcap {
display:block;
float:left;
width:46px;
height:63px;
margin-right:5px;
background-image:url("dropcap_e.gif");
background-repeat:no-repeat;
}
span.dropcap span {display:none;}
Ширина и высота для первого правила взяты такими же, как соответствующие размеры изображения. Кроме того, мы применили небольшой правый отступ (margin-right) для нашей буквицы. Объединив HTML и CSS и применив кое-какие мелкие стилевые правила к самому абзацу, мы получили вот такой образчик буквицы.
Ещё примеры
Творческое использование метода ограничено лишь возможностями нашего воображения. Этим способом, среди прочего, можно:
Создавать логотипы и названия, основанные на использовании шрифта
"Отливать" заголовки
Отображать котировки акций
Заменять отдельные слова с целью улучшения косметического эффекта (например, замена "and" и "vs.")
Этот метод может быть хорош при смене внешнего вида сайта с помощью альтернативных таблиц стилей. Каждая таблица может подключать свои изображения.
Заменяйте осторожно
Вышеизложенный метод следует использовать с особой ответственностью. В изображении всегда должен быть тот же самый текст, что и в спрятанном html-коде. В противном случае будет несправедливо показывать пользователям при включенных стилях одно, а при выключенных - другое. Изображение-заменитель может отличаться размером и способом написания шрифта, его цветом и расстоянием между символами. Но эти стилистические решения определяются лишь графическим дизайном страницы, и их не следует применять к заменяемому html-тексту. Например, если повторить склеивание слов (т.е. удаление между ними пробела, как сделано в графических заголовках сайта stopdesign.com) в html-тексте, голосовые броузеры и броузеры для слепых превратят текст в кашу. Следовательно, html-текст должен быть оформлен с соблюдением орфографии и синтаксиса, как если бы он предназначался для страницы без стилей.
Необходимо упомянуть несколько очень серьезных недостатков этого метода:
Рекомендуем скачать другие рефераты по теме: бесплатные тесты бесплатно, рефераты по медицине.
Предыдущая страница реферата | 1 2 3 4 | Следующая страница реферата