Видеокурс по созданию сайтов | Создаем графическую рамку для особо значимой информации

Видеокурс

Доступность и привлекательность текста

Комментарии к видеоурокам

Урок #16. Создаем графическую рамку для контейнера.
17 минут

Комментарий содержит текстовое решение задачи.

Об эффекте фантика и пользе ненавязчивости

Красота — страшная сила.

Двое японских исследователей в начале 1990-х годов провели серию тестов с интерфейсами для банкоматов (ATM). Все банкоматы были абсолютно одинаковыми по функционалу, но одна часть банкоматов выглядела привлекательно, а другая — нет. По результатам тестов, японские пользователи, находили привлекательные банкоматы гораздо удобнее в пользовании.

Полученные данные были подтверждены и на другом конце земного шара израильским исследователем.

На уроке мы создаем графическую рамку для блока, содержание которого желательно выделить. Идея провести этот урок пришла, когда я выбирала рамку для фотографии в программе ArtEdges.

Любимые фотографии мы стараемся украсить рамками. С таким же успехом мы можем применять рамки в качестве украшения блоков.

Блок может размещаться справа или слева от основного текста. Тем не менее посетитель обратит на него внимание, так как он будет интересно оформлен. Красивое притягивает взор.

Представьте, что вы выбираете конфеты. Вы не знаете вкус ни тех, ни других. Цены приблизительно одинаковые. Наименования фирм неизвестны. В этой ситуации я выбираю конфеты, которые наиболее привлекательно выглядят, потому что предполагаю, что они наиболее вкусны. А как поступаете вы?

Известно, что цена упаковки косметических средств дорогих зарубежных компаний составляет до 70% от цены продукта. Встречают-то по одежке.

Таким образом, наиболее важную информацию мы можем поместить в рамки, которые я называю фантиками для текстов. Они активизируют внимание, скажем так, повышают уважение к информации.

На диске есть рамки, которые были в ArtEdges, и дополнительный урок о том, как можно менять их цвет в Adobe Photoshop.

Рамка состоит из трех частей. Высота рамки зависит от высоты, которую занимает текст. Средняя часть рамки (из примера border_mid.gif) по высоте составляет всего 9px, и она «связана» с блоком #border.

В блоке #border есть заголовок h4, который «связан» с верхней частью рамки — border_top.gif.

Чтобы вставить нижнюю часть рамки (border_bottom.gif), я создала класс последнему параграфу блока (<p class="end">) и связала его с этой картинкой.

HTML-код:

<div id="border">
<h2>Заголовок</h2>
<p>Текст.</p>
<p class="end">Текст.</p>
</div>

CSS:

#border {
background: #EFF8FE url(../img/border_mid.gif) repeat-y;
width: 248px;
text-align: center;
margin: 20px 0px 0 15px;
}
#border p {
margin: 10px 20px;
}
#border h2 {
margin: 0px;
text-align: center;
padding: 30px 20px 5px;
background: url(../img/border_top.gif) no-repeat top;
font-size: 14px;
color: #333;
}
#border p.end {
background: url(../img/border_bottom.gif) no-repeat bottom;
margin: 0;
padding: 0px 20px 30px; }

Статьи