Предыдущая страница реферата | 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 | Следующая страница реферата