Имаги в контенте
Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц с нашего сайта и включения в контент различных графиков, диаграмм и схем. В общем, область применения рисунков на с нашего сайтах дастаткова велика. При этом используется несколько способов добавления рисунков в контент web-страницы, которые и рассмотрены далее.
Рисунок по центру
Для выравнивания Имаги по центру колонки контента, тег <IMG> помещается в контейнер <P>, для которого устанавливается параметр align="center". Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применять его для нужных абзацев, как показано в примере 1.
Пример 1. Выравнивание рисунка по центру
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Рисунок по центру</title>
<style type="text/CSS (ЦСС)">
P.fig {
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<p class="fig">
<img src="images/sample.gif" width="200" height="100" alt="Иллюстрация">
</p>
</body>
</html>
В данном примере класс fig добавляется к селектору P, а способ выравнивания определяется параметром text-align. Положение рисунка относительно контента схематично показано на рис. 1.
Рис. 1. Рисунок в центре колонки контента
Обтекание рисунка контентом
Обтекание картинки контентом — один из популярных приемов верстки web-страниц, когда изображение располагается по краю окна браузера, а контент обходит его с других сторон (рис. 2). Для разработки обтекания Имаги контентом существует несколько способов, связанных, как с возможностью тегов ШТМЛ, так и с применением стилей.
Рис. 2. Рисунок выровнен по левоой стороне и обтекается контентом справа
Так, у тега <IMG> есть параметр align, который определяет выравнивание Имаги. Этот параметр задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания контента. Чтобы выровнять изображение по правой стороне и задать обтекание слева, используют значение right, для выравнивания по левоой стороне применяют left. Параметр align часто используют в связке с другими параметрами тега <IMG> — vspace и hspace. Они определяют расстояние от обтекаемого контента до Имаги. Без этих атрибутов изображение и контент будут слишком плотно прилегать друг к другу (пример 2).
Пример 2. Использование свойств тега <IMG>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Рисунок в контенте</title>
</head>
<body>
<p><img src="images/sample.gif" width="100" height="200" alt="Иллюстрация" align="left" vspace="5" hspace="5">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Горизонтальный отступ от картинки до контента управляется параметром hspace, он добавляет пустое пространство одновременно слева и справа от Имаги. Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него на величину, указанную значением hspace.
Для обтекания картинки контентом также можно применить стилевой параметр float. Значение right будет выравнивать изображение по правой стороне окна браузера, а контент заставляет обтекать рисунок слева (пример 3). Значение left, наоборот, выравнивает изображение по левоой стороне, а контент — справа от рисунка.
Пример 3. Использование стилей
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Рисунок в контенте</title>
<style type="text/CSS (ЦСС)">
IMG.fig {
float: right; /* Обтекание картинки по левоой стороне */
padding-left: 10px; /* Отступ слева */
padding-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<p><img src="sample.gif" width="100" height="200" alt="Иллюстрация" class="fig">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
В данном примере к тегу <IMG> добавляется класс fig, для которого установлено выравнивание по правой стороне и, соответственно, обтекание картинки слева. Чтобы контент не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom.
Рисунок на поле
При такой схеме изображение располагается справа или слева от контента, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой контент (рис. 3).
Рис. 3. Изображение размещается на поле слева от контента
Существует несколько методов достижения подобного результата. просмотрим два из них — использование таблицы и применение стилевого параметра margin.
Применение таблиц
Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй контент, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью параметра width тега <TD>. В примере 4 показано создание указанной таблицы.
Пример 4. Создание рисунка на поле с помощью таблиц
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Рисунок на поле</title>
<style type="text/CSS (ЦСС)">
TD.leftcol {
width: 110px; /* Ширина левой колонки с рисунком */
vertical-align: top; /* Выравнивание по верхнему краю */
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="leftcol"><img src="igels.gif" width="90" height="78" alt="Вы не поверите, но это ёжик"></td>
<td valign="top">Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.</td>
</tr>
</table>
</body>
</html>
Результат примера показан на рис. 4.
Рис. 4. Изображение слева от контента
В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от контента до картинки. Чтобы параметры таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.
Использование стилей
В данном случае потребуется два слоя, параметры которых будем изменять через CSS (ЦСС). Изображение поместим в слой с именем pic, а контент, сильно не мудрствуя, в слой text. Теперь для слоя piс следует установить атрибут float со значением left, а для text — margin-left. Значение этого параметра равно ширине рисунка плюс необходимый отступ до контента (пример 5).
Пример 5. Использование параметра margin
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Рисунок на поле</title>
<style type="text/CSS (ЦСС)">
#pic {
float: left; /* Обтекание картинки контентом */
}
#text {
margin-left: 110px; /* Отступ от левого края */
}
</style>
</head>
<body>
<div id="pic">
<img src="igels.gif" width="90" height="78" alt="Вы не поверите, но это ёжик">
</div>
<div id="text">
Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.
</div>
</body>
</html>
Параметр float в данном примере нужен, чтобы верхний край контента совпадал с верхним краем рисунка. Без этого параметра слой text опускается вниз на высоту Имаги.
Если рисунок следует расположить справа от контента, то значение float меняем на right, а параметр margin-left на margin-right.
| Статья опубликована: 13.11.2009 | Последнее обновление: 29.04.2009 |