
- •17. Изображения в html
- •Введение
- •Изображение говорит больше чем тысяча слов - так ли это?
- •Различные типы изображений в Web - содержательные и фоновые изображения
- •Элемент img и его атрибуты
- •Создание альтернативного текста с помощью атрибута alt
- •Добавление полезной информации с помощью атрибута title
- •Использование longdesc для описания сложных изображений
- •Быстрый вывод изображения при определении размеров с помощью width и height
- •Только это о строковых изображениях
- •Фоновые изображения с помощью css
- •Как применять фоновые изображения с помощью css
- •Заключение
- •Контрольные вопросы
- •Об авторе
17. Изображения в html
Разговор о вещах, которые делают дизайн Web привлекательным - об изображениях. О том, как добавлять в Web-документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта). А также, как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы
Введение
В этом курсе мы поговорим о вещах, которые делают дизайн Web привлекательным — об изображениях. К концу этого курса вы узнаете, как добавлять в Web-документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта), и как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы. Можно загрузить используемые в этой лекции файлы примеров отсюда (http://dev.opera.com/articles/view/17-images-in-html/code.zip) — я использую эти файлы в ходе изложения учебного материала. Лекция имеет следующее содержание:
Изображение говорит больше чем тысяча слов - так ли это?
Различные типы изображений в Web - содержательные и фоновые изображения
Элемент img и его атрибуты
Создание альтернативного текста с помощью атрибута alt
Добавление полезной информации с помощью атрибута title
Использование longdesc для описания сложных изображений
Быстрый вывод изображения при определении размеров с помощью width и height
Только это о строковых изображениях
Фоновые изображения с помощью CSS
Как применять фоновые изображения с помощью CSS
Заключение
Контрольные вопросы
Изображение говорит больше чем тысяча слов - так ли это?
Очень соблазнительно использовать на своем Web-сайте много визуальной информации. Изображения являются отличным способом создания настроения у посетителя, и иллюстрации являются прекрасным способом сделать сложную информацию легче для восприятия для зрячих учеников.
Недостаток изображений в Web состоит в том, что не все пользователи Web могут их видеть. В прошедшие дни, когда изображения стали впервые поддерживаться браузерами, многие посетители сайтов отключали вывод изоображений, чтобы уменьшить объем трафика и быстрее перемещаться в сети — соединения Web были когда-то очень медленными, и нужно было платить большие деньги за каждую проведенную в сети минуту. Хотя это не слишком распространено сегодня, но мы ушли еще не слишком далеко.
Люди, использующие мобильные устройства, могут по прежнему отключать вывод изображений из-за маленького экрана и стоимости загрузки данных.
Посетители сайта могут быть слепыми или слабовидящими до такой степени, что не смогут правильно рассмотреть изображения.
Другие посетители могут быть из другой культуры и не понимать используемые пиктограммы.
Поисковые системы индексируют только текст - они не анализируют изображения (пока), что означает, что находящуюся в изображениях информацию невозможно найти и проиндексировать.
Поэтому очень важно выбирать изображения из разумных соображений и использовать их, когда уместно. Еще более важно убедиться, что вы всегда предлагаете запасной вариант для тех, кто не может видеть изображения. Имеются дополнительные пояснения по проблемам неправильного использования пиктограмм и изображений в лекции "Перемещение в Web и меню" в дальнейшем в этой серии. Пока давайте посмотрим, какие доступны технологии для добавления изображений в документ HTML.