Читать онлайн «HTML, XHTML и CSS на 100%». Страница 16

Автор Игорь Квинт

Рис. 4.6. Рамка

Листинг 4.6. Задание рамки вокруг изображения

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg" width="100" align="right" vspace="10" hspace="10" border="20"/>Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их.

</body>

</html>

Альтернативный текст

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

Иногда получается так, что картинка не загружается, например, когда пользователь отключил загрузку картинок или сервер, на котором она расположена, «упал». Если размеры картинки указаны в явном виде, то посетитель имеет о них представление, однако зачем ему этот размер, если он не может даже предположить, что изображено на рисунке.

В таких ситуациях может помочь атрибут alt. Его значение – текст, который будет показан при наведении указателя мыши на картинку или если картинка не загрузится. Это даст возможность пользователям, которые не видят картинок, понять, хотят ли они увидеть их вообще, а тем, кто видит, поможет понять, что именно они видят.

В листинге 4.7 приведен пример кода для задания альтернативного текста.

Листинг 4.7. Альтернативный текст

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

</body>

</html>

На рис. 4.7 показан результат обработки кода из листинга 4.7 при условии, что изображение загрузилось.

Рис. 4.7. Альтернативный текст при загруженном рисунке

Альтернативный текст всплывает при наведении указателя мыши на картинку.

На рис. 4.8 показан результат обработки кода из того же листинга, но в случае, когда изображение не загрузилось.

Рис. 4.8. Альтернативный текст при незагруженном рисунке

Вместо картинки виден поясняющий текст, и при наведении указателя мыши на рисунок появляется всплывающая подсказка.

Предварительная загрузка

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

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

Совет

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

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

Листинг 4.8. Изображение с предварительной загрузкой

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

</body>

</html>

На рис. 4.9 показан результат предварительной загрузки изображения, на следующем проходе браузер загрузит изображение нормального качества.

Рис. 4.9. Предварительное изображение

Альтернативный текст и предварительная загрузка изображения делают сайт удобнее.

Ссылки изображения

Используя картинки, можно повысить функциональность сайта, создавая изображения-ссылки.

Ссылки – главное в Интернете, и, естественно, существует возможность использовать в качестве ссылок изображения.

Для создания ссылки из картинки достаточно поместить элемент IMG внутри тегов <А> и </A>, при этом вокруг картинки появится рамка, которой можно управлять с помощью атрибута border. Синие рамки вокруг рисунков выглядят некрасиво, зато с ними сразу понятно, что можно щелкнуть кнопкой мыши на этой картинке и перейти на другую страницу.

В листинге 4.9 приведены примеры создания ссылок-изображений с различными размерами рамок.

Листинг 4.9. Создание изображений-ссылок

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

Ссылка без задания атрибута border (рамка ставится по умолчанию)

Ссылка без рамки

Рамка в 10 пикселов

</body>

</html>

Результат обработки кода из листинга 4.9 можно увидеть на рис. 4.10.

Рис. 4.10. Изображения-ссылки

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

Галереи изображений

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

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

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

4.2. Добавление мультимедиа

Что же делать, если, помимо коллекции картинок, у вас есть коллекция аудио или видео и вы хотите поделиться с посетителями сайта? В этом случае вы можете поместить на страницу ссылку на тот мультимедиа-файл, который желаете сделать доступным, или просто встроить его на страницу вместе с проигрывателем.

Ссылки на мультимедийные файлы

Ссылки на файлы мультимедиа ничем не отличаются от ссылок на другие страницы. Как видно из листинга 4.10, при щелчке кнопкой мыши на такой ссылке браузер откроет музыкальный файл в новом окне. Для удобства посетителей советую использовать атрибут title элемента A, он работает так же, как альтернативный текст для картинок. При наведении указателя мыши на ссылку всплывает строка с более подробной информацией о файле (рис. 4.11).

Рис. 4.11. Ссылки на мультимедиа

В листинге 4.10 приведен пример кода для создания ссылок на мультимедиа.

Листинг 4.10. Ссылки на мультимедиа

<html>

<head>

<title>Ссылки на мультимедиа</title>

</head>

<body>

<a href="test.mp3" title="Test">Test audio</a>

</body>

</html>

Указание ссылки на объект – самый простой вариант для реализации доступа к нему. Плюсом этого способа являются маленький объем страницы и простота использования. С помощью ссылки посетитель может сохранить файл у себя на компьютере, а затем проиграть его наиболее подходящим для себя проигрывателем. Для удобства посетителей сайта можно указывать размер мультимедийного файла.

Однако этот способ не помогает, если нужно, чтобы пользователь посмотрел Flash-файл. С их помощью обычно «раскрашивают» сам сайт; яркие и динамичные Flash-объекты могут нести смысловую нагрузку и быть неотъемлемой частью страницы, поэтому их удобнее встраивать сразу в страницу, а не передавать по ссылке. Хотя, если ваш Flash-мультик – самостоятельное произведение, можно использовать способ со ссылками.