Доступность и привлекательность текста
Урок #16. Создаем графическую рамку для контейнера.
17 минут
Этот комментарий к видеоуроку содержит текстовое решение задачи.
Об эффекте фантика и пользе ненавязчивости
На уроке мы создаем графическую рамку для блока (смотрите слева блок под ссылками). Идея провести этот урок пришла, когда я выбирала рамку для фотографии в программе ArtEdges.
Любимые фотографии мы стараемся украсить рамками. С таким же успехом мы можем применять рамки в качестве украшения блоков.
Блок может размещаться справа или слева от основного текста. Тем не менее посетитель обратит на него внимание, так как он будет интересно оформлен. Красивое притягивает взор.
Представьте, что вы выбираете конфеты. Вы не знаете вкус ни тех, ни других. Цены приблизительно одинаковые. Наименования фирм неизвестны. В этой ситуации я выбираю конфеты, которые наиболее привлекательно выглядят, потому что предполагаю, что они наиболее вкусны. А как поступаете вы?
Известно, что цена упаковки косметических средств дорогих зарубежных компаний составляет до 70% от цены продукта. Встречают-то по одежке.
Таким образом, наиболее важную информацию мы можем поместить в рамки, которые я называю фантиками для текстов. Они активизируют внимание, скажем так, повышают уважение к информации.
На диске есть рамки, которые были в ArtEdges, и дополнительный урок о том, как можно менять их цвет в Adobe Photoshop.
Рамка состоит из трех частей. Высота рамки зависит от высоты, которую занимает текст. Средняя часть рамки (из примера border_mid.gif) по высоте составляет всего 9px, и она «связана» с блоком #border.
В блоке #border есть заголовок h4, который «связан» с верхней частью рамки — border_top.gif.
Чтобы вставить нижнюю часть рамки (border_bottom.gif), я создала класс последнему параграфу блока (<p class="end">) и связала его с этой картинкой.
HTML-код:
<h4>Заголовок</h4>
<p>Текст.</p>
<p class="end">Текст.</p>
</div>
CSS:
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 h4 {
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;
}
- В чем преимущество обучения с помощью видеокурсов?
- Краткое содержание разделов
- Программа курса
- Интерфейс диска
- Цена
- Заказать
подушки Каригуз стоимость
Моторные лодки, стеклопластиковые катера для спорта.
Авторы: Луанна Сеймур Кохен.