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

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

Графика на 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 на практики принято применять каскадные листы стилей.

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

вверх