Работа с изображениями

Работа с изображениями

Графика на Web-сайтах играет важную роль. Нарушая монотонность длинных текстовых страниц, она может передавать смысл контекста, быть элементом эстетики страниц или служить рекламой (немаловажно при коммерческой деятельности). При всех достоинствах изображений ими нельзя злоупотреблять. Причина в том, что большинство пользователей Интернета еще не выбрали высокоскоростной доступ из-за его дороговизны, а большое количество картинок вызывают у них непомерное ожидание при загрузке, которое оборачивается в "предел" терпения. Оптимальный баланс графических файлов - 50-80 kb на каждую страницу. Чтобы уложится в эти рамки сжимайте файлы в формат GIF или JPEG, оптимизируйте готовые изображения в этих форматах (по принципу "размер-качество").

Приступая к описаниям средств языка HTML, предназначенных для размещения изображений на Web-странице, соберите нужные изображения в одну папку. Так Вы сэкономите массу времени.

Для вставки файлы изображений на страницу предназначен один единственный тэг <IMG>. Вот его атрибуты:

• SRC - указывает адрес изображения. Всегда применяется к тегу <IMG>
• WIDTH - ширина изображения. (измеряется в пикселях (px))
• HEIGHT - высота картинки (px)
• ALIGN - способ выравнивания изображения на странице (значения left (влево), right (вправо), top (верх), bottom(низ), middle (середина))
• VSPACE - отступ от текста по вертикали (px)
• HSPACE - отступ от текста по горизонтали (px)
• ID или NAME -присваивает имя (если на изображение делается внутренняя ссылка)
• BORDER - толщина рамки (px)
• USEMAP - карта ссылок
• ALT - комментарии, которые будут видны при наведении мыши на изображение

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

<IMG SRC="img/tchk.gif" WIDTH="5" HEIGHT="5" HSPACE="5" VSPACE="5" BORDER="0" ALIGN="left">

Обратите внимание, что нет закрывающего тега </IMG> .

Габариты изображения следует указывать - реальные, во избежание некорректных отображений картинок на экране.

Особо хотим отметить важный атрибут ALIGN. С его помощью изображение позиционируется по экрану:

• относительно текста (код изображения вставляется в контейнеры <P></P> и <DIV> </DIV>, позиционируясь между собой). Пример: <P ALIGN="left"><IMG SRC=" адрес" ALIGN="right"> текст </P>
• относительно таблицы (код изображения вставляется в ячейку таблицы - контейнер <TD></TD> и выравнивается относительно ячейки)
• относительно пустой страницы

Примечание: Изображение не может быть выровнены по вертикали обычным методом. Для этого поместите его в контейнер <P></P> или <DIV></DIV>, где в последних поставьте " ALIGN" с нужными значениями.

Картой ссылок называется способ применения ссылок при помощи изображения, которое условно разделено на части, где каждая часть служит ссылкой. В его основе используется декартовая система координат, где (0,0) - левый верхний угол изображения. Код таких карт ссылок довольно трудоемкий, если его набирать вручную. Поэтому новичкам советуем обратится к графическим HTML-редакторам, они выводит код ссылки в готовый файл html.

Вместо атрибутов VSPACE, HSPASE, BORDER и ALIGN на практики принято применять каскадные листы стилей.

Чтобы полностью вникнуть в этот процесс одной теории будет маловато, поэтому приступайте к практическим занятиям на своем ПК.