ВСТАВКА РИСУНКОВ НА СТРАНИЦУ.

   Рисунки, безусловно, являются важнейшей частью оформления WEB-страницы. В этой статье мы и рассмотрим коротко вопросы размещения рисунков на этих самых страницах.
   Не вдаваясь в подробности, можно сказать, что в инете в основном используются графические файлы двух форматов: GIF и JPG. Это обусловлено тем, что, во-первых, структура этих форматов наиболее подходит для передачи по сети, и, во-вторых, тем, что именно эти форматы поддерживаются всеми распространенными браузерами.
   В этой статье мы рассмотрим вопросы чисто технического характера. Как же заставить браузер нашего посетителя показать ему наш рисунок? Один из способов, а именно: размещение на странице фонового рисунка, мы уже рассмотрели в статье про тело. Для включения же изображения в определенном месте страницы существует тег <IMG>. Этот тег имеет один обязательный параметр: SRC="", и несколько необязательных. Параметр SRC="" указывает браузеру адрес, где искать рисунок и в качестве значения должен иметь URL-адрес ресурса, где размещен графический файл. В простейшем случае этот файл будет размещен в корневом каталоге или в папке IMG Вашего сайта. Необязательные параметры:

Параметр ALT="" в качестве значения содержит надпись, рассказывающую о содержании изображения для тех посетителей, браузеры которых не поддерживают графику или работают в режиме отключенной графики. Эта же надпись появляется при наведении указателя мышки на изображение.
Параметры WIDTH="" HEIGHT="" в качестве значений имеют размеры изображения по ширине и высоте в пикселях. Эти параметры желательно указывать в коде страницы, чтобы браузер заранее оставлял место для изображения, тогда, при загрузке, страница будет меньше "дергаться". Кроме того, эти параметры можно употреблять для регулирования размеров рисунка в окне браузера.
Параметр BORDER="" прорисовывает рамку вокруг изображения. В качестве значения указывается цифра, указывающая ширину рамки в пикселях.
Параметр ALIGN= определяет положение изображения на странице. О значениях этого параметра необходимо поговорить подробнее.

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

В данном, конкретном случае, это сделано при помощи тега с такими параметрами: <IMG SRC="img/f342.jpg" ALT="Аквариумная рыбка Минор" WIDTH="350" HEIGHT="233" BORDER="0"> и положение рисунка и последующего текста на странице зависит от разрешения экрана, используемых шрифтов и прочих личных настроек браузера. Для того, чтобы поместить рисунок в конкретное место, необходимо применить параметр ALIGN=. Пример:

<IMG SRC="img/f342.jpg" ALIGN=LEFT ALT="Аквариумная рыбка Минор" WIDTH="350" HEIGHT="233" BORDER="0"> и наш рисунок помещается в левой части страницы, а текст, следующий за ним, обтекает его справа. Чтобы прекратить это обтекание и поместить следующий текст ниже рисунка необходимо включить тег <BR> с параметром CLEAR=LEFT, т.е. <BR CLEAR=LEFT>.
Как видите, после этого тега текст печатается ниже рисунка. Аналогично употребляется параметр ALIGN= и при необходимости поместить изображение справа. Кроме того, можно разместить рисунок в нужной части страницы при помощи таблиц.
Кроме упомянутых, параметр ALIGN= может иметь значения:

TOP - выравнивает верхнюю границу изображения по самому высокому элементу текущей строки.
TEXTTOP - выравнивает верхнюю границу изображения по самому высокому текстовому элементу текущей строки.
MIDDLE - выравнивает середину изображения по базовой линии текущей строки.
ABSMIDDLE - выравнивает середину изображения посередине текущей строки.
BASELINE или BOTTOM - выравнивает нижнюю границу изображения по базовой линии текущей строки.
ABSBOTTOM - выравнивает нижнюю границу изображения по нижней границе текущей строки.

Я не буду на примерах описывать действия этих значений, чтобы не перегружать сайт графикой. Вы сами можете поэкспериментировать с этим параметром и выяснить, как действует на положение изображения то или иное значение. Кстати сказать, что графические файлы имеют довольно большой объем, и, встраивая их в страницу, не забывайте о времени загрузки этой страницы.
Этот же минор при указании размеров 175 на 116, будет выглядеть так: Аквариумная рыбка Минор

Но при регулировании размеров изображения в тегах нужно быть внимательным и следить за соблюдением пропорций, иначе наш минор может, например, очень похудеть: Аквариумная рыбка Минор

Лучше, если изображения будут подготовлены заранее при помощи графического редактора. В том же Photoshop можно не только придать фотографиям нужные размеры, но и отрегулировать яркость, контрастность, цветовой баланс и т.д. Параметрами размеров изображения очень удобно пользоваться при создании страницы предосмотра, но это - отдельная тема.
Еще два параметра, которые определяют отступ текста от изображения (не путать с рамкой вокруг изображения!):

HSPACE= - определяет отступ по горизонтали.
VSPACE= - определяет отступ по вертикали.

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

на главную

Copyright © 2001 by Сергей Червонящий.