Практика разработки Web-страниц


Фон сливается со страницей


Веб-страницы с фоновым цветом или рисунком смотрятся интереснее, чем простой ванильный фон. К сожалению, фон может уменьшить читаемость вашей страницы. Этот же принцип действует в книгах и журналах: для удобства чтения текст помещают на светлом сплошном фоне, и гораздо реже – поверх цветного рисунка. В сети существует еще больше причин для использования простого фона. На компьютерном экране тяжело читать текст без достаточного контраста. Поскольку все компьютерные мониторы отображают цвета немножко по-разному, используйте цветовую схему, которая обеспечивала бы хороший контраст на любом мониторе.

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

Простой фон с использованием двух веб-устойчивых цветов обеспечивает хороший контраст с текстом

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

  1. Выберите цвет фона, хорошо контрастирующий с текстом – светлый фон для черного текста, например. Убедитесь, что вы выбрали веб-устойчивый цвет – тот, который может быть отображен как сплошной в любом броузере. (Ничего не знаете о веб-устойчивых цветах? См. раздел "Номера цветов в сети".) Следующий тэг <BODY>, например, устанавливает светло-оливковый фон, который является веб-устойчивым и обеспечивает контраст с черным текстом.

    <body bgcolor="#cccc99">

  2. Если вы используете фоновый рисунок, постарайтесь упростить его. Если необходимо, отредактируйте изображение в графическом редакторе. Например, уменьшите до минимума количество цветов, выбрав цвета, не слишком контрастирующие друг с другом. Если возможно, используйте веб-устойчивые цвета – это лучший способ создать фон без дефектов изображения. Переведите такое изображение в формат GIF, хорошо отображающий области сплошного цвета. (За другими идеями обращайтесь к разделу "Цвета в рисунке GIF зернистые и неровные".)
  3. Если вы выбрали в качестве фона фотографию или разноцветный рисунок, постарайтесь сделать его неброским. (Может быть, удобнее использовать рисунок только на какой-то части страницы.) Чтобы приглушить рисунок на заднем плане и повысить контраст с передним планом, исправьте рисунок в своей графической программе. Увеличьте яркость, убавьте контраст и цветовую насыщенность, чтобы "размыть" рисунок. (Если задний фон темный, а ваш текст – светлый, то яркость нужно будет понизить.) Сохраните этот рисунок в формате JPEG, чтобы точнее передать цвета.



  4. Начало  Назад  Вперед