На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

CSS: врезка к статье

Автор: Земсков Юрий
www.ComputerLibrary.info

Мы часто сталкиваемся в журналах и газетах с информационными блоками, которые визуально выделены и по смыслу несколько оторваны от основного содержания. Это не прихоть верстальщика или редактора, эти блоки (врезки) давно заняли свое заслуженное место в бумажных изданиях. К сожалению, в интернет-публикациях врезки встречаются нечасто.

Врезка о врезке

Врезка — это блок дополнительной информации к статье. «Новый словарь русского языка» Т. Ефремовой (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'ов можно почерпнуть, например, по этим ссылкам:

Background-color определяет фоновый цвет для врезки, чтобы визуально выделить ее из остального текста статьи и привлечь внимание читателя. Color задает цвет шрифта. При желании можно сделать и декоративную рамку для врезки, например — «border: 1px dashed black;». Однако это кажется ненужным усложнением «конструкции».

«text-align: left;» позволяет выровнять текст врезки по левому краю. Выравнивание по ширине лучше не использовать. Из-за недостаточной для этого ширины блока строки будут выглядеть неопрятно. line-height определят расстояние между строками (интерлиньяж, высоту строки) в процентах от размера шрифта. На сайте используется небольшой размер шрифта, поэтому для удобства чтения задано большое межстрочное расстояние. Однако для блока врезки используется меньшее значение — 120%, чтобы сократить размер блока по вертикали. Т. к. тексты для врезки, как правило, используются небольшие, уменьшенный интерлиньяж не должен сильно сказаться на удобстве чтения. Если на вашем сайте используется большой шрифт, можно для экономии пространства вместо высоты строки установить меньший размер шрифта; как вариант: «font-size: smaller;».

Вот и все, о чем хотелось рассказать. Код вполне можно расширять и дальше. Например, переписать его под «левую руку» — float: left; margin-right: 10px; — и еще множество различных улучшений. Главным остается то, что использование врезок позволит улучшить качество публикаций на сайте. Учитывая же простоту реализации, эта возможность кажется вдвойне привлекательной.

Платежная система RUpay - E-Gold, WebMoney, MoneyBookers, PayCash

Автор: Земсков Юрий
www.ComputerLibrary.info

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100