Графические изображения

Свойство clear

Хотя любой вводимый после плавающего изображения текст обтекает изображение, иногда такое поведение может оказаться ненужным. Например, следующий вывод содержит изображение книги и заголовок, который обтекает изображение справа; однако следующий параграф, вместо обтекания изображения, появляется ниже изображения.

Это изображение с заголовком, где изображение смещается влево, а заголовок обтекает его справа.

увеличить изображение
Рис. 5.15. Плавающее изображение с параграфом, выводимым ниже изображения

Код, создающий этот вывод, показан ниже.

<p>Это изображение с заголовком, где изображение смещается влево, а 
      заголовок  обтекает его справа. </p>

<div>
<img src="book.gif" alt="Изображение книги" 
  style="float:left; margin-right:10px; margin-bottom:10px"/>
<b>Figure 1.</b><br/>
<i>The Passion of the Western Mind</i>.
</div>

<p style="clear:left">Этот параграф выводится ниже изображения, а не обтекает 
его ниже заголовка.</p>

Можно убедиться, что элемент страницы всегда появляется у левого или правого поля страницы, если ему присваивается свойство стиля clear. Значением этого свойства может быть left, right, both или none (по умолчанию).

clear

left
right
both
none (по умолчанию)

В предыдущем примере следующему после изображения параграфу задается линейный стиль clear:left. Это означает, что параграф выводится на следующей доступной строке, у которой "очищено" ( "clear" ) левое поле. Поэтому параграф начинается на строке, расположенной сразу под изображением, на первой строке, левое поле которой не занято другим элементом.

Всякий раз, когда элемент страницы смещается влево или вправо, может потребоваться вывод последующего текстового или графического элемента ниже плавающего элемента, а не как часть обтекающего содержимого. Значение свойства clear, присваиваемое этому необтекающему элементу, зависит от положения поля ( left или right ) плавающего элемента. Настройка clear:both обеспечивает, что ни одно поле не занято элементом страницы перед выводом оформленного так элемента.

Графический текст

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

Обычно создается одна буква () или слово для стилизованного вывода. Пример буквы в тексте этого параграфа заимствован из коллекции шрифтов Adobe Rosewood. Большинство пользователей, скорее всего, не имеют в системе этот шрифт. Однако он выводится браузером, так как он был преобразован в графическое изображение и помещен на страницу с помощью тега <img/>.

Таким же образом можно создавать заголовки. С помощью любой графической программы оформите текст и сохраните его как изображение. Затем разместите его на странице с помощью тега <img/>. С осторожностью используйте слишком вычурное оформление, это может отвлекать внимание.

Исключенные атрибуты тега img

Существует ряд исключенных атрибутов тега <img/>, вместо которых используют настройки стиля. Эти атрибуты можно встретить на старых страница Web, но не рекомендуется применять их на новых страницах.

border=<n>

Сплошная черная рамка вычерчивается вокруг изображения с помощью атрибута border. Толщина рамки задается как n пикселей.

align="top|middle|bottom"
align="left|right"

Одна из версий атрибута align управляет размещением текста, окружающего изображение. При использовании align="top", align="middle", или align="bottom", изображение появляется в строке - на той же строке, что и окружающий текст - и сопровождающий текст выравнивается по верху, посредине, или по низу изображения. Эти три атрибута выравнивания идентичны по результату свойствам text-top, middle, и text-bottom стиля vertical-align. Если выравнивание не определено в теге <img/>, то изображение появляется в строке с окружающим текстом, выровненным с нижним краем изображения.

Второй вариант атрибута align управляет обтеканием изображения словами. Когда записывается align="left" или align="right", то изображение появляется возле указанного левого или правого поля страницы и сопровождается текстом, который его обтекает. Тег <img/> должен находиться сразу перед текстом, который его обтекает. Эти выравнивания идентичны по результату свойствам стиля float:left и float:right.

hspace="n"
vspace="n"

Можно добавить дополнительное свободное пространство вокруг изображения, используя один из двух или оба атрибута: hspace (горизонтальный интервал) или vspace (вертикальный интервал), - и задавая для каждого определенное число пикселей. Атрибут hspace задает число оставляемых пикселей пустого пространства с левой и правой стороны изображения; атрибут vspace определяет число оставляемых пикселей пустого пространства сверху и снизу изображения. В отличие от использования настроек стиля margin, невозможно управлять пустым пространством на сторонах изображения по отдельности.

height="n"
width="n"

Размерами изображений управляют атрибуты height и width. Они работают аналогично свойствам стиля, используя значения в пикселях для задания размеров изображений.