что нужно сделать чтобы картинка размещалась в тексте
Изображения в тексте
Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее.
Рисунок по центру
Для выравнивания изображения по центру колонки текста, тег помещается в контейнер
Пример 1. Выравнивание рисунка по центру
Рис. 1. Рисунок в центре колонки текста
Обтекание рисунка текстом
Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.
Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа
Пример 2. Использование свойств тега
Пример 3. Использование стилей
Рисунок на поле
При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).
Рис. 3. Изображение размещается на поле слева от текста
Применение таблиц
Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега
Пример 4. Создание рисунка на поле с помощью таблиц
Результат примера показан на рис. 4.
Рис. 4. Изображение слева от текста
В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.
Использование стилей
Пример 5. Использование margin
Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.
Компьютерная грамотность с Надеждой
Заполняем пробелы — расширяем горизонты!
Обтекание картинки в Ворде: как ее вставить в текст, изменить размер и расположить рядом с текстом
Современные тексты практически немыслимы без картинок. И если писать текст с помощью редактора Ворд (Word от Microsoft), то часто можно столкнуться с проблемой вставки в текст картинок. Иногда еще бывает нужно сделать обтекание картинки в Ворде, когда текст находится рядом с картинкой или расположен вокруг нее так, как будто обтекает ее.
Предположим, надо описать текстом (словами) картину известного художника Шишкина Ивана Ивановича «Утро в сосновом лесу», которую в просторечии называют «Три медведя». Как это сделать в Ворде?
Допустим, мы уже сделали описание картины в редакторе Microsoft Word, и теперь хотим в текст нашего описания поместить саму картину, то есть перенести картинку в текст. Начнем вставлять картину (рисунок) сразу после заголовка описания – это место для вставки рисунка мы выделяем с помощью мышки, то есть ставим туда курсор мышки (1 на рис. 1):
Рис. 1 (кликните по рисунку для увеличения). Выделяем в тексте место под заголовком статьи для вставки туда картинки (рисунка) из файла
Как скопировать картинку из Интернета
В редакторе Word предусмотрена возможность вставлять рисунки из готовых файлов. Предположим, что вставляемый рисунок – картина Шишкина И.И. «Утро в сосновом лесу» находится на компьютере, на рабочем столе в папке «Картина Шишкина». Как там эта картина, этот рисунок оказались? Ну, например, мы нашли эту картину, этот рисунок в Интернете и сохранили его себе на компьютер, на рабочий стол.
Чтобы сохранить картинку из интернета на свой компьютер (свое устройство):
Вставляемые рисунки в текст могут быть самые разные:
Главное, чтобы перед вставкой рисунка в текст, этот рисунок был сохранен на компьютере в виде файла. И тогда мы сможем его вставить в текст.
Вставка картинки в текст в Ворде
Теперь, когда мы выделили в тексте то место, куда должен быть вставлена картинка (рисунок), переходим к процедуре вставки. Вставка рисунка в текст делается следующим образом:
Рис. 2 (кликните по рисунку для увеличения). Переход к меню «Вставка» и клик по иконке «Рисунок»
Откроется окно «Вставка рисунка», в котором мы должны найти на компьютере рисунок, который нужно поместить в Ворд. В рассматриваемом примере рисунок хранится на Рабочем столе в папке «Картина Шишкина».
1 на рис. 3 – Находим эту папку,
2 – кликаем по ней левой кнопкой мышки для выделения,
3 на рис. 3 – после чего нажимаем на кнопку «Вставить».
Рис. 3 (кликните по рис. для увеличения). Поиск вставляемого рисунка (картинки) на компьютере в окне «Вставка рисунка»
Картинка вставлена в вордовский текст некрасиво
После всех манипуляций, описанных выше, мы видим, что рисунок (он же «картинка») вставлен в текст сразу после заголовка и прямо перед первым абзацем (рис. 4).
Рис. 4 (кликните по рис. для увеличения). Вид вставленной картинки сразу после завершения вставки рисунка в текст
Скорее всего, нам не понравится то, что мы видим в получившемся тексте с картинкой. Текст первого абзаца начинается сразу после рисунка, причем этот текст идет от правого нижнего угла картинки, и буквально сцеплен с рисунком.
Почему так произошло? Потому что картинка в редакторе Word вставляется вместо одного символа текста, на место одного символа текста. И для Ворда этот рисунок является всего лишь одним единственным символом текста – так «воспринимает» Word картинку, что называется по умолчанию.
Если дальше ничего не предпринимать, а лишь пытаться редактировать текст, не трогая вставленную картинку, мы сможем немного облагородить полученный текст с рисунком.
Например, мы можем поставить курсор перед заглавной буквой «У», и затем раз 5-6 нажать на клавишу «Пробел». Между вставленной картинкой и началом абзаца появится некий промежуток, который выделен синим цветом для наглядности (1 на рис. 5).
Рис. 5 (кликните по рис. для увеличения). Отделение вставленной картинки от текста пробелами
Так, конечно, текст читается лучше, и рисунок вроде как отделяется от остального текста. Но все равно, ведь мы обычно видим в журналах, в книгах, в газетах картинки в тексте не в таком виде.
Нам обычно представляют рисунок отдельно от текста, либо текст как бы «обтекает» картинку, заполняя собой все свободное от картинки пространство на листе. А на свободном поле листа справа от рисунка мы видим только первую строку абзаца. Выше, на рисунках 4 и 5, справа от картинки мы видим пустоту. Так не делают…
Отделение картинки от текста в Ворде
Давайте попробуем для начала отделить рисунок от текста вообще. Для этого убираем все пробелы между картинкой буквой «У» в начале абзаца (то есть возвращаемся к виду, как показано на рис. 4).
Затем ставим курсор перед буквой «У» и нажимаем на клавишу «Enter» — текст абзаца начнется с новой строки, а рисунок останется на своем месте (рис. 6).
Рис. 6 (кликните по рис. для увеличения). Отделение вставленного рисунка от текста с помощью клавиши «Enter»
Что же, неплохо получилось, уже смотрится и читается значительно лучше. Правда, картинка расположена по-прежнему в левой части страницы, а справа от нее «зияющая пустота»!
Что делать? Можно оставить и так. А можно, например, поместить рисунок в центр страницы. Как это сделать? Нужно:
Рис. 7 (кликните по рис. для увеличения). Выделение строки с вставленной картинкой и последующее ее перемещение на середину строки (по центру)
И вот, случилось то, что мы хотели! Рисунок теперь размещен по центру страницы (рис. 8).
Рис. 8 (кликните по рис. для увеличения). Вставленная картинка размещена посредине страницы
Получается, что со вставленной картинкой можно (и даже нужно!) работать как с обычным текстом. И тогда рисунок будет «подчиняться» нашим желаниям, становясь на то место, куда мы его хотим «определить»! В данном случае картинка расположится посредине строки над первым абзацем текста.
То есть, обладая умением форматировать текст, мы можем применить наши знания и опыт для такого же форматирования рисунков. Уже неплохо, правда, же?! Например, можно выделить картинку, как мы обычно выделяем текст, зацепить картинку левой кнопкой мышки и перетащить картинку в любое место нашего текста.
Скриншот данного действия (выделить рисунок, зацепить и переместить в любое другое место текста) я не делаю. Можете попробовать это сделать самостоятельно, чтобы ощутить «свою власть» над картинкой. Не такой он страшный, этот вставленный рисунок, как его малюют! С картинкой в тексте можно делать все (или почти все), что мы умеем делать с текстом, с отдельными словами текста и даже с отдельными буквами и символами текста!
Изменение размера картинки в Ворде
На рис. 8 видно, что рисунок вставлен в текст как-то «не к месту», что ли. Возможно, это ощущение создается из-за маленького размера картинки. А что если рисунок увеличить в размере?
Как увеличить или уменьшить размер вставленной в текст картинки? Для этого нужно:
По мере изменения размера рисунка он будет как бы «наползать» на текст (рис. 9), но это не страшно, поскольку это лишь процесс растягивания или сжатия картинки, а не окончательный результат.
Рис. 9 (кликните по рис. для увеличения). Растягивание (увеличение размера) или сжатие (уменьшение размера) картинки, вставленной в текст
После того, как мы отпустим левую кнопку мышки, рисунок станет того размера, каким мы его сделали. Остальной текст будет отодвинут от увеличившейся картинки или придвинут к уменьшившейся картинке. И так можно многократно менять размер рисунка, пока он не станет таким, каким мы его хотим видеть. Например, на рис. 10 рисунок расположен на всю ширину текста на странице.
Рис. 10 (кликните по рис. для увеличения). Увеличение размера вставленной картинки (рисунка) в редакторе Microsoft Word
Обтекание картинки текстом в Ворде
Вышеперечисленные манипуляции с текстом и картинкой, вставленной в текст, не позволили нам заполнить текстом правую часть листа, то есть, справа от вставленного рисунка. Мы лишь смогли отделить текст от картинки, а картинку увеличили в размере, чтобы заполнить «пустоту».
Но далеко не всегда подобное форматирование делает текст с рисунками привлекательным, читабельным. Давайте посмотрим, как все-таки можно «соединить» картинку и текст воедино так, чтобы было и красиво, и лист был бы равномерно заполнен.
Предлагаю вернуться к состоянию, показанному на рис. 4, когда у нас был вставленный рисунок, и сразу после него начинался первый абзац текста. Затем нужно:
Рис. 11 (кликните по рис. для увеличения). Варианты обтекания текста вокруг картинки
Именно такой вариант обтекания текста («по контуру») обеспечит нам расположение текста на свободном поле листа справа от рисунка (рис. 12). Что и требовалось сделать!
Рис. 12 (кликните по рис. для увеличения). Обтекание картинки в Ворде – расположение текста на свободном поле листа справа от вставленного рисунка (картинки)
Однако, в меню вариантов обтекания текстом рисунка (рис. 11) мы видим и другие варианты. Можете попробовать их самостоятельно, чтобы наглядно посмотреть, что получается с текстом и картинкой.
Например, вариант обтекания «Перед текстом» позволят «закрыть» рисунком часть текста. Текст будет размещен как бы под картинкой, его не будет видно. А вариант обтекания «За текстом», наоборот, размещает текста поверх рисунка. Текст будет, как бы, написан поверх картинки. Ну, и так далее, для разных случаев жизни, для разных вариантов совместного форматирования текста и рисунков, для форматирования текстов с картинками.
Остается только писать тексты и сопровождать их рисунками. Остальное сделает за нас текстовый редактор Microsoft Word, или как его иногда называют «текстовый процессор». Не совсем «текстовый», раз может работать и с картинками, не правда ли?!
Нашли ошибку? Выделите фрагмент текста и нажмите Ctrl+Enter.
Перенос текста и перемещение рисунков в Word
Для перемещения или перемещения рисунка на странице в Word достаточно перетащить его с помощью мыши. Однако иногда этот способ неприемлем. Чтобы получить нужные результаты, выберите Параметры разметки.
Выберите значок Параметры разметки.
Выберите нужные параметры.
Чтобы вывести изображение перед текстом и настроить его так, чтобы он остался на определенном месте на странице, выберите Перед текстом (в области Обтекавание текстом ),а затем выберите Исправить положение на странице.
Чтобы текст обтекал рисунок, но при добавлении или удалении текста он перемещался вверх или вниз, выберите вокруг него квадрат (в области Обтекавание текстом ),а затем — Переместить вместе с текстом.
Дополнительные сведения и примеры см. в статье Обтекание рисунков текстом в Word.
Если не удается выделить рисунок, вероятно, он расположен за другим объектом, например блоком текста.
Для выделения рисунка используйте область выделения.
На вкладке Главная нажмите кнопку Выделить и выберите пункт Область выделения.
В области выделения выберите рисунок.
Чтобы переместить рисунок на небольшое расстояние, выделите его, нажмите клавишу CTRL и, удерживая ее нажатой, нажмите клавишу со стрелкой.
Чтобы переместить сразу несколько объектов, сначала сгруппируйте их, выполнив указанные ниже действия.
Выберите первый объект.
Удерживая на удержании клавишу CTRL, выберите другие объекты.
Щелкните правой кнопкой мыши один из объектов, найдите группу ивыберите группу.
Совет: Если вам не удается сгруппировать или выбрать несколько рисунков, возможно, рисунок находится в тексте. В этом случае обратитесь к статье Открытие параметров разметки, чтобы изменить макет рисунка на любой параметр в области Обтекать текстом.
Чтобы точно задать выравнивание и положение рисунка, настройте выравнивание относительно полей или столбцов, абсолютное положение в сантиметрах или относительное положение в процентах, используя окно Макет. Этот способ удобен, если нужно расположить рисунок на определенном расстоянии от другого объекта, например от края страницы.
Выберите значок Параметры разметки.
Если вы не можете выбрать ни один из параметров положения на вкладке Положение, выберите вкладку Обтекавание текстом, а затем выберите любой параметр, кроме В тексте.
Если вы хотите, чтобы рисунки на странице перекрывали друг друга, включите этот параметр в окне Макет.
Выберите значок Параметры разметки.
Внизу вкладки Положение в группе Параметры установите флажок Разрешить перекрытие.
Повторите это действие для каждого рисунка, для которого требуется разрешить перекрытие.
Вы также можете выравнивать рисунки относительно друг друга или других объектов на странице. Хотя это невозможно сделать с помощью значка Параметры разметки или диалогового окна Макет, это задачу часто требуется выполнять при настройке рисунков.
Удерживая на удержании клавишу CTRL, выберите каждый объект, который вы хотите выровнять.
Перейдите в параметры Формат рисунка или Формат > Выровнять,а затем выберите один из вариантов, например По центру, Сверху или Снизу.
Привязка объекта (
) указывает на расположение изображения или объекта относительно текста в документе. Привязки не отображаются для встроенных рисунков; встроенные объекты связаны с тем местом в тексте, куда они были вставлены, и обрабатываются как текстовые символы.
Все остальные варианты обтекания («По контуру», «Вокруг рамки», «Сквозное», «Сверху и снизу», «За текстом», «Перед текстом») привязываются к определенному месту в документе; привязка указывает на абзац, с которым связан объект. Выберите рисунок, а затем выберите значок Параметры разметки, чтобы узнать, как будет вставлен рисунок.
Примечания: Если вы выбрали рисунок, но он не в тексте, но не отображается привязка объекта, вы можете убедиться, что привязки показаны двумя способами:
Показать знаки форматирования На вкладке Главная в группе Абзац выберите показать или скрыть ¶.
Всегда показывать привязки Выберите Параметры > > отображения, а затем выберите Привязки объектов.
Поскольку привязки просто показывают относительное положение изображения на странице, их невозможно удалить. Они не должны мешать настройке нужного положения рисунка на странице.
Дополнительные сведения и примеры см. в статье Обтекание рисунков текстом в Word.
Если вы хотите, чтобы изображение оставалось на месте даже при удалении текста вокруг него, можно закрепить его привязку:
Выберите значок Параметры разметки.
Выберите Дополнительные ивыберите Закрепить привязку.
Примечание: Так как привязки не используются для рисунков с обтеканием «В тексте», для них недоступна блокировка привязки и все другие параметры размещения.
См. также
Если вы вставили рисунок в документ, используя Word в Интернете, вы можете переместить его путем копирования и вставки, а также применить к нему форматирование абзаца, например вертикальные интервалы и выравнивание по центру. Однако невозможно переместить рисунок, вставленный с помощью классической версии Word, если у него есть обтекание текстом или его положение на странице фиксировано.
Если вы не можете внести изменения в рисунок и у вас есть настольная версия Word, выберите Открыть в Word, чтобы открыть документ в Word и внести изменения в его макет.
Закончив, нажмите клавиши CTRL+S, чтобы сохранить документ в исходном месте. Затем вы можете снова открыть его в Word в Интернете и продолжить редактирование. Word в Интернете сохранит параметры макета, которые вы применили в классической версии Word.
Обтекание текста вокруг рисунка
Совет. Видео не на вашем языке? Попробуйте выбрать Скрытые субтитры 
.
Выберите нужный макет.
Совет: При выборе варианта В тексте рисунок помещается внутри абзаца, как будто это текст. При добавлении и удалении текста положение рисунка будет меняться. Остальные варианты позволяют перемещать рисунок на странице, при этом текст будет выводиться вокруг него.
Дополнительные сведения о параметрах обтекания текстом и точках обтекания см. в разделе Параметры обтекания текстом.
Вы можете добавить рисунок в левый верхний угол документа и сделать так, чтобы текст обтекал его.
Выберите Формат рисунка или Формат > Положение и в разделе Обтекание текстом выберите Сверху слева.
Совет: Вы можете перетащить изображение в любое место документа и выровнять его любым способом. Чтобы настроить обтекание текстом выберите Формат > Обтекание текстом > Дополнительные параметры разметки.
Вы можете добавить рисунок в центр документа и сделать так, чтобы текст обтекал его.
Выберите Формат рисунка или Формат > Обтекание текстом > Квадрат.
Выберите Положение > Дополнительные параметры разметки.
На вкладке Положение щелкните Выравнивание и выберите По центру в раскрывающемся списке.
Рядом с полем относительно выберите Страницы и нажмите ОК.
Примечание: Вы можете перетащить изображение в любое место документа и выровнять его любым способом. Чтобы настроить обтекание в Word выберите Формат > Обтекание текстом > Дополнительные параметры разметки.
Вы можете добавить изображение в документ и сделать так, чтобы текст обтекал его в соответствии с его формой.
Совет: Рекомендуется использовать рисунки с прозрачным, белым или сплошным фоном.
Выделите рисунок и перетащите его на середину страницы или туда, куда нужно.
Выберите Формат рисунка или Формат > Обтекание текстом > По контуру.
На вкладке Формат выберите Удалить фон.
Примечание: Вы не сможете удалить фон из векторных изображений.
Щелкните в любом месте за пределами изображения, чтобы увидеть, как текст обтекает его.
Настройка обтекания текстом
Если между текстом и изображением остается слишком много места, можно настроить контур обтекания вручную.
Выберите рисунок, щелкните Формат рисунка или Формат и нажмите Обтекание текстом > Изменить контур обтекания.
Перетащите точки контура обтекания ближе к рисунку или дальше от него, пока не получите устраивающий вас результат. Чтобы создать дополнительную точку, перетащите красную линию.
Дополнительные сведения о параметрах обтекания текстом и точках обтекания см. в разделе Параметры обтекания текстом.
Вставляемые рисунки, размещенные в тексте, привязываются к месту вставки и воспринимаются как текстовые символы. Они автоматически перемещаются вместе с окружающим текстом.
Нажмите Формат рисунка или Формат и выберите Обтекание текстом > В тексте.
Вы можете сделать так, чтобы рисунок точно оставался на месте при добавлении или удалении текста.
Нажмите Формат рисунка или Формат и выберите Обтекание текстом > Зафиксировать положение на странице.
Настройка обтекания текста вокруг рисунка или объекта-рисунка
Выделите рисунок или объект.
Нажмите Формат рисунка или Формат фигуры и выберите Упорядочить > Обтекание текстом.
Если окно Word достаточно широкое, пункт Обтекание текстом будет отображаться прямо на вкладке Формат рисунка.
Выберите параметры обтекания, которые нужно применить.
Например, В тексте, Сверху и снизу и За текстом.
Изменение положения рисунка или объекта-рисунка относительно текста
Выделите рисунок или объект-рисунок.
Нажмите Формат рисунка или Формат фигуры и выберите Упорядочить > Положение.
Если окно Word достаточно широкое, пункт Положение будет отображаться прямо на вкладке Формат рисунка.
В меню Положение выберите необходимый тип расположения или щелкните Дополнительные параметры разметки, чтобы настроить расширенные параметры.
Настройка обтекания текста вокруг таблицы
Удерживая клавишу CONTROL, щелкните таблицу и выберите Свойства таблицы.
Если в контекстном меню нет пункта Свойства таблицы, нажмите клавишу CONTROL и щелкните в другом месте таблицы.
В окне Свойства таблицы в разделе Обтекание текстом выберите Вокруг.
Чтобы изменить расстояние от таблицы до текста, выберите Размещение, а затем в окне Размещение таблицы установите значения в разделе Расстояние от окружающего текста.
Обтекание текста вокруг рисунка или графического объекта
Выделите рисунок или объект.
Выберите Формат, а затем в разделе Упорядочить нажмите Обтекание текстом.
Выберите параметр обтекания, который нужно применить.
Совет: Чтобы изменить положение рисунка или графического объекта на странице относительно текста, выделите рисунок или объект, щелкните Формат > Положение и выберите нужное место.
Обтекание текстом для таблицы
Откройте вкладку Макет таблицы, а затем в группе Параметры нажмите кнопку Свойства.
В Обтекание текстом нажмите кнопку Вокруг.
Чтобы задать горизонтальное и вертикальное положение таблицы, расстояние от окружающего текста и другие параметры в разделе Обтекание текстом, щелкните Размещение и задайте необходимые параметры.
Совет: Если для создания таблицы применяется инструмент Рисование, расположенный на вкладке Таблицы в группе Нарисовать границы, можно автоматически применить обтекание текстом, удерживая нажатой клавишу OPTION во время рисования таблицы.
Существует ограниченная группа параметров обтекания текстом для изображений в Microsoft Word в Интернете.
Вставьте и выберите рисунок.
Выберите Работа с рисунком > Формат > Обтекание текстом.
Если вы вставили рисунок в документ, используя Word в Интернете, вы можете переместить его путем копирования и вставки, а также применить к нему форматирование абзаца, например вертикальные интервалы и выравнивание по центру. Однако невозможно переместить рисунок, вставленный с помощью классической версии Word, если у него есть обтекание текстом или его положение на странице фиксировано.
Если вы не можете изменить изображение и у вас есть классическая версия Word, щелкните Открыть в Word, чтобы открыть документ в Word и изменить его макет.
Закончив, нажмите клавиши CTRL+S, чтобы сохранить документ в исходном месте. Затем вы можете снова открыть его в Word в Интернете и продолжить редактирование. Word в Интернете сохранит параметры макета, которые вы применили в классической версии Word.