Отправляет email-рассылки с помощью сервиса Sendsay

Дизайн сайта как инструмент продажи

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

10.132 подписчиков
-10 за неделю
←   Все выпуски   →

Уроки веб-дизайна с подробными примерами #19


Доброго Вам времени суток, уважаемые подписчики!

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

Вставка - один из простых способов подчеркуть ключевые моменты на странице.

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

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

<style>
.incut {
float:right;
width:200px;
margin:10px;
padding: 5px;
border: 1px dotted #aaa;
background-color: #eee;
text-align:justify;
font-size:12px;
}
</style>

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

<div class="incut">
Вставка - один из простых способов подчеркуть ключевые моменты на странице.
</div>
Новости сайта/полезные ссылки

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