Дизайн веб сайтов для веб камер
Проект открыт 15
марта 2007
Последнее обновление - 15 марта 2007
Главная | Новости | Таблицы | Веб дизайн - графика | DHTML веб сайтов | JavaScript и веб | DIV&SPAN в дизайне сайтов | Полный список тэгов | Ссылки | Книги по дизайну веб сайтов | Гостевая книга | Форум | Обратная связь
Главная | Новости | Таблицы | Веб дизайн - графика | DHTML веб сайтов | JavaScript и веб
| DIV&SPAN в дизайне сайтов | Полный список тэгов | Ссылки | Книги по дизайну веб сайтов | Гостевая книга | Форум | Обратная связьВСТАВКА РИСУНКОВ НА СТРАНИЦУ.
Рисунки, безусловно, являются важнейшей частью оформления WEB-страницы. В этой статье мы и рассмотрим коротко вопросы размещения рисунков на этих самых страницах.
Не вдаваясь в подробности, можно сказать, что в инете в основном используются графические файлы двух форматов: GIF и JPG. Это обусловлено тем, что, во-первых,
структура этих форматов наиболее подходит для передачи по сети, и, во-вторых, тем, что именно эти форматы поддерживаются всеми распространенными браузерами.
В этой статье мы рассмотрим вопросы чисто технического характера. Как же заставить браузер нашего посетителя показать ему наш рисунок? Один из способов, а именно: размещение на
странице фонового рисунка, мы уже рассмотрели в статье про тело. Для включения же изображения в определенном месте страницы существует тег <IMG>. Этот тег имеет один обязательный параметр:
SRC="", и несколько необязательных. Параметр SRC="" указывает браузеру адрес, где искать рисунок и в качестве значения должен иметь URL-адрес ресурса, где размещен графический файл.
В простейшем случае этот файл будет размещен в корневом каталоге или в папке IMG Вашего сайта. Необязательные параметры:
Но перейдем к примерам. Предположим, Ваш сайт посвящен аквариуму и у Вас скопилось множество прекрасных фото Ваших питомцев,
которые Вы хотели бы показать на своем сайте. Ну, например, такую: В данном, конкретном случае, это сделано при помощи
тега с такими параметрами: <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= может иметь значения:
Я не буду на примерах описывать действия этих значений, чтобы не перегружать сайт графикой. Вы сами можете поэкспериментировать с этим параметром и выяснить, как действует на положение изображения то или иное
значение. Кстати сказать, что графические файлы имеют довольно большой объем, и, встраивая их в страницу, не забывайте о времени загрузки этой страницы.
Этот же минор при указании размеров 175 на 116, будет выглядеть так:
Но при регулировании размеров изображения в тегах нужно быть внимательным и следить за
соблюдением пропорций, иначе наш минор может, например, очень похудеть:
Лучше, если изображения
будут подготовлены заранее при помощи графического редактора. В том же Photoshop можно не только придать фотографиям нужные размеры, но и отрегулировать яркость, контрастность, цветовой баланс и т.д.
Параметрами размеров изображения очень удобно пользоваться при создании страницы предосмотра, но это - отдельная тема.
Еще два параметра, которые определяют отступ текста от изображения (не путать с рамкой вокруг изображения!):
Обоим параметрам придаются числовые значения желаемого отступа в пикселях.
Вот пока и все о рисунках. Как и предыдущие статьи, эта не претендует на полноту изложения темы, но, я надеюсь, дает первоначальные понятия о способах включения изображений в WEB-страницу.