Как сделать обтекание картинки текстом

Как сделать обтекание картинки текстом

С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.

Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin.

Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;}.

Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;}, или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.

<h1>List of towns in England</h1>  <h2>Amersham</h2>  <p><img class="left" src="h.    
;Dartmouth</h2> <p><img class="center" src="https://html5book.ru/wp-content/uploads/2015/02/Dartmouth.jpg">Dartmouth is ...</p>
body {   margin: 0;   background: #FFF8E8;   padding: 0 20px;   font-size: 90%;   counter-reset: h2; /*создаем счетчик для любого заголовка h2*/  }  h1 {   font-family: 'Lora', serif;   color: #564C4A;   font-weight: 300;  }  h2 {   font-family: 'Lora', serif;   color: #B00D22;   font-weight: 300;   clear: both; /* отменяем обтекание с обеих сторон */    padding: 1em 0 0.25em;   border-bottom: 2px solid;   counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */  }  h2:before {   content: " " counter(h2) '. '; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */  }  p {   font-family: arial;   color: #785F5B;   line-height: 1.3;  }    /********** картинка слева **********/  .left {   float: left;   margin: 0 1em 1em 0;  }    /********** картинка справа **********/  .right {   float: right;   margin: 0 0 1em 1em;  }    /********** картинка между текста **********/  .columns {   float: left;   max-width: 30%;   margin: 0;  }  .img-center {   float: left;   margin: 0 1.5% 0 1.5%;   max-width: 37%;  }  /********** картинка по центру********* */  .center {   display: block;   margin: 0 auto 1.5%;  }    

Обтекание картинки с двух сторон

float-middle

Приём заключается в том, что текст помещается в два блока одинаковой ширины с небольшим промежутком посередине. С помощью псевдоэлементов :before и :before в каждый блок добавляется заглушка шириной в половину картинки и высотой, равной высоте картинки. Картинка абсолютно позиционируется таким образом, что закрывает собой эти пустые блоки, в результате чего и получается эффект обтекания с двух сторон.

<div class="wrap">   <img src="cat.jpg">   <div class="left">   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.    
isque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <div class="right"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> </div>
.wrap {   width: 60%;   margin: 80px auto;   position: relative;  }  img {   position: absolute;   top: 0;   left: 50%;   margin-left: -125px;  }  .left {   float: left;   width: 49%;  }  .right {   float: right;   width: 49%;  }  .left:before, .right:before {   content: "";   width: 125px;   height: 250px;  }  .left:before {   float: right;  }  .right:before {   float: left;  }    

html5book.ru

В документах Microsoft Word довольно часто встречаются различные изображения. Уверенна, и Вам время от времени приходится разбавлять написанное, вставляя по смыслу картинки, ведь так информация, воспринимается намного лучше.

На сайте есть различные статьи, которые помогут разобраться, как правильно работать с изображением, вставленным в Ворд. Добавленный рисунок можно обрезать, или повернуть изображение в Word на необходимый угол. Если наткнулись на нужную или просто красивую картинку в документе, то можете сохранить изображение на компьютер.

После того, как Вы добавили рисунок в документ, он вставляется в текст, и написать что-либо Вы можете только вверху или внизу. Но что сделать, чтобы напечатать слова получилось рядом с картинкой или по ее контуру?

Вот с этим мы и разберемся в данной статье. В Ворде текст может обтекать рисунок не только с боку. Он может быть помещен за ним, по контуру или вокруг рамки. У меня установлен MS Word 2010, но сделанные скриншоты подойдут и тем, у кого установлен 2007, 2013 или 2016, разве что немного названия пунктов могут отличаться.

Добавьте рисунок в документ и кликните по нему два раза, чтобы открылась вкладка «Работа с рисунками» – «Формат». Затем в группе «Упорядочить» нажмите на кнопку «Обтекание текстом». В открывшемся контекстном меню выберите подходящий вариант.


Группа Упорядочить

Нужное меню можно открыть и другим способом. Кликните правой кнопкой мышки по изображению и выберите пункт «Обтекание текстом». После этого снова откроются возможные варианты.

Контекстное меню

Давайте рассмотрим подробнее все доступные виды обтекания.

«Вокруг рамки» – размещение написанного вокруг рамки объекта. Рамка появляется, если кликнуть по картинке мышкой – это прямоугольник с маркерами по контуру. То есть, если фото неправильной формы, напечатан текст будет все равно по прямоугольнику.

Вокруг рамки

«По контуру» – такое обтекание лучше использовать для объектов произвольной формы, чтобы слова разместились по контуру, а не по рамке.


По контуру

«Сквозное» – обтекание будет по рамке. Лучше использовать, когда объект не полностью залит, а в нем есть пустые области какой-нибудь формы.

Сквозное обтекание

«Сверху и снизу» – даже если изображение небольшого размера, написано справа или слева от него ничего не будет.

Сверху и снизу

«За текстом» – объект будет помещен за напечатанный текст. Обратите внимание, пока изображение выделено – по контуру рамка с маркерами, можно его перемещать и редактировать. Но как только перейдете к редактированию или набору слов, то выделить рисунок больше не получится, если только его границы не выходят за рамки написанного, то есть на поля справа или слева.

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


За текстом

«Перед текстом» – картинка будет помещена на сам текст и закроет его.

На переднем плане

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

Изменить контур обтекания

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


Текст справа

Если не подходит расстояние от текста до рисунка, тогда можно его изменить, и выставить значения, которые подойдут больше.

Небольшое расстояние

Для этого кликните по изображению правой кнопкой мышки и выберите из контекстного меню «Обтекание текстом» – «Дополнительные параметры разметки».

Дополнительные параметры разметки

Откроется отдельное окно «Разметка». В разделе «Расстояние от текста» укажите нужные значения в тех полях, с каких сторон текст находится от изображения. Потом нажмите «ОК».


Укажите расстояние

Например, я увеличила данное расстояние.

Увеличенное расстояние

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

comp-profi.com

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

Для задания нужного обтекание картинки текстом в HTML нам достаточно в теге img указать атрибут align с присвоенным значение, который соответствует нужному способу обтекания. Атрибуту align можно задать следующие значения:

  • bottom – значение которое задается по умолчанию. Первая стока находится у нижнего края картинки. Картинка располагается с лева
  • top – в этом случае первая стока находится у верхнего края картинки. Картинка располагается с лева
  • right –картинка выравнивается по правому краю, а контент обтекает ее по левому
  • left — изображение выравнивается по левому краю, а контент обтекает ее с правой стороны
  • middle – в данном случае происходит выравнивание серединый изображения по базовой линии строки

Наиболее часто используются атрибуты right и left, для правого и левого обтекания. Данные варианты наиболее привычны для восприятия, и придают тексту с изображением наиболее компактный вид.

Вот пример использования атрибута align:

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

Так же можно задать обтекание картинки текстом СSS-свойством. Данный способ очень удобно использовать в случаях, когда вам нужно задать обтекания для группы изображений на сайте в одном стиле.

В этом случае для каждого изображения мы должны задать уникальный класс, а далее, в файле стилей, или между тегами <style>…</style> в самой странице, прописать этому классу свойство float с соответствующим способом обтекания. Для того, что бы добиться обтекания по правому или левому краю изображения, мы можем использовать значения left и right, так же, как и с атрибутом align.

HTML-код изображения:

CSS:

На мой взгляд, такой способ задания обтекания картинки текстом в CSS более удобен. Так как вы, при помощи CSS-свойств, можете более гибко настраивать параметры отображения картинки и изменять их. В примере я добавила дополнительно отступ с правой и левой стороны свойством margin, а так же добавила для изображения рамку. Картинка стала более выразительной и контент теперь не прилипает к ней.

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору img. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.

В примере 1 введены два стилевых класса leftimg и rightimg, при добавлении их к <img> картинка выравнивается по соответствующей стороне, а текст при этом обтекает картинку.

Пример 1. Обтекание картинок

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Обтекание</title>  <style>  .leftimg {  float:left; /* Выравнивание по левому краю */  margin: 7px 7px 7px 0; /* Отступы вокруг картинки */  }  .rightimg {  float: right; /* Выравнивание по правому краю */   margin: 7px 0 7px 7px; /* Отступы вокруг картинки */  }  </style>  </head>  <body>  <h2>Доклад лейтенанта Бокатуева</h2>  <p><img src="image/n1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg">  Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного   противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной   контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава   потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился   в бою взводный Кудряшёв&nbsp;М.А., грамотно использовавший человеческие ресурсы   своего взвода. В результате операции были захвачены элементы внеземной культуры, которые   переданы аналитической группе.</p>  <h2>Пресс-релиз аналитической группы</h2>  <p><img src="image/n2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg">  В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось  психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших   над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии   аффекта, растащили прототип по деталям. Возможно, наши учёные до сих пор находятся в   состоянии аффекта.</p>  </body> </html>

Результат данного примера показан на рис. 1.

Текст с иллюстрациями

Рис. 1. Текст с иллюстрациями

Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет пространство между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.

webref.ru

Как сделать обтекание картинки текстом

В предыдущей статье мы рассматривали вопрос, как вставить картинку в текст, теперь будем учиться делать обтекание картинки текстом.

Мы вставили картинку в статью, однако пока все выглядит довольно таки некрасиво — текст не обтекает картинку. Сейчас мы это исправим.

Как сделать обтекание картинки текстом

 

 

 

 

 

 

 

Наша задача вставить картинку так, чтобы между картинкой и текстом был определенный отступ, и наша картинка как бы обтекалась текстом. Этого можно добиться тремя способами:

  1. Обтекание картинки текстом средствами HTML;
  2. Обтекание картинки текстом средствами CSS;
  3. Обтекание картинки текстом средствами редактора Joomla.

 

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

Для того, чтобы текст обтекал картинку мы выделим фрагмент документа с картинкой и пропишем стиль для этого фрагмента прямо внутри HTML документа. Здесь нужно определиться, по какому краю вы будете выравнивать изображение по левому или по правому. Если вы выравниваете картинку по левому краю, нужно чтобы текст обтекал ее справа. И наоборот, если вы вставляете картинку справа, нужно чтобы текст обтекал картинку слева.

Допустим, нужно выровнять картинку по левому краю с обтеканием текста по его правой стороне и задать отступы: сверху — 5px, справа — 10px, снизу — 5px, слева — 0px.

  1. Для выделения фрагмента (блока) в документе в  HTML служит элемент <div>
    <div>…</div>
  2. Для определения стиля элемента служит универсальный атрибут <style>
    <div style=…>…</div>
  3. Свойство <float> отвечает за выравнивание элемента по определенному краю, с обтеканием его остальными элементами с других сторон
  4. Свойство <margin> отвечает за область внешних отступов:
    <margin-bottom> устанавливает размер отступа от нижней границы элемента;
    <margin-left> размер отступа от левой границы элемента;
    <margin-right> размер отступа от правой границы элемента;
    <margin-top> размер отступа от верхней границы элемента.

 

Зададим фрагменту документа с картинкой стиль, используя вышеописанные свойства:

<div style=»float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; «>Картинка</div>

 

Код нашей картинки в HTML выглядит так:

<img src=»/images/joomla/adminka_20.png» border=»0″/>

 

Вставим в div нашу картинку, в результате получилось:

<div style=»float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; «><img src=»/images/joomla/adminka_20.png» border=»0″/></div>

 

Сократим запись:

<div style=»float:left; margin: 5px 10px 5px 0px «><img src=»/images/joomla/adminka_20.png» border=»0″/></div>

На картинке ниже вы видите данный код в HTML документе.

Как сделать обтекание картинки текстом

 

 

 

 

 

 

 

 

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

Как сделать обтекание картинки текстом

 

 

 

 

 

 

 

 

 

Если вы будете вставлять картинку, выравнивая ее по правому краю, соответственно html-код будет несколько другим:

<div style=»float:right; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 10px;»> После картинки вставляем код: </div>.

Можете поэкспериментировать с кодами. Главное добиться желаемого результата. И еще совет, обязательно просматривайте результаты ваших экспериментов хотя бы в основных браузерах: Internet Explorer, Mozilla Firefox, Opera. Если все выглядит как вы планировали, значит, вы со своей задачей справились.

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

 

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

Прописать стиль для картинки с обтеканием текста в CSS совсем несложно. И заметьте, насколько уменьшается количество тегов в документе, по сравнению с вышеописанным методом.

  1. За вывод изображения на веб-страницу отвечает тег <img>.
  2. За выравнивание элемента по определенному краю, с обтеканием его остальными элементами отвечает свойство <float>.
  3. За область внешних отступов отвечает <margin>.
  4. Класс (.class) в CSS служит для придания элементам индивидуального стиля, отличного от основного стиля, прописанного в документе.

Сначала добавим класс стиля к изображению. Для этого, селектору img дадим имя .fotoleft. Открываем файл с расширением .css, в котором прописаны стили и прописываем стиль для нашей картинки:

Img. fotoleft {
float: left;
margin: 12px 12px 12px 0;
}

Теперь применим класс class=»fotoleft» к тегу <img> в файле HTML. Открываем статью в исходном коде и прописываем класс для картинки:

<img src=»/картинка.png» width=»150″ height=»110″ class=»fotoleft» />

Таким образом, мы выровняли картинку по левому краю с обтеканием текста по его правой стороне и задали величину отступов: сверху — 12px, справа — 12px, снизу — 12px, слева — 0px. Теперь, чтобы таким же образом выровнять любую другую картинку, нужно всего лишь присвоить ей созданный нами класс стиля.

 

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

Выровнять изображение по краю можно с помощью меню «Вставить/редактировать изображение». Для этого вы должны кликнуть по изображению в нашей статье, вокруг картинки появиться рамка. Затем кликните по иконке «Вставить/редактировать изображение».

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

 

 

 

 

 

 

 

 

 

 

 

 

Перед вами откроется окно, в котором надо перейти на вкладку «Оформление». Здесь можно не только установить отступ, но и изменить размеры изображения.

Для того, чтобы текст обтекал картинку, установите в строке Стиль (Style) значение:
float: left; — если выравниваете картинку по левому краю (alignment: left);
float: right; — если выравниваете картинку по правому краю (alignment: right).

Для того, чтобы текст не слился с картинкой, задайте горизонтальные и вертикальные отступы — 10 (px). После того как оформите изображение, не забудьте нажать на кнопку «Обновить»

Как сделать обтекание картинки текстом

 

 

 

 

 

 

 

 

 

 

 

Вы видите, что у нас появился отступ. Кстати, с помощью меню «Вставить/редактировать изображение» вы можете сделать подпись под изображением или чтобы подпись появлялась при наведении курсора на изображение и т.д. В этом, думаю, не сложно разобраться, поэкспериментировав с настройками.

Как сделать обтекание картинки текстом

 

 

 

 

 

 

 

 

 

С вставкой изображений в текст мы разобрались, следующая моя статья будет посвящена созданию меню для самостоятельной статьи.

www.webadvisor.ru

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

Наиболее простой, способ позиционирования картинки на странице это воспользоваться средствами HTML. Но у данного способа, по сравнению с возможностями CSS есть недостаток, в нем нет возможности установить отступ между картинкой и текстом, а лишь можно сделать так, чтобы текст обтекал изображение.

Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML:  http://webmastermix.ru/lessons-html/14-how-inser-a-picture-in-html.html. Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:

— где foto.jpg — это относительный путь к картинке. Можно задать и абсолютный путь, тогда нужно прописать URL вида: http://webmastermix.ru/foto.jpg

У тега img имеется  атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align=»left» по левому краю). Атрибут align имеет следующие значения:

  • left — изображение будет расположено по левому краю, а текст будет обтекать его справа;
  • right — изображение расположится справа, а текст будет обтекать его слева;
  • bottom — отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию;
  • top — тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения;
  • middle — при данном значении происходит выравнивание середины изображения по базовой линии строки.

Теперь рассмотрим каждый элемент на практике.

1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:

Положение картинки по умолчанию

2. Чтобы выровнять изображение по левому краю, а текст его обтекал справа нужно прописать следующее:

Пример:

Картинка слева

3. Для выравнивания изображения по правому краю нужно соответственно прописать:

Пример:

Картинка справа

4. Теперь рассмотрим вертикальное выравнивание. Если применить значение top, то первая строчка текста будет расположена на против верхней границы изображения.

Пример:

Вертикальное положение картинки вверху

5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.

Пример:

Позиционирование картинки по центру

Обтекание картинки текстом при помощи свойств CSS 

Как вы могли заметить на вышеприведенных примерах наша картинка и текст не совсем красиво располагаются по отношению друг к другу. Расположить их красиво на помогут CSS стили, которые можно добавить к картинке задав ей определенный класс и применив нужные свойства. Если вы не знаете, что такое CSS смотрите урок Основы CSS и важные понятия: http://webmastermix.ru/lessons-css/17-bases-css.html.

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

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

В начале нужно присвоить нашей картинке определенный класс, тут можете использовать  любое слово главное чтобы патом вы поняли за, что именно этот класс отвечает, в дизайне вашей страницы. Делается это так:

Теперь классу leftfoto нужно присвоить определенные CSS стили.  

