Одна из распространенных ошибок начинающих — “удушение” информационных элементов на экране путем слишком тесного их расположения.
Практическая рекомендация: оставляйте между текстом и картинкой, текстом и табличными гранями по 10 пикселов.
Пример из конкурсной работы:
Это мы! | Рассказ о нашей команде. |
Cоветы | Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование. |
Их немного, но они нам помогают. | |
Афоризмы | Личная страничка Скляровой Насти. |
Фразмочки | Работа Горошковой Елены. |
Табличная разлиновка всегда сомнительна, но если уж она есть, то текст не должен слишком тесно прижиматься к граням таблицы. Обязательно нужны промежутки (одинаковые на протяжение всего сайта в подобных местах).
Промежуток легко образуется, если задать нужные значения атрибутам cellspacing и cellpadding в теге TABLE. (Атрибут cellspacing задаёт расстояние между ячейками таблицы, атрибут cellpadding — расстояние между содержимым ячейки и рамкой ячейки.)
Для образования полей вокруг элемента, помещенного в ячейку, таблицу можно кодировать, например, так:
<TABLE cellspacing=0 cellpadding=10 другие атрибуты>
Это мы! | Рассказ о нашей команде. |
Cоветы | Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование. |
Их немного, но они нам помогают. | |
Афоризмы | Личная страничка Скляровой Насти. |
Фразмочки | Работа Горошковой Елены. |
Второй способ “удушения” информационного элемента, который пользуется успехом на роботландском конкурсе Проба пера — это перекрытие кислорода тексту при помощи прижатия его к картинке.
Этот фрагмент задается следующим кодом:
<P> <IMG src="/pic/title1.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=Сидоров>
Вы увидите, как Сидоров дышит полной грудью.
Атрибуты hspace и vspace определяют свободное пространство:
По умолчанию значения этих атрибутов не определены, но обычно это небольшие ненулевые значения.
Ещё лучше указывать отступы при помощи CSS. Вот как, например, выглядит тот же текст с картинкой, для которой задано padding: 0 10px 10px 0. Заметим, что отступ в 10 пикселов назначен только справа и снизу, а слева и сверху картинка осталась выровненной по тексту (что очень правильно).