Советы

Разведение коз в абзаце

Запустим козочек

Если картинку расположить внутри текстового абзаца, как вот эту козочку Коза, то она ведет себя подобно обычному текстовому символу. Используя атрибут align, можно подравнивать вертикальное расположение картинки по отношению к текущей текстовой строке. Например, в этом изображении Коза использовано значение align=top. В этом Коза — align=bottom.

Попробуйте посмотреть предыдущий абзац в разных по ширине окнах. Если вы работаете с NN-3 или NN-4, то ваше представление о том, как должны располагаться картинки с атрибутами align=top и align=bottom, соответствует описаниям этих значений (верх картинки выровнен по верху текущей строки; низ картинки выровнен по базовой линии строки). Если вы смотрите на козочек в IE-4 или в NN-6, то легко подобрать размер окна, когда никаких различий в расположении рисунков не будет.

Обтекание

Картинка прикрепляется к текущему левому краю (окна, таблицы), Коза если записан атрибут align=left. Другие элементы (текст, картинки) обтекают изображения справа. Вот эта козочка Коза “плывет” вместе с текстом, у нее align=top. Поизменяйте размеры окна, и вы увидите, как хорошо козочка “держится на воде”!

Код предыдущего абзаца показан ниже: 

<P>
 Картинка прикрепляется к текущему левому краю
 (окна, таблицы),
 <IMG src=./pic/goat.gif width=84 height=67
      alt=Коза border=0 align=left hspace=10>
 если записан атрибут <TT>align=left</TT>.
 Другие элементы (текст, картинки) обтекают
 изображения справа. Вот эта козочка
 <IMG src=./pic/goat.gif width=84 height=67
      alt=Коза border=0 align=top hspace=10>
 &#147;плывет&#148; вместе с текстом, у нее
 <TT>align=top</TT>. Поизменяйте размеры
 окна, и вы увидите, как хорошо козочка
 &#147;держится на воде&#148;!<BR clear=left>

Обратите внимание на то, что “плавающий” абзац заканчивается тегом BR с атрибутом clear=left. Этот атрибут прерывает обтекание. При этом следующая строка начнется на ближайшей строке под прикрепленной картинкой у левого поля. Рекомендуется всегда использовать эту конструкцию при обтекании картинки, потому что обтекание не заканчивается автоматически, даже если начинается новый абзац.

В этом абзаце Коза козочка прикреплена к левому краю страницы.

Здесь начался новый абзац, но он продолжает обтекание.

Вот код последнего примера: 

<P>
 В этом абзаце
 <IMG src=./pic/goat.gif width=84 height=67 alt=Коза
      border=0 align=left hspace=10>
 козочка прикреплена к левому краю страницы.

<P>
 Здесь начался новый абзац, но он продолжает
 обтекание.<BR clear=left>

Прикрепить козочку к правому краю Коза можно при помощи align=right. Именно так сделано в этом абзаце.

Предыдущий абзац закодирован так: 

<P>
 Прикрепить козочку к правому краю
 <IMG src=./pic/goat.gif width=84 height=67
      alt=Коза border=0 align=right hspace=10>
 можно при помощи <TT>align=right</TT>. Именно
 так сделано в этом абзаце.<BR clear=right>

Абзац заканчивается тегом BR с атрибутом clear=right, который прерывает обтекание.

В качестве значения атрибута clear можно использовать ключевое слово all. При этом обтекание будет прервано и слева, и справа.

Коза Коза В этом абзаце две козочки. Одна из них прикреплена слева, другая справа. Как видите, обе чувствуют себя превосходно!

Вот код предыдущего абзаца: 

<P>
 <IMG src=./pic/goat.gif width=84 height=67 alt=Коза
      border=0 align=left hspace=10 hspace=10>
 <IMG src=./pic/goat.gif width=84 height=67 alt=Коза
      border=0 align=right hspace=10 hspace=10>
 В этом абзаце две козочки. Одна из них прикреплена
 слева, другая справа. Как видите, обе чувствуют себя
 превосходно! <BR clear=all>

Конструирование

Запустим двух козочек попастись, поместив их в абзац:

Коза Коза

Вот код этого абзаца: 

<P>
 <NOBR>
  <IMG src=./pic/goat1.gif width=90 height=70
       alt=Коза border=0 align=top>
  <IMG src=./pic/goat1.gif width=90 height=70
       alt=Коза border=0 align=top>
 </NOBR>

Как удалить промежуток между картинками? Запишем так: 

<P>
 <NOBR>
  <IMG src=./pic/goat1.gif width=90 height=70
       alt=Коза border=0 align=top
  ><IMG src=./pic/goat1.gif width=90 height=70
       alt=Коза border=0 align=top>
 </NOBR>

Получилось:

КозаКоза

Мы убрали пробел между картинками, сомкнув границы тегов, ведь конец строки для браузера равнозначен пробелу. На самом деле, нужно дополнительно использовать еще и атрибут hspace=0 (свободное пространство слева и справа от картинки). По умолчанию значение этого атрибута не определено, значит, некоторые браузеры могут делать промежуток ненулевым, если атрибут не задан.

Добавим еще две козы, расположив их в новом ряду:

КозаКоза
КозаКоза

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

<P>
 <NOBR>
  <IMG src=./pic/goat1.gif width=90 height=70
       hspace=0 vspace=0
       alt=Коза border=0 align=top
  ><IMG src=./pic/goat1.gif width=90 height=70
       hspace=0 vspace=0
       alt=Коза border=0 align=top><BR
  ><IMG src=./pic/goat1.gif width=90 height=70
       hspace=0 vspace=0
       alt=Коза border=0 align=top
  ><IMG src=./pic/goat1.gif width=90 height=70
       hspace=0 vspace=0
       alt=Коза border=0 align=top>
 </NOBR>

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

Описанные построения часто используют на практике. Наверное, вы обращали внимание, что загружаемая страница часто содержит множество мелких прямоугольников, которые сливаются в единое изображение, когда все картинки загружены в браузер. Зачем так делают? Основная цель — уменьшить килобайтный объем сложной графики. Это тот самый случай, когда закон аддитивности не работает: сумма килобайтов отдельных частей получается меньше веса целой картинки. Объяснение простое: небольшой GIF записывается с меньшим числом цветов в палитре, то есть килобайтный вес получается меньше.

Сочленение частей используют и как замену графической гипертекстовой карте. Большой рисунок разрезают на маленькие части. Каждую из частей обрамляют тегом <A атрибуты><IMG атрибуты></A>, превращая в гипертекстовую ссылку.

Хвостая козочка

Раз уж речь зашла о картинках-ссылках, то не надо делать их хвостатыми:

Хвостатая коза

В браузерах NN-3 и NN-4 синий хвост у козы виден отчетливо. Если вы смотрите страницу в IE, то нажмите левую кнопку мыши на картинке и не опускайте. Хвост обязательно появится.

Код “хвостатой козы” приводится ниже: 

<P>
 <A href=nolink.htm>
   <IMG src=./pic/goatt.gif width=84 height=67
        alt="Хвостатая коза" border=0>
 </A>

Проблема в лишних пробелах и концах строк (которые равнозначны пробелу). Вот так никаких хвостов не будет:

У козы хвоста нет! 

<P
 ><A href=nolink.htm
   ><IMG src=./pic/goatt.gif width=84 height=67
        alt="У козы хвоста нет!" border=0
 ></A>

[содержание] [советы] [IMG-физиология: обязательные атрибуты] [чувствительные картинки]       Иван Сидоров kurs@robotland.pereslavl.ru