Данный код располагают между тегами <head>…</head>, заключив в теги <style>…</style> или помещают во внешний файл стилей CSS. 

Разберем те элементы, которые мы здесь задали:

  • float:left; — мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align=»left».
  • margin: 4px 10px 2px 0px; — мы задали внешние отступы, 4px — от верха, 10px — справа, 2px снизу и 0px слева от изображения.

Пример:

Обтекание при помощи CSS

Добавив к данным стилям рамку и внутренний отступ можно придать изображению некий эффект фотографии с белыми краями:

Здесь мы добавили следующие элементы:

  • border:1px solid #CCC; — задали сплошную линию размером 1 пиксель и светло серым цветом;
  • padding:6px; — задали внутренний отступ между изображением и рамкой, равный 6 пикселям.

Пример:

Оформление картинки

Материал подготовлен проектом: WebMasterMix.ru

webmastermix.ru

Теги html: обтекание картинки текстом

Картинки располагают на странице тремя способами:

  • центральное положение;
  • обтекание текстом;
  • вставка в поле.

При большом размере картинку располагают посередине страницы, сначала поместив в контейнер < p > тега img, после чего для него устанавливают атрибут align=»center». Если часто используют изображение, следует применять стиль CSS к тегу < p >.

Когда изображение небольшое, рядом располагают текст. Способ является наиболее распространенным. Обтекание текстом делают несколькими способами. Но сначала картинку нужно вывести на экран. Если к ней известен путь, например, «foto1.jpg», ее вставляют на html страницу с помощью следующей записи:

