Вставка

Представляю Вашему вниманию девятнадцатый выпуск информационной рассылки сайта "Веб дизайн в примерах". В этом выпуске рассмотрим выделение части контента сайта с помощью вставок.

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

С точки зрения верстки, вставки представляют собой плавущие объекты и создаются с использованием свойства таблиц стилей float. Для начала опишем класс incut (с английского переводится как вставка).

Поясним приведенный выше код. Свойство float:right - означает, что плавающий объект будет выравнен по правому краю. Для выравнимания по левому краю используется float:left. width задает ширину вставки, margin и padding отступы от внешней и внутренней границы вставки соответственно. Свойство border задает тип рамки (в нашем случае толщиной в один пиксель пунктирной серой линией). Свойство background-color задает цвет фона (у нас он светло серый), а свойства text-align и font-size выравнивание и размер такста соответственно. Создать вставку можно задав описанный выше стиль incut для тега <div>. Использованная в этой рассылке вставка имеет вид:

• Адрес сайта: design.originweb.info.
• Для новых подписчиков: архив рассылки.
• Открылся новый сайт: Научно-образовательный портал. На нем планируется размещать информационные и образовательные программы, в т.ч. и по веб-строительству.
• О том как правильно и с выгодой для себя размещать рекламу читайте в статье: Краткая заметка об размещении рекламных материалов на сайте.

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").