Доступность и привлекательность текста
Урок #5.2. Вставка изображений. Как не испортить текст?
31 минута
Стремясь сделась страницы ярче, мы используем изображения, но как часто мы получаем противоположный результат.
На уроке рассматриваются вопросы:
а) Как выглядит страница при отключенной графике в браузере? Удобно ли при этом читать текст?
б) Как быстро подобрать размер изображения, оптимальный для какой-либо колонки с текстом?
в) В каких случаях разумно применять фоновые изображения?
- Применение фоновых изображений. Их преимущества.
- Вставка изображений при помощи тега img.
- Как добавить отступы изображению при помощи CSS (при этом можно убрать hspace/vspace из html-кода)?
Как отключить графику в своем браузере?
Как отключить картинки в браузере? В Internet Explorer:
Сервис > Свойства
обозревателя > Дополнительно > Отображать
рисунки (убрать галочку).
В Опере: Вид > Рисунки > Без рисунков.
Почему фоновые изображения?
Если вы будете просматривать страницы с отключенной графикой, то на многих сайтах увидите обилие беспорядочно разбросанных прямоугольничков с надписью «рисунок». Так происходит при вставке изображений с помощью тега img.
Если эти изображения должны находиться на каждой странице сайта, то их лучше вставлять с помощью background-image в таблице стилей.
Что нам дает такой подход?
1. Поскольку адрес к картинке указан в таблице стилей, мы можем ее поменять, не делая изменения в html-коде. Таким образом, мы можем быстро изменить внешний вид сайта.
2. Уменьшается html-код, так как при вставке с помощью img необходимо
указывать путь к картинке в html, а также ее ширину/высоту:
<img src="../image/blank_disk.gif" width="200" height="300" />
При вставке фоновых изображений все их атрибуты записываются в таблице стилей. Например, в блочных сайтах достаточно вставить блок <div id="img"></div>.
Вы встречали сайты с белыми буквами на белом фоне?
Это происходит потому, что автор сайта использовал темное изображение в качестве фона и выбрал белые буквы для основного текста. Если графика у посетителя отключена, то вместо темного фонового изображения браузер показывает белый фон. Поэтому в таблице стилей необходимо обязательно указывать вместе с фоновым изображением цвет фона (близкий по цвету к фону картинки). Например:
- Общие принципы составления заголовков.
- В чем преимущество обучения с помощью видеокурсов?
- Краткое содержание разделов
- Программа курса
- Интерфейс диска
- Цена
- Заказать
велосипед stels, сноуборд
Клиентам! Укладка металлочерепицы: продажа металлочерепицы tegola. Дороже!
Интерактивный курс по программе Adobe Photoshop CS2 предназначен для пользователей, впервые приступающих к работе с этой программой.