Поддерживающиеся форматы:*.jpg, *.gif, *.png

Изначально формат Png разрабатывался как альтернатива проприетарного в то время Gif (к его разработке не подпускали никого со стороны). Расшифровывается аббревиатура Png как «portable network graphics» и изначально он был заточен именно для применения в вебе. Формат Png полностью открытый и его описание есть на сайте веб консорциума W3C.

Напомню, что Png является форматом сжатия без потерь, а значит можно спокойно сохранять незаконченное изображений в Png, а затем продолжать его редактирование не боясь получить дополнительные артефакты, как это было в случае формата сжатия с потерей качества Jpg (Jpeg). Существует несколько вариаций Png, каждая из которых призвана выполнять свои задачи:

Png 8 — восьмерка обозначает битность цвета и говорит о том, что при сохранении изображения в Png 8 будет использоваться только 256 цветов по аналогии с уже описанным чуть выше Gif. Т.е. Png 8 разрабатывался как полноценная замена Gif и результаты сжатия изображений в этих двух форматах будут практически идентичными. Так же как и в Gif — в этом формате поддерживается прозрачность, но уже с альфа-каналом.

Png 24 — цифра 24 означает, что на каждый пиксел изображения в этом формате выделяется три цветовых канала по 8 бит каждый (по 1 байту), тем самым реализуется полноцветное формирование изображения. Т.о. с помощью Png 24 вы сможете передавать цвета как есть, без искажений. Даже Jpg (Jpeg) не может этого сделать на все сто процентов. 


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

В Png 32 вы сможете указывать изменение степени прозрачности без всяких MATE цветов, а значит такие изображения будут одинаково хорошо смотреться на абсолютно любых веб страницах с любым фоном.

Графические изображения можно использовать в качестве ссылок таким же образом, как и текстовые строки. В этом случае тег <img/> помещается внутри тега <a>, чтобы сделать изображение реагирующим на щелчок мыши и соединить со страницей или сайтом, указанными в атрибуте href.

Сегментированная графика Для того чтобы сделать сегментированное графическое изображение, вам не потребуются специальные графические редакторы. Вы можете воспользоваться любым редактором, способным сохранять изображение в формате GIF. Нарисовав изображение, определите координаты чувствительных областей, которые будут использованы для ссылок (в пикселах). Каждое изображение может содержать произвольное количество чувствительных областей. Теперь вам нужно подготовить описание этих областей (карту областей), воспользовавшись для этого операторами <MAP> и </MAP>. Оператор <MAP> имеет один параметр - имя карты чувствительных областей сегментированного графического изображения. Между операторами <MAP> и </MAP> располагаются операторы <AREA…>, параметры которых описывают отдельные чувствительные области: <MAP NAME="image_map"> <AREA...> <AREA...> </MAP>

Параметр NAME оператора <MAP> имеет значение buttons. Это название карты чувствительных областей, которое будет использовано при вставке сегментированного графического изображения в документ HTML. Оператор <AREA> имеет три параметра: SHAPE, COORDS и HREF. Параметр SHAPE задает форму чувствительной области. Для этого параметра вы можете указывать следующие значения: Значение параметра SHAPEФорма чувствительной областиRECTПрямоугольная область. Параметр COORDS задает координаты верхнего левого и правого нижнего углов областиCIRCОкружность. Через параметр COORDS передаются три значения: координата центра окружности по оси X, координата центра окружности по оси Y, и радиус окружностиPOLYМногоугольник. Параметр COORDS задает координаты вершин многоугольника в виде пар значенийПараметр HREF оператора MAP задает адрес URL объекта, который должен быть загружен, когда пользователь делает щелчок левой клавишей мыши по чувствительной области.

57. Многокадровое(многофреймовое) представление HTML- документов. Теги определения фреймов. Отображение фреймов в окне браузера. Параметры фреймов. Примеры разных способов оформления html -документов с применением фреймов.

Фреймы представляют собой независимые области окна броузера. Использование фреймовых структур в HTML-документах, позволяет (в некоторых случаях) существенно упростить просмотр материала и навигацию в Web, за счет удобной организации окна броузера и отделения областей просмотра данных от областей управления документами.

Структура фреймовых HTML документов существенно отличается от привычных нам документов, рассмотренных в предыдущих главах. В фреймовых документах структурный элемент BODY.../BODY заменяется набором фреймов, определяемым в контейнере <FRAMESET...</FRAMESET.