Картинки

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

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

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

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

Таблица

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

Это мы!	Рассказ о нашей команде.
Cоветы	Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование.
Полезные ссылки	Их немного, но они нам помогают.
Афоризмы	Личная страничка Скляровой Насти.
Фразмочки	Работа Горошковой Елены.

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

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

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

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

Это мы!	Рассказ о нашей команде.
Cоветы	Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование.
Полезные ссылки	Их немного, но они нам помогают.
Афоризмы	Личная страничка Скляровой Насти.
Фразмочки	Работа Горошковой Елены.

Замечание. Всегда явно задавайте в таблице значения атрибутов 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) картинкой.

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

Дата добавления: 2014-01-14