Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц с нашего сайта и включения в контент различных графиков, диаграмм и схем. В общем, область применения рисунков на с нашего сайтах дастаткова велика. При этом используется несколько способов добавления рисунков в контент web-страницы, которые и рассмотрены далее.
Для выравнивания Имаги по центру колонки контента, тег <IMG> помещается в контейнер <P>, для которого устанавливается параметр align="center". Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применять его для нужных абзацев, как показано в примере 1.
Пример 1. Выравнивание рисунка по центру
В данном примере класс fig добавляется к селектору P, а способ выравнивания определяется параметром text-align. Положение рисунка относительно контента схематично показано на рис. 1.
Рис. 1. Рисунок в центре колонки контента
Обтекание картинки контентом — один из популярных приемов верстки web-страниц, когда изображение располагается по краю окна браузера, а контент обходит его с других сторон (рис. 2). Для разработки обтекания Имаги контентом существует несколько способов, связанных, как с возможностью тегов ШТМЛ, так и с применением стилей.
Рис. 2. Рисунок выровнен по левоой стороне и обтекается контентом справа
Так, у тега <IMG> есть параметр align, который определяет выравнивание Имаги. Этот параметр задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания контента. Чтобы выровнять изображение по правой стороне и задать обтекание слева, используют значение right, для выравнивания по левоой стороне применяют left. Параметр align часто используют в связке с другими параметрами тега <IMG> — vspace и hspace. Они определяют расстояние от обтекаемого контента до Имаги. Без этих атрибутов изображение и контент будут слишком плотно прилегать друг к другу (пример 2).
Пример 2. Использование свойств тега <IMG>
Горизонтальный отступ от картинки до контента управляется параметром hspace, он добавляет пустое пространство одновременно слева и справа от Имаги. Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него на величину, указанную значением hspace.
Для обтекания картинки контентом также можно применить стилевой параметр float. Значение right будет выравнивать изображение по правой стороне окна браузера, а контент заставляет обтекать рисунок слева (пример 3). Значение left, наоборот, выравнивает изображение по левоой стороне, а контент — справа от рисунка.
Пример 3. Использование стилей
В данном примере к тегу <IMG> добавляется класс fig, для которого установлено выравнивание по правой стороне и, соответственно, обтекание картинки слева. Чтобы контент не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom.
При такой схеме изображение располагается справа или слева от контента, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой контент (рис. 3).
Рис. 3. Изображение размещается на поле слева от контента
Существует несколько методов достижения подобного результата. просмотрим два из них — использование таблицы и применение стилевого параметра margin.
Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй контент, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью параметра width тега <TD>. В примере 4 показано создание указанной таблицы.
Пример 4. Создание рисунка на поле с помощью таблиц
Результат примера показан на рис. 4.
Рис. 4. Изображение слева от контента
В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от контента до картинки. Чтобы параметры таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.
В данном случае потребуется два слоя, параметры которых будем изменять через CSS (ЦСС). Изображение поместим в слой с именем pic, а контент, сильно не мудрствуя, в слой text. Теперь для слоя piс следует установить атрибут float со значением left, а для text — margin-left. Значение этого параметра равно ширине рисунка плюс необходимый отступ до контента (пример 5).
Пример 5. Использование параметра margin
Параметр float в данном примере нужен, чтобы верхний край контента совпадал с верхним краем рисунка. Без этого параметра слой text опускается вниз на высоту Имаги.
Если рисунок следует расположить справа от контента, то значение float меняем на right, а параметр margin-left на margin-right.
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект