Реклама:

Включение графики в web-страницу

Интеграция графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:

<IMG SRC="URL" ALIGN="значение" WIDTH="значение" HIGHT="значение" ALT="текст">

В качестве параметра атрибута SRC указывается путь к изображению в виде либо полного URL (например, http://www.mysite.ru/images/picture.jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например, . ./images/picture.jpg).

ВНИМАНИЕ Указывая URL картинки, внимательно следите за регистром символов, которыми вы записываете расширение файла. Некоторые графические редакторы, такие как Adobe Photoshop, по умолчанию сохраняют изображение в файл с расширением в заглавном регистре, напримерpicture. GIF. Иллюстрация с расширением в URL в строчном регистре(picture.gif) при отображении документа HTML в броузере просто не будет показана на странице.

С помощью атрибута ALIGN картинка позиционируется в документе HTML или в ячейке таблицы. Однако помимо традиционных значений данного атрибута —RIGHT, LEFT и CENTER, — совместно с тегом <IMG> можно использовать и другие параметры атрибута:

ТОР — изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка. Следует учитывать, что различные броузеры интерпретируют данное значение атрибута ALIGN по-разному, в связи с чем при использовании этого параметра возможна неадекватность отображения документа HTML в InternetExplorer и Netscape Navigator.

BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки.

MIDDLE — центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки.

BASELINE — изображение выравнивается по условной «базовой линии». Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Именно с использованием значения ALIGN="baseline" удается добиться оптимального выравнивания иллюстраций для броузеров всех типов.

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

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

И наконец, атрибут ALT содержит некий альтернативный текст, который отображается вместо картинки в броузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в небольшом желтом прямоугольнике наподобие всплывающей «подсказки», если пользователь несколько секунд подержит наведенный на изображение курсор мыши.

Вот пример применения тега <IMG>:

<IMG SRC="/images/sunset.jpg" ALIGN="CENTER" WIDTH="325" HEIGHT="215"А1Т="Красивый закат на берегу Карибского моря">

Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом:

<А HREF="URL документа, на который организуется ссылка">

<IMG SRC="URL изображения" ALIGN-''значение" WIDTH="значение" HEIGHT="значение"

АLТ="Альтернативный текст" BORDER="значение"></A>

Как видите, особых отличий в написании этих команд от их традиционного синтаксиса в данном случае нет, за исключением того, что между тегами <А> и </А>вместо текстовой строки вставляется директива <IMG>. Атрибут BORDER управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение BORDER равным нулю.

Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже:

<А HREF="/hobbie/index.html"> <IMG SRC="/images/hobbie.jpg" ALIGN="BASELINE" WIDTH="315" HEIGHT="226" АLТ="Тематический раздел "Мои увлечения" BORDER="0"></A>

Помимо описанных атрибутов тега <IMG> в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу.

Путешествуя по ресурсам Всемирной сети, вы наверняка неоднократно сталкивались с весьма распространенным дизайнерским приемом использованием графических изображений в качестве своеобразных карт (image map), в которых определенным участкам картинки соответствуют гиперссылки на различные ресурсы сервера. Такие карты можно создать с помощью тега <МАР>, о правилах применения которого мы поговорим в следующем уроке. Однако существует и другой способ реализации этого приема, к которому прибегают в тех случаях, когда включение в код HTML команды <МАР> по каким-либо причинам невозможно. Речь идет о рассечении целого изображения на отдельные фрагменты и «склеивании» его по принципу мозаики в невидимой таблице с назначением отдельным фрагментам картинки свойств гиперссылки при помощи директивы<А>. Иногда данный прием применяется не только при создании элементов, подобных image map, но и при подготовке рисованых заголовков или полей для размещения рекламного баннера.

Однако аккуратно "разрезать" изображение при помощи традиционных графических редакторов, причем так, чтобы готовая «мозаика» правильно вписывалась в таблицу, весьма трудно. В этой задаче web-мастеру помогает специальная утилита — фрагментатор графики ShoeString Picture Dicer (рис. 5.8). Она не только разделит картинку на составляющие так, как это необходимо дизайнеру, но еще и автоматически сгенерирует файл HTML с невидимой таблицей, «склеивающей» изображение в единое целое.

Picture Diser позволяет открывать графические файлы форматов DIB, GIF,JPEG, PCX, TGA и TIFF, сохраняя результат в виде файлов BMP, DIB, PCX,TGA, TIFF, GIF или JPEG. Формат вывода изображений можно задать в меню Output Format.

Рие. 5.8. Интерфейс программы Picture Dicer

После открытия картинки (функция File > Open File) программа спросит вас, в какой директории на винчестере сохранить результат обработки изображения.Левой кнопкой мыши вы можете установить границы вертикального разбиения картинки (они отмечаются на экране линиями с красными стрелками), а правой кнопкой — горизонтальные границы (линии с синими стрелками). Удалить неправильно установленную границу можно щелчком левой кнопки мыши над стрелкой соответствующей линии. После того как все границы размечены, необходимо выполнить команду File > Process Image. Picture Dicer автоматически фрагментирует изображение и сохранит результат в указанной вами директории.