Базовая компоновка документа

Вывод изображений

Кроме представления текстового содержимого, на страницах Web можно выводить графические изображения. В дальнейшем эта тема будет рассмотрена подробнее. Здесь вводятся базовые методы вывода изображений на странице.

Графические форматы

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

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

Формат PNG (Portable Network Graphics) был создан с целью замены формата GIF. PNG имеет по сравнению с GIF улучшенное качество изображений, предлагая в то же время лучшую степень сжатия. Однако он не поддерживает анимированные изображения. Файлы PNG используют расширение .png.

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

На странице Web можно выводить изображения, полученные с помощью цифровой камеры или отсканированные с фотографии, или можно скопировать изображения из публичных коллекций репродукций в Web. Если у вас есть программа какого-либо из популярных редакторов графических изображений, то обычно достаточно просто можно отредактировать, изменить размер и преобразовать цифровые фотографии или отсканированные изображения в форматы Web. Для вывода на своих страницах Web сохраните просто эти изображения в формате GIF, PNG, или JPEG. Другие форматы также могут правильно выводиться в браузере, однако большие размеры их файлов могут быть неудобны для посетителей, которые должны будут их загружать при доступе к Web.

Использование изображений

Кто-то может обладать талантом создавать свои собственные графические изображения, но большинству, вероятно, это не дано. Поэтому может понадобиться поискать существующие иллюстрации, которые будут дополнять текстовое содержимое на страницах. Web является богатым источником графики, и в сети существует множество изображений, которые можно использовать. Можно воспользоваться поисковой машиной, чтобы найти сайты репродукций, где можно выбирать из миллионов изображений. Иллюстрация на рисунке 2.13 показывает результаты поиска Google, содержащего более 32 миллионов источников репродукций.

Рис. 2.13. Результаты поиска сайтов репродукций

После того как необходимое изображение найдено, его можно легко загрузить для использования. Как показано на рисунке 2.14, сделайте щелчок правой кнопкой мыши на изображении и выберите из контекстного меню позицию Save Picture As (Сохранить изображение как...). В диалоговом окне Save (Сохранить) выберите место на своем ПК для загрузки изображения. Этим местом может быть каталог страницы Web, на которой будет выводиться изображение, или можно создать отдельный подкаталог для хранения таких файлов. Можно также при желании переименовать изображение во время сохранения. Помните об авторских правах. Для использования защищенных авторским правом изображений необходимо получить соответствующее разрешение.

Рис. 2.14. Загрузка изображения из Web

Тег <img/>

Изображения GIF и JPEG размещают на странице Web с помощью линейного тега <img/>. Общий формат этого тега показан ниже.

<img src="url" alt="text"/>

Тег <img/> кодируется на странице Web в том месте, в котором должно выводиться изображение. Атрибут src задает источник или расположение файла изображения. Если файл изображения находится в том же каталоге, что и страница Web, на которой оно выводится, то в качестве URL в src достаточно указать только имя файла.

Атрибут alt является обязательным в XHTML 1.1. Его значение "text" задает краткое всплывающее описание изображения, когда указатель мыши перемещается поверх изображения. Эта текстовая строка выводится, когда пользователи отключают в браузере вывод графики, задавая тем самым текстовое описание отсутствующих изображений. Текст также может быть озвучен специальной программой чтения, применяемой пользователями с недостатками зрения, которые иначе не могут видеть или четко различать изображения.

Отметим, что тег <img/> является пустым тегом; он не использует пару из открывающего и закрывающего тегов, так как не охватывает никакой контент. Он только помечает расположение изображения на странице. Он, как линейный тег, должен кодироваться внутри блочного тега, такого, как тег <p>. По умолчанию изображение выравнивается по левому краю страницы.

Изображение JPEG, показанное на рисунке 2.15, должно находиться в том же каталоге, что и страница Web, на которой оно выводится. Изображение помещается на странице в месте расположения тега <img/> с соответствующим кодом. (Если провести указатель мыши над изображением на странице, то появится всплывающая подсказка атрибута alt ).

<p><img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/></p>

Рис. 2.15. Код тега <img/> и вывод в браузере соответствующего изображения

Обратите внимание, что физическое расположение изображения может быть произвольным. На страницу помещается тег <img/>, содержащий адрес URL файла изображения. Когда страница Web загружается в браузер, этот URL используется для определения местоположения файла изображения, который затем передается браузеру отдельно для вывода на странице. Именно поэтому размер файла изображения является важным вопросом. Вывод изображения требует дополнительной передачи данных с сервера Web для каждого изображения, появляющегося на странице. Поэтому слишком большое количество изображений и их большие размеры увеличивают время загрузки страницы Web в окне браузера.

Исключенное выравнивание изображений

Горизонтальное положение изображения можно контролировать, размещая тег <img/> внутри тега <p>, который выравнивает изображение влево, вправо или центрирует на линии. Выравнивание параграфа может использовать исключенный атрибут align="left|center|right" тега <p>. Изображение ниже, например, будет центрировано на отдельной линии и будет окружено пустыми строками с помощью ограничивающего тега <p>.

<p align="center"><img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/></p>

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