|
§ 12.
Изображения и управления рисунками
|
Изображения
-
Вставка изображения
-
Размеры изображения
-
Рамка вокруг изображения
-
Альтернативный текст
-
Выравнивание изображения
-
Отступы вокруг изображения
-
Разбиение изображения на части
-
Упражнение
Вставка изображения
Для вставки изображения в html-документ используется непарный тег
<img>, который помещается в то место документа, где должно
быть вставлено изображение. У этого тега есть обязательный параметр
src, значение которого указывает путь к нужному изображению в
каталоге вашего сайта.
Например, чтобы поместить на страничку изображение:

в нужном месте документа помещается строчка:
<img src="http://www.mysite.com/img/1.png">
Это дает браузеру понять, что в корневом каталоге сайта
www.mysite.com есть подкаталог img, в нем лежит
изображение с именем 1.png, которое и нужно поместить на
страничке.
Здесь мы указали полный путь (или абсолютный адрес) до
изображения. А можно указать относительный адрес изображения:
<img src="img/1.png">
Такую строчку браузер интерпретирует так: в каталоге, где лежит
данный html-документ, есть подкаталог img, в нем лежит
изображение с именем 1.png, которое и нужно поместить на
страничке.
А вот пример указания относительного адреса изображения, если у
вашего сайта более сложная структура и предыдущий пример не
подходит:
<img src="../img/1.png">
Такую строчку браузер интерпретирует так: сочетание символов
../ означает, что из каталога, где лежит данный html-документ,
нужно выйти на уровень вверх; а далее как в предыдущем примере: в
том каталоге, где мы оказались есть подкаталог img, в нем
лежит изображение с именем 1.png, которое и нужно поместить
на страничке.
В целях безопасности предпочтительнее указывать относительный
адрес изображения, кроме тех случаев, когда Вы на своей страничке
помещаете изображение, расположенное на другом сайте.
Размеры изображения
Размер каждого изображения задается двумя параметрами: ширина и
высота. У тега <img> есть соответствующие параметры: width
и height. Эти параметры принимают значения в пикселах (px).
Вы можете задать истинные размеры изображения:
<img src="img/1.png" width="176" height="146">
Это делать необязательно, но полезно, т.к. немного ускоряет
процесс загрузки странички браузером (браузеру не приходится
самостоятельно вычислять эти величины). Если размеры изображения
сразу заданы в параметрах тега <img>, то под данное
изображение будет выделено место на страничке, и структура странички
при загрузке уже не будет меняться - текст прыгать, например.
А можете увеличить или уменьшить изображение, присвоив параметрам
width и height другие значения. Причем, если вы хотите
пропорционально изменить оба параметра, достаточно указать новое
значение только одному из них, а второй - просто опустить. Браузер
вычислит его автоматически.
Например, чтобы увеличить наше изображение в 1,5 раза, можно
написать:
<img src="img/1.png" width="264"> или <img src="img/1.png"
width="264" height="219">
Результат будет один:

Еще параметры width и height могут принимать
значения в процентах. Но! Следует учесть, что это проценты от
размера окна браузера. В таком случае тоже можно указать только один
параметр, а второй - опустить.
Например, если мы хотим, чтобы изображение по ширине занимало
ровно половину нашей странички, надо написать следующее:
<img src="img/1.png" width="50%">
И мы получим:

Рамка вокруг изображения
У тега <img> есть еще один необязательный параметр
border. С его помощью можно задать толщину рамки вокруг
изображения. По умолчанию толщина рамки изображения нулевая, т.е.
рамки нет.
Например, так можно добавить к нашей картинке рамку толщиной 2
пиксела:
<img src="img/1.png" border="3">
Вот что покажет нам браузер:

Цвет рамки совпадает с цветом текста на странице, заданным с
помощью параметра text тега <body> (См. Урок 6.
Свойства страницы - параметры тега body), по умолчанию это черный
цвет.
Но если изображение является ссылкой, то у него толщина рамки по
умолчанию = 1, а его цвет совпадает с цветом ссылок:

И если Вы не хотите видеть рамку, принудительно присвойте
параметру border нулевое значение:
<img src="img/1.png" border="0">
Альтернативный текст
Альтернативный текст отображается браузером на месте
картинки, пока та не загрузится. Или вместо картинки, если она по
какой-либо причине не отобразилась.

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

Чтобы добавить альтернативный текст, используется параметр alt
тега <img>, которому присваивается строковое значение,
обязательно заключенное в кавычки.
<img src="img/1.png" alt="Альтернативный текст">
Можно создать многострочный альтернативный текст.

