Всё для Учёбы — студенческий файлообменник
1 монета
doc

Лекции «Изображения в HTML» по Информационным технологиям (Савченко В. В.)

ИЗОБРАЖЕНИЯ.

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

Добавление изображений.

Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр SRC, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив в тег IMG контейнер A, при этом вокруг изображения отображается рамка.

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

Далее описаны параметры тега IMG, отвечающие за отображение изображений и их характеристики.

 ALIGN. Управляет положением изображений относительно текста или других объектов на веб-странице.

 ALT. Устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появится раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение. В качестве аргумента параметра ALT служит любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

 BORDER. Изображение, используемое на веб-странице, можно поместить в рамку различной ширины. Для этого служит параметр border. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом рамка добавляется автоматически, толщина ее составляет один пиксел, а цвет рамки совпадает с цветом ссылки. Чтобы убрать рамку, следует задать параметр border=0.

 HEIGHT и WIDTH. Для изменения размеров изображения средствами html предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента – контейнера, где находится IMG. В случае отсутствия родительского контейнера, его роль играет окно браузера. Иными словами, width=100% означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, которые располагаются внутри таблиц.

Ширину и высоту изображения можно менять как в меньшую, так и в большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер изображений остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький так долго загружается. А вот увеличение размеров приводит к обратному эффекту – размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее, хотя качество рисунка при этом ухудшается.

 HSPACE и VSPACE. Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace u vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

 ISMAP. Параметр ismap сигнализирует браузеру о том, что рисунок является серверной картой-изображением. Карты изображения позволяют привязывать ссылки к разным областям одного изображения. Параметр реализуется в двух различных вариантах – серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения. Отправка данных на сервер происходит следующим образом. Необходимо поместить тег IMG в контейнер A, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу. Например, если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.

 LOWSRC. Параметр lowsrc используется для отображения рисунка низкого качества перед полной загрузкой конечного изображения. Такой подход предназначен для снижения времени ожидания пользователя. Предварительно ему демонстрируется изображение в низком разрешении или черно-белый рисунок, который быстро загружается из-за небольшого исходного объема файла. Пока пользователь рассматривает его, происходит загрузка изображения хорошего качества, которое постепенно сменяет первоначальное. Размеры этих изображений обязательно должны совпадать.

 SRC. Адрес графического файла, который будет отображаться на веб-странице. В качестве значения принимается полный или относительный путь к файлу.

Форматы графических файлов.

Широкое распространение для веб-графики получили 2 формата: JPEG и GIF. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве, сослужили им хорошую службу, фактически определив их как стандарт веб-изображений. Есть еще фомат PNG, который также поддерживается браузерами при добавлении изображений и существует в двух ипостасях – PNG-8 и PNG-24. Однако популярность PNG сильно уступает JPEG и GIF.

GIF GIF (Graphics Interchange Format, формат обмена графическими данными) – формат графических файлов, широко применяемых при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.

Особенности

- Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной цветовой палитры.

- Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.

- Формат поддерживает покадровую смену изображений, что делает его популярным при создании баннеров и простой анимации.

- Использует свободный от потерь метод сжатия.

Область применения

Текст, логотипы, иллюстрации с четкими краями, анимированные рисунки, изображения с прозрачными участками, баннеры.

JPEG JPEG (Joint Photographic Experts Group, объединенная группа экспертов в области фотографии) – популярный формат графических файлов, широко применяемых при создании сайтов и для хранения изображений. JPEG поддерживает 24-битный цвет и сохраняет неизменными яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пикселы заполняются определенным цветом.

Особенности

- Количество цветов в изображении – около 16 млн, что вполне достаточно для сохранения фотографического качества изображения.

- Основная характеристика формата – качество, позволяющее управлять конечным размером файла.

- Поддерживает технологию, известную под названием прогрессивный JPEG, при котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

Область применения

Используется преимущественно для фотографий. Не очень подходит для рисунков, содержащих прозрачные участки, мелкие детали или текст.

PNG-8 PNG-8 (Portable Network Graphics, портативная сетевая графика) – формат по своему действию аналогичен GIF. По заверению разработчиков, он использует улучшенный формат сжатия данных, но, как показывает практика, это не всегда так.

Особенности

- Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру 8. При этом можно выбирать, сколько цветов будет сохраняться в файле – от 2 до 256.

- В отличии от GIF, не отображает анимацию на в каком виде.

Область применения

Текст, логотипы, иллюстрации с четкими краями, изображения с градиентной прозрачностью.

PNG-24 PNG-24 – формат, аналогичный PNG-8, но использующий 24-битную палитру цвета. Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и PNG-8, сохраняет детали изображения как, например, в линейных рисунках, логотипах и илиллюстрациях.

Особенности

- Использует примерно 16,7 млн цветов в файле, из-за чего формат применяется для полноцветных изображений.

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

- Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пикселы в изображении неизменными, по сравнению с другими форматами у PNG-24 конечный объем графического файла получается небольшим.

Области применения

Фотографии, рисунки, содержащие прозрачные участки, рисунки с большим количеством цветов и четкими краями изображений.

Рамка вокруг изображения

Когда изображение помещается внутрь контейнера А, то вокруг рисунка браузер автоматически устанавливает рамку, цвет которой совпадает с цветом ссылок. Также рамку можно добавить самостоятельно, воспользовавшись параметром border тега IMG.

Показать полностью…
Похожие документы в приложении