Похожие статьи

Свойство CSS float: обтекание рисунка текстом и врезка к статье (48,19%)
Свойство CSS float определяет обтекание одного элемента другим. С его помощью на сайте можно реализовать обтекание рисунка текстом или, например, врезку к статье. Рассмотрение float: на этих примерах и будет целью данной статьи…

CSS верстка сайта: макет в три колонки (44,83%)
Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Google и тематика сайта (37,21%)
Понятие «тематика» имеет множество значений, в Google «тема» является предметом поиска — «топиком» (тематическим разделом). Топик — это тематика повествования веб-страницы. Тематика страницы влияет на ее релевантность в Google…

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

Дата публикации 24-01-2005 19:29
Статья просмотрена 9983 раз

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

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

Похожие статьи

Верстка таблиц (35,29%)
В статье рассказывается о тегах, которые могут быть использованы для верстки таблиц. Именно для верстки таблиц, а не для верстки сайтов таблицами. Если вы никогда не использовали ничего кроме <table>, <tr>, <td>, тогда вы узнаете много того, что позволит лучше структурировать табличную информацию и изменять ее визуальное представление…

Из пустого в порожнее: статьи по веб-дизайну (34,38%)
Ситуация с новыми оригинальными материалами по веб-дизайну в Рунете просто ужасающая. И, если интересных зарубежных публикаций в сети вполне хватает, а дела с переводными статьями обстоят еще куда ни шло, то русскоязычных авторов явно настиг творческий кризис…

Аудит веб-сайта (34,29%)
Не можете достичь успеха в раскрутке и продвижении сайта? Выход один — бросать всякую самодеятельность и принимать на работу специалиста в области оптимизации или обращаться за помощью к профессиональным компаниям. Для начала Вам нужны профессионалы, способные провести аудит и анализ вашего сайта…

Perl и сокеты. Часть 1 (33,33%)
В этой статье рассматривается один из способов взаимодействия с сокетами языка Perl с помощью стандартного модуля Socket. Предполагается, что читатель знаком с базовым синтаксисом Perl и стеком протоколов TCP/IP. Возможности Perl-модуля Socket рассматриваются на примере клиента службы времени, который выдает текущую дату и время…

Perl и сокеты. Часть 2 (33,33%)
В статье рассматривается работа с сокетами на Perl с помощью стандартного модуля Socket на примере клиента, получающего данные о погоде с weather.yandex.ru. А также работа с сокетами через модуль IO::Socket на примере клиента службы времени…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (3) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

CSS верстка сайта: макет в три колонки Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…