Вторым по значимости компонентом наполнения Web-страниц после текста,
несомненно, будет графическое оформление. Это различного рода рисунки,
фотографии и, может даже, видеоклипы. Также мы можем использовать звуковое
сопровождение отображения Web-страниц.
Начнем мы с размещения графических изображений. Браузеры в состоянии отображать
только три вида графических файлов. Это файлы форматов GIF, JPEG и PNG.
Файлы формата GIF позволяют создавать анимированные изображения. JPEG-файлы
обычно применяются для сохранения фотографических изображений. Недавно
появившийся формат PNG позволяет совмещать хорошее качество изображения
и маленький объем графического файла. Но после того как изображение было
упаковано в графический файл, его все-таки необходимо каким-либо образом
внедрить в состав Web-страницы.
Для этого применяется тег со множеством параметров. Данный
тег не имеет закрывающей пары, так как он не создает какой-либо области
действия правила отображения, он лишь внедряет в содержимое Web-страницы
графическое изображение. На самом деле графическое изображение может быть
еще и гиперссылкой или, даже, скрывать за собой несколько гиперссылок
но о гиперссылках мы поговорим в следующем разделе этой главы, а пока
разберемся с правилами применения тега
.
Основным и обязательным атрибутом тега является атрибут src.
В качестве значения этого атрибута используется адрес вставляемого графического
файла или, если быть точным, его URL. Если графический файл находится
на том же Web-сервере, то достаточно записать полное наименование файла,
включая путь к нему по вложенным каталогам, т. е. если в той же папке,
что и HTML-файлы с Web-страницами, расположен каталог images с рисунками,
то тег вставки графического изображения приобретет следующий вид:
В этом примере мы используем рисунок формата GIF, находящийся в файле с именем pictl.gif, который, в свою очередь, расположен в каталоге с наименованием images. Следует обратить внимание, что слэши - наклонные черты, наклонены в другую сторону, нежели при использовании их в путях файлов операционных систем семейств DOS и Windows. Дело в том, что изначально Web-серверы базировались на операционной системе Unix, которая и поддерживает файловую систему с подобными слэшами. А сейчас абсолютно неважно, какая операционная система поддерживает сервер с Web-сайтом, все пути записываются одинаковым способом и правильно обрабатываются программным обеспечением сервера.
На заре развития WWW браузеры отображали только текстовую информацию,
никакая графика не поддерживалась. Сейчас они практически не встречаются,
но каждый браузер имеет возможность отключения загрузки графики. Поэтому
всегда следует использовать альтернативное текстовое представление рисунка.
Попросту, необходимо приготовить текст, который будет отображаться вместо
рисунка, если тот не может быть по каким-либо причинам загружен браузером.
Этот текст добавляется к тегу при помощи параметра ait, значением
которого и является искомая текстовая строка, т. е. получится приблизительно
следующая конструкция:
В том случае, если графическое изображение все-таки показывается браузером, текст альтернативного текстового представления отображается в виде «хинта», короткой текстовой подсказки, когда пользователь наводит курсор мыши на искомое графическое изображение.
Впрочем, существует и более развернутый вариант создания подобных текстовых подсказок. При помощи параметра longdesс задается адрес интернет-ресурса, на котором находится полное описание данного графического изображения. В качестве значения этого параметра указывается, естественно, URL ресурса с описанием изображения.
Параметр name позволяет задавать уникальное имя изображения, которое идентифицирует этот элемент оформления Web-страницы. Этот параметр оставлен для целей обратной совместимости, он остался от предыдущих версий стандарта HTML. Сейчас для этих целей все теги используют параметр id.
По умолчанию графическое изображение показывается именно в таком виде, как оно и было создано, с сохранением размеров по вертикали и горизонтали. Однако мы имеем возможность явно задавать размеры рисунка по своему усмотрению. Для этого используются параметры height и width. Как задавать размеры в пикселах или процентном соотношении мы уже знаем. Необходимо отметить лишь, что браузеры стремятся сохранять пропорции рисунка, поэтому явное задание размеров, меняющее пропорции, может быть проигнорировано браузером, и тот выберет такие размеры, которые были бы максимально близки к указанным пользователем, не нарушая пропорций. Поэтому для Web-страниц обычно готовят графические изображения тех размеров, которые будут применяться и при отображении их в составе Web-страниц. И если одно изображение должно отображаться несколько раз с различными размерами, то проще приготовить несколько графических файлов, чем отдавать свои рисунки на самовольное отображение браузеру, который сможет нарушить всю верстку Web-страниц.
При помощи параметров мы можем указывать величину чистого пространства, которое будет отделять графическое изображение от окружающих его других элементов оформления Web-страницы, т. е. фактически, задавать отступ рисунка. Для этого применяются параметры hspace и vspace. Параметр hspace устанавливает отступ по горизонтали в пикселах, a vspace - по вертикали. Обратите внимание, в качестве значений этих параметров могут применяться только численные значения, указывающие расстояния в пикселах. Нулевого значения для этих параметров не предусмотрено, но обычно каждый браузер использует малое ненулевое значение.
А при помощи параметра border мы можем устанавливать толщину границы, окружающей рисунок. Как обычно, значением параметра является число, указывающее толщину в пикселах. По умолчанию используется нулевое значение, делающее границу невидимой.
Также необходимо упомянуть о выравнивании графического объекта относительно обтекающего его текста. Для этого используется параметр align. В качестве его значения может использоваться одно ключевое слово из предопределенного их набора. Значения bottom, middle и top применяются для позиционирования первой строки текста, обтекающего рисунок по вертикали. Значение top смещает ее наверх, bottom- вниз, a middle позволяет центрировать строку по вертикали. Для выравнивания по горизонтали графического изображения применяются значения left и right. Первое значение left, как нетрудно догадаться, смещает рисунок к левому края блока, в котором тот отображается, a right - к правому.
Теперь пришло время на примерах увидеть, как мы можем позиционировать рисунок и комбинировать его с текстом, который должен обтекать искомое графическое изображение.
Листинг 1.11
"http://www.w3.org/TR/htm!4/strict.dtd">
<р>
Это текст, который обтекает рисунок.
Это текст, который обтекает рисунок.
Внешний вид этого HTML-документа при отображении его с помощью браузера показан на рис. 1.11.
Рис. 1.11. Окно браузера с результатом отображения файла, приведенного в листинге 1.11
В этом примере мы использовали чистый тег вставки изображения без каких-либо
дополнительных параметров. Как мы можем видеть, изображение вставляется
сразу после первого предложения, там, где мы и разместили тег .
При этом, если мы уменьшим размеры окна просмотра браузера по горизонтали
так, чтобы первое предложение и рисунок не смогли бы поместиться там на
одной строке, то сначала было бы отображено предложение, а уже под ним
рисунок, прижатый к левому краю окна просмотра. Справа от него начиналось
бы отображение следующего за ним текста таким образом, что базовая линия
строки совпадала бы с нижним краем рисунка.
А теперь добавим к тегу отображения рисунка параметр горизонтального выравнивания. Получившийся код приведен в листинге 1.12.
Листинг 1.12
"http://www.w3.org/TR/html4/strict.dtd">
<р>Это текст, который обтекает рисунок.
align="ieft">
Это текст который обтекает рисунок. Это текст, который обтекает рисунок.
Это текст, который обтекает рисунок.
Как видно, в этом случае опять сначала начинает отображаться текст, затем графическое изображение, прижатое к левому краю, согласно директиве, отданной при помощи параметра align, а справа от рисунка размещается остальной текст (рис. 1.12), т. е. изображение не может занять первую строку, так как текст начинается раньше него. То же самое произойдет, если применить параметр align со значением right, но рисунок окажется лишь прижатым к правому краю окна просмотра, а текст будет обтекать его с левой стороны. Вот и все изменения.
Теперь рассмотрим, как действует выравнивание по вертикали. Хотя параметр выравнивания вставляется в тег рисунка, наибольшие изменения заметны все-таки у текста, окружающего рисунок. Посмотрим действие параметра вертикального выравнивания на примере.
Рис. 1.12. Окно браузера с результатом отображения файла, приведенного в листинге 1.12
Листинг 1.13
"http://www.w3.org/TR/html4/striqt.dtd">
<р>Это текст, который обтекает рисунок.
align="middle">
Это текст, который обтекает рисунок. Это текст,
который обтекает рисунок.
Это текст, который обтекает рисунок.
Результат отображения этого HTML-документа показан на рис. 1.13.
Рис. 1.13. Окно браузера с результатом отображения файла, приведенного в листинге 1.13
В данном примере мы установили вертикальное выравнивание посередине, т. е. первая строка текста, находящегося после тега вставки изображения, отображается в центре по вертикали свободного пространства справа от рисунка. Остальной текст отображается под рисунком. Если бы мы установили для параметра align значение top, то первая строка будет отображаться рядом с верхним обрезом рисунка. А при использовании значения bottom, первая строка текста будет отображаться рядом с нижней границей рисунка. Следует обратить внимание, что браузер распознает только один параметр align, т. е. мы можем указать либо вертикальное, либо горизонтальное выравнивание. Если же встроенных средств позиционирования и выравнивания рисунка не хватает, можно обратиться к процессу верстки с использованием таблиц. Применение таблиц мы рассмотрим в одном из следующих разделов этой главы.
Мы имеем возможность использовать в оформлении Web-страниц видеоролики. Следует быть очень аккуратным с их применением, так как файлы, содержащие эти видеоресурсы, обычно имеют достаточно большой объем. А для того, чтобы удаленный пользователь мог просмотреть их в своем браузере, ему понадобится полностью загрузить этот файл на свою машину. С использованием тех каналов, которые доступны большинству пользователей Интернета, подобная процедура может занять достаточно большое время. А ведь никто из нас не любит ждать загрузки Web-страницы.
Браузеры обычно в состоянии воспроизводить видеофайлы форматов AVI, Real
Video и Windows Media. А внедрение их в состав Web-страницы производится
при помощи все того же тега . Но для указания местонахождения
видеофайла используется параметр dunscr. По умолчанию, внедренный в Web-страницу
видеоклип проигрывается один раз, сразу после полной загрузки страницы.
Но мы имеем некоторые возможности регулировать процесс проигрывания клипа
или давать самому пользователю возможность управления его воспроизведения.
Если в состав тега мы включим параметр start, то мы сможем
явно указывать событие, после которого браузер должен будет воспроизвести
загруженный видеоклип. В качестве значений данного параметра могут использоваться
ключевые слова mouseover и fileopen. Первое из них указывает, что клип
необходимо воспроизвести после того, как пользователь поместит курсор
мыши на пространство, отведенное под видеовставку, а второе - что воспроизведение
начнется сразу после полной загрузки HTML-файла. Впрочем, мы можем сочетать
эти два варианта. В этом случае, тег вставки видеоролика будет выглядеть
следующим образом:
Мы можем указывать, сколько раз необходимо воспроизвести видеоролик, используя для этой цели параметр loop. В качестве значения этого параметра используется число, устанавливающее количество повторения видеоклипа. Впрочем, если мы хотим, чтобы видео воспроизводилось постоянно, без какого-либо фиксированного количества повторений, то следует использовать значение infinite. А при помощи параметра loopdelay мы можем устанавливать временную задержку между повторами воспроизведения видеоклипа. Значением данного параметра является число, указывающее промежуток времени в миллисекундах. Рассмотрим применение этих параметров на примере следующего фрагмента кода:
Здесь мы явно указываем, что видеоклип будет воспроизведен два раза сразу после загрузки Web-страницы с пятисекундной задержкой между воспроизведениями.
В данном случае мы сами управляем отображением видеофайла. Но мы можем
передать эту прерогативу и удаленному пользователю, который будет загружать
Web-страницу. Для этого необходимо ввести в состав тега параметр
controls без какого-либо значения. Наличие этого параметра в теге явно
указывает, что вместе с видеоклипом на Web-странице будут отображены и
органы управления воспроизведения.
Рассмотренных нами параметров вполне хватает для правильного внедрения видеофайлов в состав содержимого Web-страницы. Рассмотрим детальный пример (рис. 1.14).
Листинг 1.14
"http://www.w3.org/TR/html4/strict. dtd">
.
<р>Обычный текст.
Рис. 1.14. Окно браузера с результатом отображения файла, приведенного в листинге 1.14
Естественно, так как процедура вставки видеофрагмента в тело Web-страницы
является частным случаем вставки графики, то к тегу вставки видеофрагмента
применяются и все остальные параметры, применимые к тегу ,
такие, как параметры выравнивания, явного указания размера и прочие.
К мультимедийным возможностям относятся и звуковое оформление Web-страницы. Но звук мы можем использовать лишь в качестве фонового формления, т. е. некий звуковой файл будет воспроизводиться на компьютере удаленного пользователя после того, как тот загрузит Web-страницу. Если, конечно, в его компьютере установлена звуковая плата, т. е. изначально на компьютер удаленного пользователя загружается HTML-файл с Web-страницей, а затем подгружаются все остальные файлы, используемые в оформлении этой Web-страницы, такие как графические файлы, видeo- и аудиоклипы.
Итак, для того, чтобы просмотр Web-страницы сопровождался звуковым воспроизведением,
необходимо в код страницы вставить тег
Как и в случае с видеоклипами, мы можем задавать количество воспроизведений звукового файла при помощи параметра loop. В качестве значения этого параметра используется число повторений. Если необходимо воспроизводить аудиофрагмент постоянно, следует использовать значение "-1", т. е. если мы хотим, чтобы при загрузке Web-страницы непрерывно проигрывался некий аудиофайл, следует воспользоваться следующей конструкцией:
На этом мы заканчиваем рассмотрение вопросов использования мультимедийных и графических объектов в оформлении Web-страниц и переходим к следующей части первой главы.
Одна из наиболее привлекательных черт WWW – возможность включения ссылок на графические и мультимедийные файлы, которые делают web-страницу более привлекательной и интересной. Это могут быть значки, рисунки, фотографии, карты изображений, а также использование аудио-, видео- и анимационных данных.
2.2.1. Вставка графики в html-документ
Значение графических изображений в аспекте создания электронных документов невозможно переоценить, документы становятся более выразительными и яркими и будут восприниматься легче и естественнее. Однако всегда и во всем следует помнить о чувстве меры. Перенасыщение документа иллюстративным материалом будет неоправданно отвлекать внимание пользователей от истинного содержания страницы, а еще приводит к тому, что страница будет медленнее загружаться из-за наличия большого количества рисунков.
Графические компоненты web-страницы по назначению можно условно разделить на три обширные категории:
– иллюстративная графика , включая дополняющий текст фотографии, пояснительные рисунки, чертежи, схемы;
– функциональная графика , представляющая собой элементы управления (кнопки навигации, счетчики и элементы интерактивных форм);
– декоративная графика – элементы дизайна страницы, включенные в нее для красоты и не несущие информационной нагрузки (фоновые рисунки, разделители, выполненные в виде графических файлов, заголовки и многое другое).
Графические форматы. В связи с использованием Интернета для загрузки графического изображения требуется определенное количество времени. И чем меньше это время, тем удобнее пользователю. Поэтому для графических изображений сейчас используют три самых популярных формата GIF, JPEG и PNG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря которым удается значительно уменьшить размер целевого файла.
GIF -формат. В 1978 году израильские исследователи Якоб Зив и Абрахам Лемпел разработали новый для того времени алгоритм сжатия информации без потери данных (LZ78 – название проекта). Через несколько лет американский программист Терри Уэлч усовершенствовал его (LZW) и также представил свою разработку для использования всем желающим.
В 1987 году Боб Берри на основе алгоритма LZW создал принципиально новый графический формат GIF. Суть алгоритма сжатия: уменьшение размера графического файла достигается путем смешения сходных оттенков в один, информация об изображении в файле GIF записывается построчно, т. е. представляет собой массив описаний строк высотой в один пиксел. Свойства: смешение сходных оттенков в один, оперирование фиксированной палитрой 256 цветов.
GIF формат используется в HTML-документе только для отображения бизнес-графики: диаграмм, логотипов, кнопок, других элементов оформления страницы – и рисунков с палитрой цветов 256.
Еще одно свойство GIF – чересстрочность, т. е. картинка загружается не целиком, а частями (считывается 1-я, 5-я, 10-я строки, затем 2-я, 6-я, 11-я и т. д.), т. е. как бы проявляется.
В 1989 году компания CompuServe выпустила новую версию GIF89а, которая использует для создания изображения прозрачного фона методом сохранения вместе с файлом так называемого «альфа-канала» – представляющего собой маску прозрачности рисунка. Цвета, насыщенные как прозрачные, в браузере становятся невидимыми.
Другая особенность GIF89а в том, что этот формат позволяет сохранять в формуле с одним физическим заголовком несколько разных изображений, демонстрируя их на экран последовательно один за другим.
JPEG -формат. Для размещения фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG. JPEG-формат, созданный на основе одностороннего алгоритма сжатия изображений с потерей качества, кодирующий не идентичные элементы, как алгоритмы LZW, а межпиксельные интервалы.
Механизм сжатия состоит из трех ступеней.
Изображение преобразуется в цветовой образ LAB, раскладывающий картинку на три независимых канала: L – сохранение интенсивности цветов, А и В – для запоминания цветовой информации.
Компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки 8×8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация – менее заметные оттенки.
На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хоффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двухбитной кодировкой.
Декомпрессия формата JPEG осуществляется в обратном порядке.
Максимальное количество цветов, которое может содержать изображение в формате JPEG, – 16 миллионов.
PNG -формат. Этот формат был разработан в 1995 году, чтобы прийти на смену формата GIF после действий компании Unisys по защите авторских прав на алгоритм сжатия LZW. Одновременно были разработаны некоторые технические характеристики, в частности улучшение качества и увеличение количества поддерживаемых цветов.
Включение графики в web -страницу. Интеграция графики в HTML-документ осуществляется с использованием одиночного тега < IMG>.
Атрибут SRC (источник) задает URL-адрес изображения (рис. 2.3).
Рис. 2.3. Пример отображения примера с тегом < IMG>
Данный атрибут относится к числу обязательных в теге < IMG> (табл. 2.2).
Таблица 2.2
Атрибуты тега < IMG >
|
Назначение |
Значение атрибута |
Примеры записи |
|
|
Адрес изображения |
|
||
|
Позиционирование объектов на экране (необязательный атрибут) |
выравнивание LEFT– слева RIGHT– справа MIDDLE– по линии строки TOP– по верху BOTTOM– по низу |
|
|
|
Ширина рисунка (необязательный атрибут) |
в пикселях |
|
|
|
Высота (необязательный атрибут) |
в пикселях |
|
Окончание табл. 2.2
|
Назначение |
Значение атрибута |
Примеры записи |
|
|
Всплывающая подсказка (необязательный атрибут) |
содержит некий альтернативный текст |
|
|
|
Обрамление изображения |
толщина в пикселях |
|
|
|
Пустое пространство над изображением |
в пикселях |
|
|
|
Пустое пространство слева и справа |
Значение в пикселях |
|
HEIGHT="215" BORDER="5" ALT="лилия">
Использование тега в данном примере позволяет поместить изображение из файла по правой стороне окна браузера, задает размер этого изображения и помещает его в рамку (см. рис. 2.3).
Графика на WEB ‑страницах
Введение
Безопасная палитра
Некоторые форматы записи графики на Web‑страницах
Типовые графические элементы Web‑страниц
Введение
Визуальное представление позволяет осуществлять наиболее быструю передачу информации, обеспечивая также быстрое её восприятие наблюдателем (читателем) как непосредственно, так и с использованием принятых в мировой культуре источников информации (книги, газеты, кино, телевидение, Интернет). Манипулируя цветом, контрастом и символами, можно за долю секунды вызвать у наблюдателя ощущение тепла либо холода, спокойствия или напряженности, а вместе с тем даже передать некоторые сведения. Важную роль в графической передаче информации играют ассоциации – определённые образы, всплывающие в сознании пользователя в моменты, когда он видит некоторые символы или систему графических объектов.
Стиль Интернет-сайта определяется сочетанием текста, графики и активных элементов (формуляры, диалоговые окна, мультимедиа). Существенным является также подбор компонентов, их свойств (размер, цвет) и способов размещения на странице.
Цвета
В настоящее время RGB является самым популярным способом задания цвета и практически в каждой графической программе существует возможность описания цвета этим форматом. Комбинация трёх однобайтовых значений (24 бита) позволяет определить 16,7 млн. цветов (точнее 2 24).
HSL (Hue, Saturation, Luminance, т.е. оттенок, насыщение, яркость) – это палитра красок, определяемых сочетанием не основных цветов (как это имеет место для RGB), а оттенка, насыщения и яркости. Этот условный способ описания цвета намного более интуитивен и близок естественному восприятию цветов человеком. Значительно легче изменить оранжевый цвет на жёлтый, изменяя оттенок, насыщение и яркость, чем подбирать нужное сочетание красного, зелёного и синего.
· CMY, CMYK
Палитра CMY (Cyan, Magenta, Yellow, т.е. сине-зелёный, пурпурный, жёлтый) – ещё один способ определения цвета. Он составляет альтернативу RGB. Палитра CMY, расширенная черным цветом, обозначается CMYK и повсеместно применяется печатающими устройствами.
Безопасная цветовая палитра
Безопасная цветовая палитра – это набор из 216 цветов, общих для всех инструментальных платформ. Каждый из них может быть задан однобайтовым кодом. Их 216 потому, что 8‑битовое определение позволяет задать 256 цветов (2 8). Однако принято, чтобы поле в 40 и цветов было зарезервировано для операционной системы, тогда 216 цветов остаются для применения в прикладных программах пользователей. Картинки, отображаемые на мониторах компьютеров, способных правильно передать 256 цветов (8-битовая графика), отображаются правильно (и предсказуемо) и при условии применения 216 безопасных цветов. Остальные краски передаются как смесь компонентов из безопасной палитры.
Вопрос адекватного отражения цветов имел большое значение несколько лет назад, когда в повсеместном использовании были компьютеры с 8-битовой графической картой. Хорошим тоном считалось применение на Web‑страницах именно безопасного цветового набора. Теперь же мы все пользуемся 24-битовой графикой. Поэтому кажется более целесообразным использовать всю полноту возможностей, представляемых современными компьютерами, и применять на Web‑страницах различные сочетания цветов, в том числе и тех, что выходят за рамки безопасной палитры.
Некоторые форматы записи графики на Web ‑страницах
GIF (GraphicInterchangeFormat – Графический формат обмена) – один из первых графических форматов. Он и сегодня продолжает оставаться самым часто применяемым форматом записи графики и простой анимации для Интернет-сайтов. Формат GIF разработан фирмой CompuServ (онлайновая информационная служба). В 1987 году вышла его первая версия GIF‑87. Дальнейшая работа над расширением возможностей записи изображений увенчалась созданием новой версии GIF‑89а. В этой новой версии появились возможности определения выбранного цвета как прозрачного, чересстрочной загрузки и записи анимации. Важным достоинством формата GIF является его универсальность – на сегодняшний день все Интернет-браузеры поддерживают отбражение картинок в формате GIF.
Графика, записанная в формате GIF, компрессируется с использованием алгоритмов LZW (Lempel-Ziv-Welch). Этот алгоритм безутратной компрессии (сжатия), основанный на устранении избыточности информации, поэтому картинка отображается на 100% в соответствии с оригиналом. Компрессия заключается в отыскании повторяющихся последовательностей точек и записи информации о размерах этой последовательности и месте её начала. Этот способ позволяет значительно снизить размер файлов при записи изображений, имеющих довольно большие одноцветные участки.
GIF‑89а состоит: из заголовка и блоков данных. В заголовке отображаются: версия формата GIF, предпочтительные параметры картинки – высота, ширина, размер палитры, разрешение, цвет фона. Отдельные байты содержат информацию о глобальной цветовой палитре – каждый цвет это 3-байтовое значение, которым задаётся цветовое сочетание RGB. За заголовком следуют контрольные блоки, блоки изображения и дополнительные блоки.
1) В контрольном блоке находится информация о продолжительности экспозиции (времени показа на экране) и способе перехода от картинки к картинке. Формат GIF‑89а позволяет записывать много изображений в одном файле и задавать значения экспозиции и цикличности анимации.
2) Блоки изображения (их может быть несколько, если в файле записана анимация) содержат детальное описание параметров картинки, локальную цветовую палитру (если она отличается от глобальной палитры) и компрессированные данные о последовательностях точек изображения.
3) Дополнительный блок содержит данные, которые не отображаются, например комментарий, связанный с данной картинкой.
Ограничением формата GIF является размер цветовой палитры – максимум 256 цветов, то есть цветовая палитра может иметь размер от 2 1 по 2 8 , или 2, 4, 8, 16, 32, 64, 128 и 256 цветов. На практике это означает, что если на картинке появляется 7 цветов, то при использовании палитры размером 16 цветов часть полей палитры остаётся не задействованными. В этом случае редукция цветовой палитры до величины 8 не приведёт к потере качества, но позволит уменьшить размер файла записи картинки. Операция сужения цветовой палитры – обычная опция записи файла в формате GIF.
Кодировка LZW позволяет воспроизвести компрессированное изображение точно таким, каким оно было до компрессии. Подобные алгоритмы компрессии называются «безутратными», в отличие от «утратных» алгоритмов, которые предполагают потерю части информации об изображении. Сжатие LZW уменьшает размер файла GIF так эффективно, что на практике становится невыгодной дополнительная архивация и компрессия файлов этого типа программами ZIP, ARJи т.п. сжатием изображения занимаются графические программы.
В 1990 году Объединенной группой экспертов в области фотографии (JointPhotographicExpertGroup, JPEG) была предложена схема сжатия, которая впоследствии завоевала всеобщее признание, как стандартный метод обработки неподвижных изображений. JPEG – это алгоритм сжатия изображений. Но общепринятым стало применение названия JPEG к файлам, записанным в формате JFIF (JPEGFileInterchangeFormat). JPEG (или JFIF) – это формат записи изображений, применяемых как на Интернет-сайтах, так и для типографской печати, а также в цифровой фотографии.
Процесс компрессии изображения в формате JPEG идет в несколько этапов:
1) Если нужно, то сначала происходит конвертация данных о точках изображения из системы RGB в систему YCbCr, которая аналогична HSL, позволяет выразить яркость цвета.
2) Уменьшение в два раза ширины шкалы Cb и Cr (свойства цвета) при сохранении оригинальной шкалы яркости Y. Сужение шкалы происходит путём усреднения значений Cb и Cr соседних пикселей.
3) Анализ блоков изображения: 8*8 пикселей. С помощью дискретного косинусного преобразования (ДКП) производится округление значений изменения яркости цвета.
4) Массив данных, которым приближённо описывается оригинальное изображение, может быть подвергнут очередной компрессии (на этот раз безутратной), поскольку в результате округления появилось много одинаковых значений.
Выгодой алгоритма компрессии, применяемого в формате JPEG, особенно ощутим при обработке больших многоцветных изображений (например, фотоснимков). Для малых изображений (иконок) или картинок с преобладанием одного цвета лучше применять формат GIF.
Формат JPEG не поддерживает чересстрочную загрузку, но здесь есть возможность записи файла в прогрессивной форме. Просмотр крупного файла, записанного в прогрессивной форме JPEG, предполагает быстрое отображение картинки худшего качества, постепенное улучшение которого происходит по мере считывания очередных порций файловой информации. Это имеет большое значение для тех, кто публикует фотоснимки, карты и т.п. Быстрый просмотр картинки немного худшего качества даёт возможность решить, стоит ли ожидать дальнейшей загрузки, или можно прервать передачу изображения в браузер.
Формат BMP (Bitmap, Битовая карта) является очень простым способом записи графики для применения в системе Windows.
Вообще, этот формат в Интернете не применяется. BMP – это внутренняя графическая система Windows. В частности, в этом формате записываются «копии экрана». Достаточно нажать клавиши
Именно благодаря графике на Web-страничках WWW стала самым популярным сервисом Internet, именно ей мы обязаны всему этому многообразию страничек.
Особенностью в графике, применяемой на web-страничках, является то, что она имеет свои определенные ограничения, с которыми мы должны считаться и извлекать из этого выгоду.
Для использования в Web-сайтах применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится "пинг"), но он пока еще мало распространен, и не все браузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.
Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.
Формат GIF
Поддерживает не более 256 цветов (меньше можно и часто нужно);
Использует палитру цветов;
Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы практически не сжимаются);
Поддерживает чересстрочную развертку;
Является поточным форматом, т.е. показ картинки начинается во время перекачки;
Позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIF-ов;
Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIF-ов;
Поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах:), осуществлять задержку между показами изображений и т.д.
А теперь немножко разъяснений - к чему эти свойства могут привести. GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если нужно разместить красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если необходимо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов. А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.
Формат JPEG
Позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов (или 24bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение; Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов; Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается. Пожалуй, это все преимущества формата JPG, и основное его предназначение - хранение изображений фотографического качества.
Оптимизация графики
Вся работа по обработке графики делается в промежуточном формате
Рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делается в промежуточном формате (хотя он и обладает большими размерами файла) и только на самом последнем этапе преобразуется изображение в нужный формат (часто - одновременно с оптимизацией размера файла).
Для web-страниц очень важным является вопрос размера фотографии. Какого размера их делать? Не будут ли они слишком долго грузиться? При оптимизации можно уменьшить размер файла, но вряд ли стоит оптимизировать фотографию, не несущую смысловой нагрузки. Самый первый этап оптимизации - выделение в фотографии главного (с отбрасыванием всего остального) и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение, и в этом случае оно действительно будет иметь наименьший размер.
А с размерами фотографий нужно придерживаться определенного компромисса - не делать их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не стоит делать их слишком огромными, чтобы время не растягивать в вечность. Хотя, разумеется, есть исключения: правильно оптимизированная большая фотография может занимать время пересылки, эквивалентное времени пересылки обычной фотографии и, наоборот, дурно оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной фотографией можно считать фотографию размером примерно 250x300 пикселей и занимающую порядка 6-10 килобайт. Это не значит, что все фотографии должны иметь такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации относятся к "иллюстрирующим" текст фотографиям и не относятся к рисункам, выполняющим функции элементов навигации.
Практическая работа № 2
Вставка изображений в HTML-документ
Цель работы. Знакомство с основными тегами для вставки изображений в HTML-документ, изучение атрибутов для преобразования изображений в документе.
Литература. Конспект лекций.
3. Подготовка к работе. Изучить конспект лекций по теме "Графика".
Перечень оборудования. Компьютер.
Задание.
5.1. Ознакомиться с основными тегами для вставки изображений в HTML-документ.
5.2. Изучить основные атрибуты для преобразования изображений.
5.4. Научиться оформлять изображения в web-страницах.
Порядок выполнения работы.
6.1. Вставка изображений на web-страницу.
1. Откройте программу Paint и создайте в нем три рисунка по образцу: каждый рисунок – в отдельном файле.
 |  |
Рис.1 Рис.2 Рис.3
Сохраните эти файлы под именами bloc1.gif, bloc2.gif, bloc3.gif в вашей папке.
2. Откройте текстовый редактор Блокнот и создайте web-страницу в соответствии с образцом:
Код web-страницы:
algoritm.html .
6.2. Создание горизонтальных линий и других объектов.
1. Откройте текстовый редактор Блокнот и создайте 2 web-страницы в соответствии с образцом:
Фрагмент кода web-страницы:
3. Сохраните полученный документ в вашей папке, присвоив файлу имя linii.html .
4. Запустите браузер Internet Explorer. Просмотрите в нем полученную web-страницу.
5. Создайте вторую web-страницу.
Фрагмент кода web-страницы:
6. Сохраните полученный документ в вашей папке, присвоив файлу имя list.html .
7. Запустите браузер Internet Explorer. Просмотрите в нем полученную web-страницу.
Создание карты изображений и вставка бегущей строки.
1. Создайте web-страницу, используя следующее изображение. Оно находится на Рабочем столе в папке Практические работы по НTML.
2. Создайте карту изобрадения таким образом, чтобы при наведении мыши на определенное устройство компьютера выводилось его название.
3. На этой же странице создайте бегущую строку:
Любишь играть в компьютерные игры, люби и сам программировать!
4. Сохраните полученный документ в вашей папке, присвоив файлу имя саrta.html .
5. Запустите браузер Internet Explorer. Просмотрите в нем полученную web-страницу.
7.1. Файлы algoritm.html , linii.html, list.html, саrta.html в вашей папке.
8. Контрольные вопросы.
8.1. Какой тег служит для вставки изображений в HTML-документ?
8.2. Какой атрибут позволяет указать имя файла с изображением?
8.3. Какие атрибуты позволяют задать размеры картинки?
8.4. Какой атрибут позволяет задать положение изображения относительно окружающего текста?
8.5. Какой атрибут позволяет задать толщину рамки вокруг картинки?
8.6. . Какие атрибуты определяют величину свободного пространства слева, справа, над и под картинкой?
8.7. С помощью какого тега создаются карты изображений? Какие используются атрибуты?
8.8. Какой тег предназначен для создания бегущей строки?
Приложение.
Графика
Размещение графики на Web-странице. Форматы графических файлов
В Интернете наиболее популярны два графических формата: GIF и JPEG.
Обычно используют:
JPEG – для фотографий и очень сложных по цветовой гамме рисунков с плавными цветовыми переходами (в расширении записывается как JPG).
GIF – для логотипов, надписей, заголовков, рисунков, имеющих четкие цветовые граница.
Формат GIF
Картинки в этом формате поддерживают 256 цветов. GIF-формат имеет три дополнительные возможности:
Мультипликация. Используя анимационный GIF-редактор, легко собрать простой «мультик»: нарисовать отдельные кадры, настроить время задержки в последовательности показа, «зациклить кино» или показывать кадры только один раз. Когда анимация готова, она записывается на диск как обычный GIF-файл. Но в этом файле не одна, а целая коллекция GIF-картинок и разная настроечная информация.
В HTML нет различия между заданием вывода на экран простого GIF или анимированного.
Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательным образом:
Чересстрочная развертка. Применяется для больших GIF. Иллюстрация разделяется на четыре части, размером с оригинальную картинку. Первая часть содержит 1, 5, 9-ю и т.д. строки исходного изображения. Вторая – 2, 6, 10-ю и т.д. Третья – 3, 7, 11-ю и т.д. Четвертая – 4, 8, 12-ю и т.д.
Браузер строит на экране сначала первую часть картинки, потом которую, затем третью и четвертую. Получается эффект постепенного проявления изображения.
Формат JPEG
Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества.
Конечно, высокое качество отражается на размерах файла. Но формат JPEG имеет одну особенность: в JPG-редакторе при записи на диск можно указать ту степень качества, которая нужна и, тем самым, балансируя на планке «качество-размер файла», достичь нужного компромисса. В самом деле, если из миллиона цветов отсканированной фотографии оставить только 10 000, заменив остальные цвета на близкие, - на глаз такую подмену обнаружить будет практически невозможно, а размер файла существенно сократиться.
JPEG-формат поддерживает режим, похожий на чересстрочную развертку GIF. Но в отличие от GIF, деление на части происходит не по строкам, а по алгоритму выделения из картинки полноформатных частей. При этом каждая следующая часть по качеству выше предыдущей. JPEG с таким свойством называется прогрессивным.
Элемент
Элемент используется для вставки в тело документа графического изображения.
Синтаксис:
Кроме того, элемент
поддерживает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web
страницы в целом. Изображение может выравниваться по левой, правой, верхней или нижней границе строки или располагаться в центре окна.
Атрибуты:
src
(указывает на файл графики, задавая его URL).
Синтаксис:
alt
(вместо изображения отображает альтернативный текст типа здесь нарисован логотип фирмы).
Синтаксис:
align
(задает расположение рисунка в окне и его выравнивание, может принимать значения: top
-по верхнему краю, bottom
-по нижнему краю, middle
-по центру, right
-справа, left
-влево).
Синтаксис:
width (задает ширину области в пикселях, отводимой в окне под изображение).
Синтаксис:
height (задает высоту области в пикселях, отводимой в окне под изображение).
Синтаксис:
hspace
(задает пустое пространство в пикселях справа и слева от рисунка).
Синтаксис:
border
(задает в пикселях толщину рамки вокруг рисунка).
Синтаксис:
vspace
(задает пустое пространство в пикселях сверху и снизу от рисунка).
Синтаксис:
ismap
(разрешает использовать изображения, отдельные части которого связаны со ссылками и позволяют выполнять переходы. Такие рисунки называют MAP карта, они используются совместно с элементом . В этом случае реакцию на щелчок по карте отрабатывает сервер).
Синтаксис:
usemap (разрешает использовать изображения, отдельные части которого связаны с картами, они используются совместно с элементом
Карты изображений.
Элемент
Элемент
Синтаксис:
Элемент
Элемент задает активные области карты, щелчком по которым можно осуществить ссылку. Элемент не имеет конечного тэга. С изображениями карт удобно работать в стандартном приложении для Windows - редакторе Paint , для него изображение должно быть трансформировано в формат BMP. Используя сетку в режимах увеличения нажатием Ctrl+G и выбрав инструмент Выделение, когда указатель мыши принимает вид тонкого крестика, координаты курсора можно определить с точностью до одного пикселя. Такая точность может очень пригодиться при задании координат активных областей карты. Элемент поддерживает различные атрибуты:
Синтаксис:
alt
(задает альтернативный текст для браузеров, которые не поддерживают данный элемент).
Синтаксис:
title (задает альтернативный текст для браузеров, который всплывает при наведении курсора на данный элемент).
Cинтаксис :
shape
(задает форму активной области на карте и её координаты, он может принимать значения: "circle" coords=X,Y,R, где X,Y,R - координаты центра круга и его радиус, "poly" coords=X1,Y1,X2,Y2,X3,Y3..., гдеX1,Y1,X2,Y2,X3,Y3... - координаты вершин многоугольника, если многоугольник - прямоугольник, то достаточно указать его верхнюю левую и правую нижнюю вершины "rect" coords=X1,Y1,X3,Y3).
Синтаксис:
circle
" coords=X,Y,R
>
Пример изображения - карты:
