Графика на WEB-странице в HTML. Представление графики на Web-страницах Атрибуты тега IMG
Одна из наиболее привлекательных черт 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-странице.
Цель работы: Научиться внедрять в html-документ графические изображения.
Теоретическая часть: Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тега . Использование этого тега позволяет значительно улучшить внешний вид и функциональность документов.
Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тега:
URL " ALT="text " HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop >
Элементы синтаксиса тега:
Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.
ALT="text"
Этот необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. тег ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.
HEIGTH=n1
Этот необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.
WIDTH=n2
Параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселах.
Этот параметр используется, чтобы сообщить броузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство броузеров располагает изображение в левой части экрана, а текст справа от него.
С версии HTML 2.0 у тега появились дополнительные параметры:
URL " ALT="text " HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5>
Новые параметры:
Позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.
То же самое, что и VSPACE, но только по горизонтали.
Фоновые рисунки
Большинство броузеров позволяет включать в документ фоновый рисунок, который будет отображаться на фоне всего документа. Описание фонового рисунка включается в тег BODY и выглядит следующим образом:
Ход работы :
Размещение графики на Web-странице.
#FFFFFF" TEXT="#330066">
Расписание
занятий на вторник
Самостоятельно внесите изменения в файл schedule. html , опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH. Пример использования атрибутов приведен в таблице ниже:
Атрибут | Формат | Описание |
Надпись "картинка" выводится на экран при подведении указателя мыши к изображению. |
||
Задает рамку вокруг изображения толщиной 3 пикселя. |
||
Выравнивает изображение относительно текста по верхней границе текста. |
||
Вертикальный размер изображения принудительно устанавливается в 111 пикселей. |
||
Горизонтальный размер изображения принудительно устанавливается в 220 пикселей. |
||
Атрибут добавляет верхнее и нижнее пустые поля высотой 8 пикселей. |
||
Добавляет левое и правое пустые поля шириной 8 пикселей. |
Фоновое отображение графики на Web-странице
Поместите файл back. jpg в ту же папку, что и schedule. html . Внесите изменения в файл schedule. html :
Расписание
занятий на вторник
На экране вы увидите:
https://pandia.ru/text/78/365/images/image003_82.jpg" width="300" height="197 src=">
Линейки и буквицы
Графические элементы возможно применять в качестве различного вида "украшений". Если Вы придумаете что-нибудь оригинальное, ваша веб-страница будет смотреться необычно и запомнится посетителю. Вот несколько ставших уже традиционными вариантов такого применения графики.
Во-первых
, это различные графические разделители, обычно горизонтальные, применяемые вместо горизонтальной черты (
).
Вот так он выглядит в окне браузера:
Хотя тег
и поддается настройке, графический разделитель вместо
часто выглядит лучше:
r. gif" WIDTH="60" HEIGHT="59" BORDER="0" АLТ="В">
В", чтобы пользователю с отключенной графикой не приходилось строить догадки относительно первой буквы.
Разместите в Вашем документе schedule. html разделитель anim_hr. gif. Задайте этому изображению высоту, равную 2 пикселям. Сместите анимированный разделитель в центр документа. В слове Расписание замените букву Р изображением, взять его Вы можете в папке с лабораторными работами (файл r. gif). Изменяя значение атрибута ALIGN, добейтесь наилучшего расположения буквы на экране. Используя любой графический редактор, создайте свое, альтернативное, изображение буквы Р и встройте его в документ.
Графические маркеры.
Язык HTML позволяет создавать маркированные и нумерованные списки.
Пример маркированного списка:
Пример нумерованного списка:
5. элемент списка
6. элемент списка
8. элемент списка
В терминах языка HTML это выглядит так:
Одно дело, когда маркерами списка являются стандартные кружочки, и совсем другое - когда каждый сам имеет возможность создать маркер. Маркером может быть все, что угодно - от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Чтобы проиллюстрировать возможность вставки в список графических маркеров, заменим кружки в маркированном списке на красные треугольники.
Сначала надо создать такой треугольник в любой программе либо скопировать уже готовый из папки с лабораторными работами(файл marker. gif).. Этот файл нужно поместить рядом с уже созданным файлом schedule. html . Теперь введем в тег
- атрибут STYLE= (этот атрибут подробнее мы рассмотрим при изучении CSS - Cascading Style Sheets):
- Создавать и редактировать Web-страницы.
- Редактировать документы HTML-формата из Интернета с учетом функционирования всех внедренных в документ объектов (картинок, анимаций и т.д.).
- Используя гипертекстовые ссылки и возможность внедрения в документ HTML-формата рисунков, диаграмм, анимации, видеоклипов, музыкального и речевого сопровождения, текстовых спецэффектов, создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты.
- height – с помощью него определяется высота изображения в пикселях или процентах;
- width – с помощью него определяется ширина изображения в пикселях или процентах.
- - поддерживает не более 256 цветов (меньше можно и часто нужно);
- - использует палитру цветов;
- - использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются);
- - поддерживает чересстрочную развертку;
- - является поточным форматом, т.е. показ картинки начинается во время перекачки;
- - позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;
- - имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;
- - поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах), осуществлять задержку между показами изображений и т.д.
- вставка отдельных картинок;
- заполнение фона картинкой.
Ваш список должен выглядеть так:
- элемент списка элемент списка... элемент списка
Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки.
Оформление кнопок.
Еще одно частое применение графических элементов - это оформление кнопок. Вообще говоря, кнопка - это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. Сейчас мы не будем рассматривать методы такого взаимодействия. Пока мы только научимся создавать кнопки и использовать в них элементы графики.
Чтобы создать кнопку, поместите в Ваш html-документ следующий код:
В браузере она должна выглядеть так: ЭТO KHОПKА
Между тегами можно поместить не только текст, но и изображение. Если мы поместим туда тег , то получим кнопку с графическим изображением.
Скопируйте изображение home-button. gif из папки с лабораторными работами, поместите его в ту же папку, что и файл schedule. html . Замените текст ЭТO KHОПKА на описание тега , указывающего на файл home-button. gif. В тег
Определение 1
Web-страница - это текстовый файл, созданный на языке HTML и размещенный в World Wide Web (WWW). В Web-странице кроме текста могут содержаться гипертекстовые ссылки, по которым можно осуществить переход к другим Web-страницам и просмотреть их, а также вставки в виде графики, анимации, видеоклипов и музыки.
С помощью языка HTML можно:
Замечание 1
Графические изображения, как правило, хранятся в отдельных файлах. В языке HTML имеются особые теги, с помощью которых в кодах Web-страниц прописываются ссылки, представляющие собой фактические адреса этих файлов в сети Интернет. Встречая такие теги, Web-обозреватель делает запрос Web-серверу на соответствующий файл с изображением, аудио - или видеороликом и выводит его на Web-страницу в место нахождения данного тега. Любые данные (изображения, аудио- и видеоролики и др.), которые хранятся в отдельных от Web-страницы файлах, называют внедренными элементами Web-страниц. Рассмотрим подробнее процесс добавления изображения на Web-страницу.
Добавление изображений на Web-страницу
Привлекательность Web-страниц заключается именно в используемой на них графике и других различных объектах. Добавить изображение на страницу не сложно. А добавить графику, способную сделать внешний вид Web-страницы более презентабельным и профессиональным, гораздо сложнее, потребуются специальные знания.
Добавить изображение на страницу можно, используя тег источника изображения, который имеет вид:
где - собственно сам тег, а scr – его атрибут. Так как атрибут scr является обязательным, то можно сказать, что вся эта запись представляет собой один общий тег. В теге источника изображения не используется соответствующего закрывающего тeга, так как тег источника является самодостаточным, и поэтому при его использовании необходимо добавлять в конце закрывающую косую черту: .
Добавление альтернативных надписей
В Интернете очень часто можно встретить различные надписи, которые отображаются при наведении указателем мыши на какой-либо графический объект Web-страницы. В этих надписях обычно содержится дополнительная информация о самом изображении или же об области страницы, на которой оно находится.
Ниже представлен НТМL-код, в котором атрибут alt добавлен внутрь тега. Данный атрибут аналогично атрибуту src сообщает браузеру некую дополнительную информацию об изображении и его также всегда можно использовать вместе с тeгом.
alt="Это картинка!" />
Функция атрибута alt заключается в определении для добавленного на Web-страницу графического элемента альтернативного текста. Альтернативным он называется потому, что отображается на экране как альтернатива для самого изображения. Атрибут alt выполняет еще одну важную функцию. Он позволяет веб-дизайнеру быть уверенным в том, что, если посетитель страницы не увидит на своем экране изображения, он во всяком случае хотя бы сможет ознакомиться с добавленной к этому изображению текстовой информацией.
При использовании атрибута alt для каждого тега, важно быть внимательным, чтобы не назначить графическим элементам несоответствующие им текстовые сообщения. К примеру, нет смысла в добавлении альтернативных текстовых надписей к элементам внешнего оформления страницы. Во избежание таких ошибок, можно присвоить атрибуту alt этих элементов пустое значение (alt=» »). Если не задать значений другим атрибутам, браузер воспроизведет изображение в исходном размере, при этом выровняет верхний край изображения с верхним краем находящейся рядом текстовой строки. Однако можно изменить оба этих параметра, используя теги стилевых таблиц.
Атрибуты изображения
В теге имеются атрибуты, которые позволяют изменять размер изображений. Вот некоторые из них:
Настройка высоты и ширины изображения
Размеры изображений, размещаемых на Web-страницах, могут задаваться с помощью вышеназванных атрибутов. Причем их значения задают либо как фиксированное количество пикселей, либо в процентах относительно размеров страницы. В представленном ниже коде HTML первый тег содержит размеры исходного изображения в пикселях (60 пикселей по вертикали и 60 пикселей по горизонтали), второй тег ширину того же изображения устанавливает равной 6% от ширины страницы, а высоту – 10% относительно высоты страницы.
аlt="Это картинка!" hеight="60" width="60" />
аlt="Это картинка!" height="10%" width="6%" />
Замечание 2
При воспроизведении изображений в своем окне браузер одинаково хорошо справляется с обработкой значений обоих видов. Однако необходимо помнить о том, что у посетителей Web-страниц на компьютерах может быть установлено экранное разрешение, отличное от вашего. Поэтому при изменении размеров изображения, нужно обязательно задавать оба значения изображения (высоту и ширину). При изменении только одного из этих значений, на экране изображение может оказаться вытянутым по вертикали или горизонтали.
Можно использовать создание иллюзии более быстрой загрузки изображений. Для этого нужно всегда указывать значения атрибутов height и width в независимости от того, изменены размеры изображения или нет. Поскольку они сообщают браузеру важные сведения о количестве места, требуемого для размещения изображения на странице. В ответ браузер обозначает необходимое для изображения пространство и продолжает строить другие элементы страницы, не прекращая загрузки самого изображения. В связи с этим кажется, что страница грузится быстрее, так как ее посетителям не приходится ждать полной загрузки изображения, чтобы увидеть другую информацию на странице.
Для того чтобы изображение на любом экране независимо от его разрешения занимало точно определенное пространство по ширине страницы, необходимо использовать процентные значения. Если же нужно, чтобы постоянным было разрешение самого рисунка (его размер в пикселях), необходимо использовать значения в пикселях.
Выравнивание текста и графики
Для выравнивания изображения по правому (right) или левому (left) краю текстовой строки используется атрибут align тега. Например:
аlt="Это картинка!" hеight="60" width="60" align="right" />
Для выравнивания изображения по вертикали относительно текстовой строки можно также использовать этот атрибут, который может принимать значения top, bottom и center. Значение top указывает на выравнивание верхнего края изображения по верхнему краю окружающего его текста. Значение bottom указывает на выравнивание нижнего края изображения по нижнему краю окружающего его текста. Значение center указывает на выравнивание центра изображения по центру текстовой строки.
Использование изображений в качестве ссылок
Изображения используются также для оформления гиперссылок на другие документы. В HTML изображение превращается в гиперссылку так же, как и надпись. Для этого используется тeг, в который заключается элемент страницы (в нашем случае изображение), который должен стать ссылкой. Переход по ссылке будет осуществляться по щелчку на данное изображение.
Миниатюры изображений
Кроме вышеуказанного способа, в котором изображение выступает в качестве гиперссылки, его также можно использовать как гиперссылку, осуществляющую переход от одного изображения к другому. Это необходимо в тех случаях, когда размер изображения, которое хотят опубликовать на Web-странице, достаточно велик и будет очень долго загружаться, что неприемлемо для многих посетителей. Поэтому создают уменьшенную копию этого изображения (миниатюру) и представляют ее гиперссылкой. Если посетитель страницы заинтересуется данным изображением, он, щелкнув на миниатюру, сможет перейти к просмотру полноценного изображения. Приведем пример кода:
аlt="Щелкните, чтобы увидеть нормальное изображение."
hеight="60" width="60" />
Секреты успешного использования изображений
Изображения несут массу наглядной информации для посетителей, и это делает их привлекательными, к тому же их довольно-таки просто добавлять на Web-страницу, но при этом необходимо придерживаться определенных правил создания сайта, если мы хотим, чтобы он стал популярным в сети.
При создании страниц нужно стараться размещать на них изображения небольших размеров, поскольку изображения больших размеров потребуют для загрузки много времени, а некоторые пользователи все еще для доступа к сети по-прежнему используют каналы связи с низкой пропускной способностью, и поэтому размеры загружаемых файлов имеют для них принципиальное значение.
Замечание 3
Важным является и общий размер файла всего HTML-документа, который, в свою очередь, будет зависеть не только от размера изображений, содержащихся в нем, но и от их количества. Нужно быть внимательными при использовании атрибута alt, чтобы содержание текстового сообщения всегда соответствовало самому изображению. И в обратном случае: необходимо следить за тем, чтобы изображение соответствовало представленной на странице текстовой информации.
При использовании изображений, заимствованным в сети Интернет, на создаваемой странице, необходимо проверить, не защищены ли эти изображения авторскими правами.
На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее - краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов.
GIF - GraficInter change Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.
Его свойства состоят в следующем:
А теперь немножко разъяснений - к чему эти свойства могут привести. Как мы написали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.
Вторым наиболее популярным графическим форматом в Web является JPEG - Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн. цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.
Фотографии или любые изображения с плавными градациями цветов лучше всего сохранять в JPEG-формате, потому что он предлагает более высокое качество изображений, вмещающихся в файл меньшего объема. Тем не менее, JPEG не является лучшим решением для графических изображений с одноцветными областями, поскольку этот формат имеет тенденцию испещрять цвета крапинками и конечный файл, как правило, будет несколько больше, чем GIF-файл для того же изображения.
Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG - Portable Net work Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).
Поскольку изображения Web существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселах на дюйм (ppi - pixelsperinch). Другая единица измерения разрешения - количество точек на дюйм (dpi - dotsperinch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства.
Но, так как реальные размеры графики зависят от разрешения дисплея, измерение в дюймах становится для Web-окружения неприемлемым. Единственной значимой единицей измерения становится пиксель.
Практично создавать изображения с разрешением 72 ppi (это лучший вариант для представления на экране), обращая внимание только на общие размеры в пикселах. В процессе создания графики на Web можно вообще не использовать дюймы. Важен размер изображения по сравнению с другими изображениями на странице и общего размера окна браузера.
Например, многие пользователи по-прежнему используют 14-дюймо-вые дисплеи с разрешением 640x480 пикселов. Чтобы гарантировать заполнение графической заставкой всего пространства экрана, лучше сделать его шириной не более 600 пикселов (учитывая, что часть пикселов справа и слева будет использована для окна и для полосы прокрутки). Размер остальных кнопок и изображений на странице следует измерять в пикселах относительно банеpa, имеющего ширину 600 пикселов.
Без сомнения, именно графика сделала Web таким, каким мы его видим сегодня, но как дизайнер вы должны знать, что многие пользователи испытывают к графике в Web чувство на грани любви и ненависти. Не стоит забывать, что графика увеличивает время, необходимое Web-странице для передачи по сети; большой объем графики означает существенное время загрузки, которое испытывает терпение читателя, особенно если он дозванивается с использованием стандартного модемного соединения.
В этом отношении для Web-дизайнера существует единственное наиболее важное правило: размер файла графического изображения должен быть минимально возможным! Создание изображений, предназначенных для передачи по сети, возлагает ответственность на разработчиков серьезно относиться к проблеме времени загрузки.
В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание.
Существуют два способа размещения графических изображений на странице:
В любом случае графическое изображение берется из файла.
Вставка графических изображений
Вставка на страницу графического изображения из файла графического формата производится с помощью тэга (от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:
< IMG SRC = "адрес_графического_файла" >
Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тэг:
< IMG SRC = "logotip.jpg" >
Для увеличения скорости передачи графического изображения в тэге можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тэг:
< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >
…предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.
Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:
< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >
Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN
тэга
с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ
для верхнего и нижнего полей и НSPACE
для боковых полей в тэге
. Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг
.
Следующий тэг задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):
< IMG SRC = "logotip.jpg" ALIGN = LEFT >
Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :
< IMG SRC = "logotip.jpg" ALIGN = RIGHT >
Чтобы задать поля вокруг картинки, надо написать тэг вида:
< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >
Здесь числа 20 и 10 определяют размеры полей.
Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тэгов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.
< HTML >
< HEAD >
< TITLE > Упражнение 1 < / TITLE >
< / HEAD >
< BODY BGCOLOR = "YELLOW" >
< IMG SRC = "logotip.gif " ALIGN = LEFT >
< H1 > Текст обтекает графику справа < / H1 >
Рис. 657 . Текст обтекает картинку справаШирокие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили . Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.