< p>< img src =» foto1.jpg «>< /p>

Пример соответствует случаю, когда файлы html и рисунка находятся в одной папке.

Если за изображением следует текст, он будет располагаться ниже. Это не всегда удобно, поскольку по бокам будут оставаться пустые места, Поэтому страницу оформляют так, чтобы создать обтекание картинки текстом html. Для этого у тега img существует атрибут align, задающий расположение фото или рисунка относительно текста. От этого параметра зависит, с какого края страницы располагается графический материал и каким образом его обтекает текст. Атрибуту можно задавать следующие значения:

  • left — перемещение картинки влево при обтекании текстом справа;
  • right — обтекание изображения слева при его размещении справа;
  • bottom — значение по умолчанию, когда картинка располагается слева, первая строка текста начинается на уровне нижней ее части;
  • top — изображение размещается аналогично предыдущему значению, но первая строка расположена по его верхнему уровню;
  • middle — начальная строчка текста проходит напротив середины изображения.

У тега img есть параметры, которыми можно задавать расстояние от текста до картинки (hspace и vspace). Без их применения текст будет располагаться к картинке вплотную. Кроме того, выбираются габаритные размеры рисунка width и height. При этом должна соблюдаться пропорция между шириной и высотой. Если габариты не задавать, по умолчанию рисунок переносится с размерами исходника, что не всегда удобно.