Наведите курсор на картинку
Для этого достаточно вставить перенос строки в html-документе.
<img src="img/1.png" alt="Альтернативный
текст">
Выравнивание изображения
Для изображения, как и для параграфа, существует понятие
выравнивания относительно текста и других изображений на странице.
Задать тип выравнивания можно также с помощью параметра align
тега <img>.
Ниже приведена таблица возможных значений параметра align:
Значение |
Описание |
Результат |
<img src="sample.gif" align="texttop"> |
Верхняя граница изображения
выравнивается по самому высокому
текстовому элементу текущей строки. |
Хотя Карлсон
и был лучшим в мире специалистом по
паровым машинам, денатурат он наливал
весьма неуклюже и даже пролил его, так
что на полке образовалось целое
денатуратное озеро. |
<img src="sample.gif"
align="top"> |
Верхняя граница
изображения
выравнивается по самому
высокому элементу
текущей строки. |
Хотя Карлсон
и был лучшим в мире
специалистом по паровым
машинам, денатурат он
наливал весьма неуклюже
и даже пролил его, так
что на полке
образовалось целое
денатуратное озеро. |
<img src="sample.gif"
align="middle"> |
Выравнивание
середины изображения по
базовой линии текущей
строки. |
Хотя Карлсон
и был лучшим в мире специалистом по
паровым машинам, денатурат он наливал
весьма неуклюже и даже пролил его, так
что на полке образовалось целое
денатуратное озеро. |
<img src="sample.gif"
align="absmiddle"> |
Выравнивание
середины изображения по
средине текущей строки. |
Хотя Карлсон
и был лучшим в мире
специалистом по паровым
машинам, денатурат он
наливал весьма неуклюже
и даже пролил его, так
что на полке
образовалось целое
денатуратное озеро. |
<img src="sample.gif"
align="baseline"> |
Выравнивание
изображения по базовой
линии текущей строки. |
Хотя Карлсон
и был лучшим в мире
специалистом по паровым
машинам, денатурат он
наливал весьма неуклюже
и даже пролил его, так
что на полке
образовалось целое
денатуратное озеро. |
<img src="sample.gif"
align="bottom"> |
Выравнивание нижней границы
изображения по окружающему тексту. |
Хотя Карлсон
и был лучшим в мире специалистом по
паровым машинам, денатурат он наливал
весьма неуклюже и даже пролил его, так
что на полке образовалось целое
денатуратное озеро. |
<img src="sample.gif"
align="left"> |
Выравнивает
изображение по левому
краю окна. |
Хотя
Карлсон и был лучшим в
мире специалистом по
паровым машинам,
денатурат он наливал
весьма неуклюже и даже
пролил его, так что на
полке образовалось целое
денатуратное озеро. |
<img src="sample.gif"
align="right"> |
Выравнивает
изображение по правому
краю окна. |
Хотя
Карлсон и был лучшим в
мире специалистом по
паровым машинам,
денатурат он наливал
весьма неуклюже и даже
пролил его, так что на
полке образовалось целое
денатуратное озеро. |
Параметры texttop, top, middle,
absmiddle, baseline, bottom задают
выравнивание изображения по вертикали. А параметры
left и right дают браузеру понять, с какой
стороны текст должен обтекать изображение.
Отступы вокруг изображения
Чтобы при обтекании текст не прилегал близко к
изображению, можно задать отступы вокруг изображения.
Сделать это можно с помощью параметров hspace
(отступы слева и справа) и vspace (отступы сверху
и снизу) тега <img>.
В следующем примере продемонстрирован случай, когда текст
обтекает изображение, при этом изображение выровнено по левому краю
и имеет отступы вокруг, равные 5 пикселам:
<img src="img/1.png" align="left" hspace="5" vspace="5">В
городе Стокгольме, на самой обыкновенной улице, в
самом обыкновенном доме живет самая обыкновенная
шведская семья по фамилии Свантесон. Семья эта
состоит из самого обыкновенного папы, самой
обыкновенной мамы и трех самых обыкновенных ребят
-Боссе, Бетан и Малыша.
Вот результат в браузере:
В
городе Стокгольме, на самой обыкновенной
улице, в самом обыкновенном доме живет
самая обыкновенная шведская семья по
фамилии Свантесон. Семья эта состоит из
самого обыкновенного папы, самой
обыкновенной мамы и трех самых
обыкновенных ребят -Боссе, Бетан и
Малыша.
Разбиение изображения на части
Бывают случаи, когда на странице необходимо поместить большое
изображение. Но тогда страница будет долго грузиться. Что же делать?
Один из возможных вариантов выхода из положения -
разрезать изображение на части и разместить его на странице с
помощью таблицы. A чтобы изображение выглядело как целое, необходимо
у таблицы удалить границу и все отступы внутри и между ячейками.
Т.е. присвоить соответствующим параметрам тега <table>
нулевые значения: border="0", cellspacing="0",
cellpadding="0".
В следующем примере мы разбили изображение на 4 части. Вот как
будет выглядеть таблица:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/part1.png"></td>
<td><img src="img/part2.png"></td>
</tr>
<tr>
<td><img src="img/part3.png"></td>
<td><img src="img/part4.png"></td>
</tr>
</table>
А вот результат:
Упражнение
Cоздайте по своему выбору html-документ, в котором будут
содержаться изображения с различными способами выравнивания,
рамками, альтернативным текстом. Создайте в одной папке с этим
документом папку img, в которую поместите используемые изображения.
©
Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
© 2012 год. При использовании материалов обязательна ссылка на владельца
|