Практическая работа №8

Тема: Добавление графических объектов в HTML-документ

Цель: закрепление на практике знаний по добавлению графических объектов и настройке их расположения и размеров на web-странице

Время выполнения: 2 часа

Теоретический материал:

Необходимо тщательно продумывать дизайн и смысл каждого элемента графики, добавляемого в документы HTML.

Помещая в документы изображения имейте ввиду следующее.

-         Поисковые системы не умеют обрабатывать изображения. Такие поисковые системы, как Alta Vista или Excite, не могут индексировать изображения. Поэтому, если вы будете полагаться в основном на изображения, то, возможно, пользователи этих поисковых систем не найдут вашу Web-страницу.

-         У многих пользователей нет графических броузеров. Например, тысячи людей используют броузер Lynx, который позволяет просматривать только текст. Кроме того, пользователи Internet Explorer и Netscape могут отключить загрузку изображений, чтобы ускорить открытие Web-страницы.

-         Изображения не всегда интернационализованы. Поскольку документы HTML, опубликованные в WWW, имеют всемирную аудиторию, то интернационализация изображений может иметь важное значение.

-         Цветные изображения не всегда совместимы с различными системами. Цветное изображение, которое хорошо выглядит на вашем компьютере, может выглядеть совсем не так на компьютере другого пользователя. Поэтому следует уделять особое внимание использованию цветов в рисунках.

Выбор формата графического файла

Вы можете использовать для хранения изображений десятки графических форматов — GIF, JPEG, PCX, PNG, WMF и другие. Однако при создании изображений для документов HTML лучше выбирать те форматы, которые понимаются большинством броузеров: GIF или JPEG.

Потеря информации

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

Таблица 4.

Схемы сжатия графических файлов

Добавление изображений в документ

Поместить изображение в документ HTML очень просто. Для этого достаточно использовать дескриптор <img> с атрибутом SRC, который указывает URL графического файла. Введите этот дескриптор в то место документа HTML, где вы хотите поместить изображение. Затем замените имя файла на URL рисунка.

<IMG SRC="имя файла">

По умолчанию, броузер отобразит это изображение в указанном месте, справа от текста или другого объекта, который непосредственно предшествует изображению.

Рекомендуется хранить все изображения в одном каталоге, вне корневой папки Web-узла. Тогда для доступа к этим рисункам вы сможете указывать относительный путь в сочетании с дескриптором <ваsе>, не указывая полный URL.

Выравнивание текста с изображением в строке

По умолчанию при помещении изображения в строке текст выравнивается по нижней части изображения. Возможно, вы захотите изменить такое выравнивание, поскольку при этом остается слишком много пустого места на странице. Эту настройку можно изменить с помощью атрибута align в дескрипторе <IMG>. Ниже перечислены значения, которые можно присвоить этому атрибуту.

Расположение текста на WEB-странице

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

Создать плавающее изображение можно с помощью атрибута ALIGN дескриптора <IMG>. Это тот же атрибут, который используется для выравнивания окружающего текста по изображению.

Указание браузеру размеров изображения

В дескрипторе <IMG> вы можете явно указать броузеру размеры изображения - его высоту и ширину.

Для указания размеров изображения используются атрибуты height и width дескриптора <IMG>. В атрибуте HEIGHT указывается высота изображения, а в атрибуте WIDTH - его ширина в пикселях.

Если размеры, указанные вами в атрибутах HEIGHT и WIDTH, отличаются от реальных размеров изображения, определенных вашим графическим редактором, то броузер масштабирует изображение.

Уменьшение размеров изображения

Уменьшение изображения осуществляется, когда реальное изображение больше, чем пространство, которое вы зарезервировали для него с помощью атрибутов HEIGHT и width. В таком случае броузер сжимает изображение, чтобы оно поместилось в отведенное для него пространство.

Вы можете исказить изображение, если укажете неточный размер. Например, если уменьшить высоту изображения на 50%, а ширину - на 25%, то оно отобразится в искаженном виде.

Указание высоты и ширины меньших, чем реальная ширина и высота изображения, не уменьшает время загрузки. Броузер загружает все изображение, а затем уже масштабирует его, чтобы поместить в зарезервированное место.

Увеличение размеров изображения

Увеличение изображения осуществляется, когда исходное изображение меньше отведенного для него с помощью атрибутов height и width пространства. В таком случае броузер увеличивает изображение, подгоняя его под зарезервированное для него пространство.

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

Рамка вокруг изображения

По умолчанию броузер пользователя окружает рамкой все изображения, которые используются в качестве привязки. Вы можете управлять этой рамкой и свободным пространством вокруг изображений.

Атрибуту border дескриптора <IMG> присваивается значение ширины рамки в пикселях. Если вы хотите, чтобы ширина рамки составляла 10 пикселей, присвойте этому атрибуту значение 10.

Свободное пространство вокруг изображения

Возможно, вам не нравится, что текст расположен слишком близко к изображению. В таком случае используйте атрибуты vspace и hspace, которые расширяют свободное пространство округ изображения по вертикали и по горизонтали, соответственно. Каждому из этих атрибутов присваивается значение в пикселях, которое вы хотите использовать для увеличения свободного пространства между рисунком и окружающим текстом.

Использование изображения в качестве ссылки

Изображение заключается в дескриптор <А>, как показано ниже:

<A HREF="адрес сайта, куда указывает ссылка"><IMG SRC="путь к вашему файлу"></A>

Задания:

Задание 1. Создать страницу, на которой располагаются три изображения. Под изображением расположены комментарии к рисункам. При нажатии на изображения происходит переход на соответствующие страницы.

Примеры тем:  

1.       Мультфильмы: кукольные, пластилиновые, рисованые

2.       Фильмы: комедии, боевики, ужасы

3.       Бытовая техника: для кухни, для дома, для уборки

4.       Автомобили: легковые, грузовые, спортивные

Можно использовать свою тему

Контрольные вопросы:

1.       Как добавить изображение на Web-страницу?

2.       Какие атрибуты тега align позволяют выровнять рисунок на странице?

3.       Как сделать изображение ссылкой?

Скачано с www.znanio.ru