Фон, заданный картинкой, на котором плитки плохо стыкуются

Штрафной балл: 0.1

Чтобы фоновый «паркет» смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации.

С фоновыми картинками нужно обращаться очень осторожно. Если нет уверенности, что паркет улучшает восприятие документа, лучше использовать одноцветную заливку: на гладком фоне текст всегда читается лучше.

Повторение фоновой картинки в широких окнах

Штрафной балл: 0.1

В узком окне сайт смотрится нормально (рис. 7.12):

Рис 7.12. Страница сайта в узком окне

Фон страниц на нём образован при помощи фоновой «плиточки» (рис. 7.13):

Рис 7.13. Плиточка, которой вымощен фон

У разработчика небольшой монитор и он даже не подозревает, что на экранах с высоким разрешением с сайтом происходит катастрофа (рис. 7.14):

Рис 7.14. Страница сайта в широком окне

Что произошло? Ширина окна превысила ширину фоновой плиточки и браузер стал повторять её по горизонтали.

Избежать подобной неприятности можно двумя путями.

Первый способ рекомендует конструировать плиточку, ширина которой превосходит разумную ширину окна пользователя. Но возникают проблемы с определением этой самой «разумной» ширины.

Второй способ не зависит от разрешения экрана. Он будет работать в окнах любого размера. Суть его в том, чтобы разрешить браузеру повторять фоновую плиточку только по вертикали, а по горизонтали запретить.

Такое указание можно задать при помощи CSS-свойства background:

<BODY style="background: repeat-y url(./pic/fon.gif)"

bgcolor=#fbeee7 text=black

link=blue alink=red vlink=purple>

Значение repeat-y разрешает повторение фоновой картинки fon.gif, только по вертикали, а атрибут bgcolor задаёт цвет справа от плиточки.

Теперь в качестве фоновой картинки можно использовать совсем короткое изображение (рис. 7.15):

Рис 7.15. Новая плитка для фона

Высоту такой фоновой картинки нужно делать, конечно, в один пиксел. На иллюстрации плиточка показана высокой для наглядности.

Слишком большое число цветов

Штрафной балл: 0.1

Цвет принадлежит к базовым строительным материалам дизайна.

Обращаться с цветом нужно очень осторожно. Легко ошибиться и представить на обозрение заляпанную цветными пятнами страницу, вызывающую раздражение, как опрокинутый на пол набор красок.

При подборе цветов нужно исходить из двух важнейших принципов: единства и контраста. Единство — это фундамент композиции, скелет страницы. Контраст — это способ расстановки акцентов, выделений.

Принцип единства требует, чтобы цвета были как можно ближе друг к другу, в простейшем случае просто совпадали. Опытные дизайнеры ограничивают цветовой спектр страницы очень небольшим набором цветов (не больше четырех, хотя и четыре, часто оказывается слишком много).

Очень много прекрасных профессиональных страниц построено вообще в одном цвете. Светлый оттенок этого цвета используется для фона, тёмный — для текста, более насыщенные оттенки — для выделений.

Однако, для выполнения дизайна в одном цвете, нужен солидный опыт. Слишком близкие, но не совпадающие цвета, могут раздражать и делать страницу скучной.

Новичкам лучше пользоваться проверенной практикой рекомендацией — как можно меньше цветов на странице, но выбранные цвета должны быть контрастными.

Белый и черный цвета отлично сочетаются с большинством других. Красный цвет прекрасно сочетается с черным и белым.