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

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

Записанный в файл рисунок может быть помещен на странице сайта одним из двух способов — в качестве собственно изображения или в качестве текстуры (фона) какого-либо объекта (тела документа или ячейки таблицы).

Для задания фоновых изображений используется параметр BACKGROUND тегов <BODY> и <ТD>. В качестве значения надо указать имя файла, содержащего рисунок. Формат файла может быть любым, но вам следует учитывать то, что многие браузеры «воспринимают» только форматы GIF и JPEG. Некоторые подобные программы способны работать с форматом PNG. Файлы других форматов в большинстве случаев (например, TIFF) могут читаться и использоваться только после установки специальных программных модулей (для просмотра файлов формата TIFF потребуется модуль QuickTime). Ниже приведен пример задания фона для тела документа.

На рис. 18.1 приведен пример страницы с заданным графическим фоном.

Если вы внимательно присмотритесь к этому рисунку, то заметите, что фон повторяется. Это происходит из-за того, что изображение, считанное из файла, многократно копируется, чтобы закрыть всю площадь страницы. Фон и основное содержание страницы выводятся независимо и не влияют друг на друга. Используя технологию CSS (Cascading Style Sheets — каскадные таблицы стилей), можно указать такой режим вывода фона, при котором изображение не будет копироваться вообще или будет повторяться только в одной плоскости. Также можно определить положение фона относительно границ заполняемого пространства.

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

Рис. 18.1. Вы можете задать фоновое изображение для тела документа и некоторых его элементов

ПРИМЕЧАНИЕ. Часто во время загрузки документа фоновые изображения передаются на компью-тер пользователя в последнюю очередь.

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

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

Кроме фона, вы можете помещать на страницу и обычные рисунки, украшая сайт или иллюстрируя его текст. Во многих случаях графика, имея строго функциональное назначение (кнопки, ссылки и т. д.). служит украшением web-страницы, привлекая пользователя и создавая комфортные условия для работы. Для включения в текст HTML-документа изображений (точнее, ссылок на файлы изображений) используется тег <IMG> (от английского слова image — изображение). Ниже приведен список его параметров. С их помощью вы можете указать правила отображения картинки в окне браузера.

SRC указывает путь к файлу, содержащему изображение. Значение этого параметра лучше заключать в кавычки. Также обратите внимание на правильность записи имен файлов и каталогов. Программное обеспечение сервера может различать регистры символов. Пример записи тега с этим параметром:

BORDER определяет ширину границы, выводимой вокруг изображения (в пикселах). Граница отображается для изображений, используемых в качестве ссылок (по умолчанию браузер выводит такие изображения окруженными цветной (обычно синей) рамкой). С помощью параметра BORDER вы можете контролировать ее размер. При задании значения BORDER-0 рамка не отображается. Пример записи параметра:

WIDTH и HEIGHT параметры, задающие соответственно высоту и ширину изображения. Значения этих параметров задаются в пикселах. С их помощью вы можете, во-первых, указать браузеру, сколько места требуется отвести под рисунок еще до загрузки файла изображения. Это позволяет быстрее сверстать страницу на компьютере пользователя даже при отключенной загрузке графики. Во-вторых, вы можете использовать эти параметры для изменения размеров изображений, но качество такого масштабирования, как правило, далеко от идеала. Пример записи этих параметров:

ALIGN используется для выбора режима выравнивания изображения. При помощи различных режимов выравнивания вы можете управлять положением рисунка, окруженного текстом, относительно строки, в которой он находится. Существует несколько режимов выравнивания, как по горизонтали, так и по вертикали. Ниже (табл. 18.1) приведен список допустимых значений параметра ALIGN.

Таблица 18.1. Допустимые значения параметра ALIGN тега <IMG>

<

Содержание Вперед

Forekc.ru
Рефераты, дипломы, курсовые, выпускные и квалификационные работы, диссертации, учебники, учебные пособия, лекции, методические пособия и рекомендации, программы и курсы обучения, публикации из профильных изданий