Советы

Фон

Когда текст слишком близко прижимается к левому краю окна — это плохо.

— Надо сделать поля! — сказал я себе и нарисовал в Фотошопе картинку высотой в один пиксел и шириной в 1280 пикселов:

xxxxxxxxxxx--------------------------------------

Основная часть этой картинки — белая, а кусочек слева — зеленый.

Картинка в виде файла fon.gif была записана в подкаталог pic каталога будущего сайта. Если теперь написать в HTML-программе:

<BODY background=./pic/fon.gif>
картинка будет размножаться по вертикали, и пользователь увидит на экране
xxxxxxxxxxx--------------------------------------
xxxxxxxxxxx--------------------------------------
xxxxxxxxxxx--------------------------------------
xxxxxxxxxxx--------------------------------------
xxxxxxxxxxx--------------------------------------
...
белый фон с зеленой полосой слева. Посмотрите здесь.

Размер картинки fon.gif выбран, конечно, не случайно. Высота в 1 пиксел вполне достаточна: браузер размножит эту полоску по вертикали сам. Ширина в 1280 выбрана равной правдоподобной максимальной экранной ширине монитора. Через 1280 пикселей картинка будет укладываться браузером в новый вертикальный ряд, но этого никто не увидит, так как разрешение экрана больше 1280 по горизонтали трудно себе представить.

Несмотря на такую большую ширину, размер картинки получился очень маленьким, всего 887 байт.

В теге BODY я написал:

<BODY background=./pic/fon.gif
      bgcolor=white text=black
      link=blue alink=red vlink=purple>
а не
<BODY background=./pic/fon.gif>

Зачем? Пока фоновая картинка грузится по сети, браузер будет использовать указание bgcolor=white и нарисует экран белым. Значит, когда картинка придет на компьютер, слева нарисуется зеленая полоска, и большого землетрясения не случится. А если у пользователя фон в браузере установлен, например, серым, оно бы произошло, будь в HTML-коде укороченный тег:

<BODY background=./pic/fon.gif>

Пользователь приступил к чтению на сером фоне, но вот бело-зеленый фон пришел по сети и ударил пользователя по глазам: больно! Давайте любить пользователя: мы делаем сайт для него!

В теге BODY я задал и другие цвета, характерные для академического дизайна:

text=black — черный текст
link=blue синяя ссылка
alink=red красная активная ссылка
vlink=purple пурпурная отработанная ссылка

Выбор трех цветов для отображения ссылок обосновывается следующими соображениями:


[содержание] [советы] [цветовая палитра сайта] [заголовок сайта]       Иван Сидоров kurs@robotland.pereslavl.ru