Перемещение изображения к левому краю с его обтеканием текстом можно сделать с помощью записи:

< p>< img src =» foto1.jpg » align=»left» width=150 height=100 hspace=5 vspace=5>Текст< /p>

Применение таблиц

Обтекание картинки текстом html легко делать с помощью таблицы, внутри ячейки которой помещается изображение. Здесь свойство align применяется для тега table. Таблицы имеют больше управляемых параметров, что создает для них преимущества:

< table width=170 height=120 border=0 align=left cellpadding=0 cellspacing=0 >
< img src= «foto2.jpg» width=150 height=100>

< /table >

Граница таблицы делается невидимой и не позволяет тексту приблизиться к изображению. Отступы между ячейками и внутри них могут регулироваться.

Использование стилей

Из предыдущих примеров видно, как просто сделать обтекание картинки текстом html. CSS позволяет достигнуть аналогичных результатов. Обтекание создают с помощью свойства float. Здесь также выравнивание обеспечивается значениями left и right.

Для этого создается класс и ему присваиваются стили CSS:

< style >

.fotoleft{

float:left;

margin: 5px 12px 3px 0px;

}

< /style >

Затем стилевое свойство float добавляется к селектору img:

< img src= «foto1.jpg» class=»fotoleft» >

Кроме выравнивания изображения с помощью значения left, здесь также устанавливаются отступы текста от картинки свойством margin. Аналогично делается обтекание текста слева, если применить свойство right.

