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

Видеокурс

Доступность и привлекательность текста

Комментарии к видеоурокам

Урок #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>.

Вы встречали сайты с белыми буквами на белом фоне?

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

background: #333 url(../img/mid.gif) repeat-y;

Статьи