Картинки

Прижатость элементов друг к другу

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

Одна из распространенных ошибок начинающих — «удушение» информационных элементов на экране путем слишком тесного их расположения.

Практическая рекомендация: оставляйте между текстом и картинкой, текстом и табличными гранями по 10 пикселов.

Таблица

Пример из конкурсной работы:

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

Промежуток легко образуется, если задать нужные значения атрибутам cellspacingи cellpaddingв теге TABLE. (Атрибут cellspacingзадаёт расстояние между ячейками таблицы, атрибут cellpadding— расстояние между содержимым ячейки и рамкой ячейки.)

Для образования полей вокруг элемента, помещенного в ячейку, таблицу можно кодировать, например, так:

<TABLE cellspacing=0 cellpadding=10 другие атрибуты>

Замечание. Всегда явно задавайте в таблице значения атрибутов cellspacingи cellpadding. Если они будут опущены, браузер установит значения по умолчанию, причем умолчания у разных браузеров свои. Не следует доверять браузеру делать такие вещи по своему усмотрению.

Второй способ «удушения» информационного элемента, который пользуется успехом на роботландском конкурсе «Проба пера» — это перекрытие кислорода тексту при помощи прижатия его к картинке (рис. 7.6).

Рис 7.6. Ивану не хватает воздуха

Этот фрагмент задается следующим кодом:

<P>

<IMG src=./pic/ivan.gif

width=93 height=64

align=left

border=0 alt=Сидоров>

Иван пошел в лес за грибами. Стоял чудесный день

сентября. Иван пошел в лес не один, он взял с собой

собаку, которая любила лесные прогулки. Под высокой

стройной березой Иван нашел сразу три молодых гриба.

Собака от радости носилась вокруг хозяина, и хвост её

совершал колебательные движения, что означало высшую

степень собачьего восторга.<BR clear=left>

Вы видите, как текст «душит» Сидорова, прижимаясь к нему вплотную.

Напишите теперь:

<IMG src=./pic/title1.gif

width=93 height=64

align=left

hspace=10

border=0 alt=Сидоров>

Вы увидите, как Сидоров дышит полной грудью (рис. 7.7).

Рис 7.7. Сидоров дышит полной грудью

Атрибуты hspaceи vspaceопределяют свободное пространство:

q слева и справа (hspace) от картинки;

q над и под (vspace) картинкой.

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