Мы часто сталкиваемся в журналах и газетах с информационными блоками, которые визуально выделены и по смыслу несколько оторваны от основного содержания. Это не прихоть верстальщика или редактора, эти блоки (врезки) давно заняли свое заслуженное место в бумажных изданиях. К сожалению, в интернет-публикациях врезки встречаются нечасто.
Врезка может использоваться не только для пояснений, но и для различной дополнительной информации, которая хотя бы отдаленно связана со статьей — для новостей, личных (и, возможно, оппозиционных) мнений по рассматриваемому в статье вопросу… Одна из важных функций врезки заключается в том, чтобы на время отвлечь (и развлечь) читателя большой статьи от основного текста, переключить его внимание на другую информацию.
Врезка — это блок дополнительной информации к статье. «Новый словарь русского языка» Т. Ефремовой (2000 г.) определяет термин так: «2. То, что врезается или врезано. // Краткий пояснительный текст, который предваряет статью и набирается другим шрифтом или выделяется иным типографским способом (в издательском деле)».
Веб-мастера могут извлечь дополнительную выгоду от использования врезок к статьям — в них можно размещать справочную информацию о рассматриваемом вопросе или продукте (ссылки, адреса, фамилии). Можно приспособить блок врезки для размещения рекламы прямо в тексте статьи — нестандартное положение рекламного блока должно увеличить его эффективность. Немного фантазии и код блока врезки можно превратить в средство для создания буквицы.
Сам блок мы сделаем с помощью CSS. Беспрецедентная простота решения с помощью CSS (в отличие от таблиц) и стала причиной затянутого введения к статье — необходимо как-то «подтянуть» заметку до размеров средней статьи :).
Приведем CSS-код, используемый для создания врезок. Итак:
---------------------------------------------------------------------
.breakoutr {
float: right;
width: 35%;
padding: 10px;
margin-left: 10px;
background-color: #ccc;
color: #000;
text-align: left;
line-height: 120%;
}
---------------------------------------------------------------------
HTML-код еще проще. Размещать его надо перед тем абзацем текста, рядом с которым вы хотите пустить врезку.
---------------------------------------------------------------------
<div class="breakoutr">Текст врезки</div>
---------------------------------------------------------------------
CSS: float
Когда элемент веб-страницы получает свойство float, он становится блочным элементом и вырывается из нормального потока (того, как браузер отобразил бы страницу без учета позиционирования CSS). Элемент прикрепляется к левой (float: left) или правой (float: right) стороне родительского блока (например, другого CSS-блока или ячейки таблицы), остальные элементы страницы будут обтекать float-блок с другой стороны. Подробнее:здесь издесь.
Директива CSS «float: right;» прикрепляет врезку к правой стороне родительского блока и заставляет остальные элементы обтекать ее слева. Этот CSS-блок, как и любой другой, при отсутствии значения ширины займет все доступное пространство по горизонтали, и «обтекать» его будет негде. Поэтому необходимо задать ширину врезки (width:). 35% — эмпирически подобранное значение. С одной стороны, врезка не должна быть очень узкой — неудобно читать текст с шириной строки в одно слово, с другой стороны, врезка не должна занимать слишком много места и ограничивать основной текст статьи.
Таков минимально необходимый для создания врезки код. Все остальное — исключительно оформительство, которое каждый делает, исходя из своих вкусов и потребностей. Хотя… две следующие директивы тоже важны, если и не для функциональности врезки, то точно для сохранения опрятности верстки статей.
Директива «padding: 10px;» задает отступ от границы блока в 10 пикселей для информации внутри врезки, чтобы текст не располагался вплотную к краям блока, что может затруднить чтение. Значение в 10px выбрано, исходя из соображений разумной достаточности — создает заметный отступ, но не отнимает много места у полезной информации. Margin наоборот задает отступ блока от внешних элементов. В нашем случае текст обтекает врезку слева, поэтому для удобства чтения слева от блока задается свободное пространство в 10px. Дополнительную информацию о «хитросплетениях» padding'ов и margin'ов можно почерпнуть, например, по этим ссылкам:
- www.htmldog.com/guides/cssbeginner/margins/
- www.w3.org/TR/REC-CSS2/box.html
Background-color определяет фоновый цвет для врезки, чтобы визуально выделить ее из остального текста статьи и привлечь внимание читателя. Color задает цвет шрифта. При желании можно сделать и декоративнуюрамку для врезки, например — «border: 1px dashed black;». Однако это кажется ненужным усложнением «конструкции».
«text-align: left;» позволяет выровнять текст врезки по левому краю. Выравнивание по ширине лучше не использовать. Из-за недостаточной для этого ширины блока строки будут выглядеть неопрятно. line-height определят расстояние между строками (интерлиньяж, высоту строки) в процентах от размера шрифта. На сайте используется небольшой размер шрифта, поэтому для удобства чтения задано большое межстрочное расстояние. Однако для блока врезки используется меньшее значение — 120%, чтобы сократить размер блока по вертикали. Т. к. тексты для врезки, как правило, используются небольшие, уменьшенный интерлиньяж не должен сильно сказаться на удобстве чтения. Если на вашем сайте используется большой шрифт, можно для экономии пространства вместо высоты строки установить меньший размер шрифта; как вариант: «font-size: smaller;».
Вот и все, о чем хотелось рассказать. Код вполне можно расширять и дальше. Например, переписать его под «левую руку» — float: left; margin-right: 10px; — и еще множество различных улучшений. Главным остается то, что использование врезок позволит улучшить качество публикаций на сайте. Учитывая же простоту реализации, эта возможность кажется вдвойне привлекательной.
(Пока оценок нет)
Загрузка...