Стили позволяют накладывать текст непосредственно на изображение. Для этого текст вставляется в блок с полупрозрачным фоном, который накладывается на картинку.

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

Обтекание изображений округлой формы текстом html

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

Процесс создания подобного обтекания является трудоемким, и его надо делать отдельно для каждого нового рисунка.

Обтекание текстом сложных фигур

Путем разработки новой спецификации CSS Shapes удалось оказать влияние на существующий дизайн и предоставить ему новые перспективы. Теперь контент может обтекать сложные фигуры и криволинейные области.

Спецификация поддерживается браузером Chrome Canary, и сейчас пытаются реализовать ее на остальных. Она позволяет создавать сложные конструкции без помощи редакторов графики.

Обтекание круглой картинки текстом html обеспечивается с помощью следующей записи:

#circle

{

shape-outside: circle(-300px,-300px,300px); /* (x, y, radius) */

float:left;

}

< p>Пример текста< /p>

Код создает круг, идеально обтекаемый текстом.

Аналогично будет создаваться любая неправильная форма, благодаря поддержке Photoshop, который позволит получить CSS код фигуры.

Заключение

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

www.syl.ru


Обычно текстовое обтекание вокруг рисунка делают в газетных публикациях, книгах и в рефератах, но очень редко в деловых бумагах. Такое расположение картинки визуально улучшает восприятие текста, поскольку картинка очень красиво сочетается с ним.

Настроить подобное обтекание можно во многих текстовых редакторах и Microsoft Word. Сейчас я вам подробнее расскажу, как это сделать.

Для начала вам нужно поместить изображение на ваш лист в Word. Как вставить рисунок на страницу в Microsoft Word мы рассматривали в предыдущем уроке.

Затем вы выделяете изображение и во вкладке «Формат» находим опцию «Обтекание текстом»

Жмем на «Обтекание текстом» и выбираем необходимую вам опцию из выезжающего списка.

Сейчас на примерах я пока как будет выглядеть текст и изображение при выборе той, или иной опции.

В тексте – стандартно заданное обтекание, которое включено по умолчанию при добавлении картинки.

Вокруг рамки – вокруг картинки автоматически выставляется невидимая рамка и куда бы вы не перенесли изображение — текст всегда будет окружать его (кроме краев листа).

По контуру – практически тоже самое, что и «Вокруг рамки». Единственное, что я заметил – текст стал более «правильно» выравниваться вокруг картинки.

За текстом – изображение помещается на задний план, а поверх него налаживается текст.

Перед текстом– противоположная опции «За текстом», картинка становится впереди текста и закрывает его (размер закрытой части зависит от параметров картинки).

Сверху и снизу – обтекание картинки текстом происходит только сверху и снизу, по бокам остается свободное место.

Сквозное – текст обтекает изображение со всех сторон (еще я эту опцию называю «Полное обтекание»).

Дополнительные параметры разметки – при нажатии откроется диалоговое окно, в котором есть все вышеперечисленные опции, а также в неё присутствует возможность изменить размеры рамки изображения вокруг которой и происходит обтекание текста.

На этом все, учитесь, практикуйте, экспериментируйте.

В этом уроке вы научились делать обтекание текста вокруг картинки в текстовом редакторе Microsoft Word 2007.

vgtk.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector