Posts Tagged ‘обтекание’

Обтекание картинки текстом

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Использование параметра align тега IMG
(далее…)

Изображения в тексте

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , , , ,

Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее.

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align=»center». Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применять его для нужных абзацев, как показано в примере 1. (далее…)

Плавающие элементы

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , , ,

Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом. Следует понимать, что никто и нигде не плавает, поэтому правильнее говорить «обтекаемые элементы», но с другой стороны термин «плавающий элемент» давно уже прижился, так что его и будем использовать в дальнейшем.

Плавающие элементы достаточно активно применяются при верстке и в основном служат для воплощения следующих задач.

  • Обтекание картинок текстом.
  • Создание врезок.
  • Расположение слоев по горизонтали (добавление колонок).

Все это выполняет одно стилевое свойство float, а помогают ему в этом другие свойства. Хотя первоначально float не планировался на столь универсальную роль, но жизненные реалии расставили все по своим местам. (далее…)