Рисунки, безусловно, являются важнейшей частью оформления WEB-страницы. В этой статье мы и рассмотрим коротко вопросы размещения рисунков на этих самых страницах.
Не вдаваясь в подробности, можно сказать, что в инете в основном используются графические файлы двух форматов: GIF и JPG. Это обусловлено тем, что, во-первых, структура этих форматов наиболее подходит для передачи по сети, и, во-вторых, тем, что именно эти форматы поддерживаются всеми распространенными браузерами.
Вставка рисунков на страницу
Сообщений 1 страница 7 из 7
Поделиться12007-06-04 21:55:47
Поделиться22007-06-04 21:55:58
В этой статье мы рассмотрим вопросы чисто технического характера. Как же заставить браузер нашего посетителя показать ему наш рисунок? Один из способов, а именно: размещение на странице фонового рисунка, мы уже рассмотрели в статье про тело. Для включения же изображения в определенном месте страницы существует тег <IMG>. Этот тег имеет один обязательный параметр: SRC="", и несколько необязательных. Параметр SRC="" указывает браузеру адрес, где искать рисунок и в качестве значения должен иметь URL-адрес ресурса, где размещен графический файл. В простейшем случае этот файл будет размещен в корневом каталоге или в папке IMG Вашего сайта. Необязательные параметры:
Поделиться32007-06-04 21:56:13
Параметр ALT="" в качестве значения содержит надпись, рассказывающую о содержании изображения для тех посетителей, браузеры которых не поддерживают графику или работают в режиме отключенной графики. Эта же надпись появляется при наведении указателя мышки на изображение.
Параметры WIDTH="" HEIGHT="" в качестве значений имеют размеры изображения по ширине и высоте в пикселях. Эти параметры желательно указывать в коде страницы, чтобы браузер заранее оставлял место для изображения, тогда, при загрузке, страница будет меньше "дергаться". Кроме того, эти параметры можно употреблять для регулирования размеров рисунка в окне браузера.
Параметр BORDER="" прорисовывает рамку вокруг изображения. В качестве значения указывается цифра, указывающая ширину рамки в пикселях.
Параметр ALIGN= определяет положение изображения на странице. О значениях этого параметра необходимо поговорить подробнее.
Поделиться42007-06-04 21:57:10
параметр ALIGN= может иметь значения:
TOP - выравнивает верхнюю границу изображения по самому высокому элементу текущей строки.
TEXTTOP - выравнивает верхнюю границу изображения по самому высокому текстовому элементу текущей строки.
MIDDLE - выравнивает середину изображения по базовой линии текущей строки.
ABSMIDDLE - выравнивает середину изображения посередине текущей строки.
BASELINE или BOTTOM - выравнивает нижнюю границу изображения по базовой линии текущей строки.
ABSBOTTOM - выравнивает нижнюю границу изображения по нижней границе текущей строки.
Поделиться52007-06-04 21:57:29
Я не буду на примерах описывать действия этих значений, чтобы не перегружать сайт графикой. Вы сами можете поэкспериментировать с этим параметром и выяснить, как действует на положение изображения то или иное значение. Кстати сказать, что графические файлы имеют довольно большой объем, и, встраивая их в страницу, не забывайте о времени загрузки этой страницы.
Поделиться62007-06-04 21:57:45
Лучше, если изображения будут подготовлены заранее при помощи графического редактора. В том же Photoshop можно не только придать фотографиям нужные размеры, но и отрегулировать яркость, контрастность, цветовой баланс и т.д. Параметрами размеров изображения очень удобно пользоваться при создании страницы предосмотра, но это - отдельная тема.
Еще два параметра, которые определяют отступ текста от изображения (не путать с рамкой вокруг изображения!):
HSPACE= - определяет отступ по горизонтали.
VSPACE= - определяет отступ по вертикали.
Поделиться72007-06-04 21:58:05
Обоим параметрам придаются числовые значения желаемого отступа в пикселях.
Вот пока и все о рисунках. Как и предыдущие статьи, эта не претендует на полноту изложения темы, но, я надеюсь, дает первоначальные понятия о способах включения изображений в WEB-страницу. Как всегда, я с удовольствием отвечу, если у Вас возникнут вопросы по этой теме.