В прошлой статье мы рассматривали вопрос как вставить изображение в текст.

Как видите, при вставке картинки в текст,  получилось слияние границ картинки с текстом. К тому же текст у нас практически не отформатирован и смотрится не очень красиво. Нам нужно это исправить.

Слияние картинки с текстом

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

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

Второй способ - с помощью меню "Вставить/редактировать изображение".

Третий  способ - использовать html-код.

Оформление картинки для вставки с помощью фотошопа

Пример вставки картинки с помощью фотошопа

Это пример первого способа вставки картинки.

С помощью фотошопа сделаны поля размером 10 px.

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

Представьте, что это рамка белого цвета.

На странице с белым фоном, белая рамка картинки не видна, потому будет смотреться как отступ от картинки.

Вставка картинки с обтеканием текстом с помощью меню  "Вставить/редактировать изображение"

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

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

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

Вставки картинки с обтеканием текстом с помощью html-кода

Здесь нужно определиться, по какому краю Вы будете выравнивать изображение по левому или по правому. Если Вы выравниваете картинку по левому краю, нужно чтобы текст обтекал ее справа. И наоборот, если Вы вставляете картинку справа, нужно чтобы текст обтекал картинку слева.

Приведу пример вставки картинки с обтеканием текстом справа.

• Вставьте картинку с выравниванием по левому краю.
• Кликните  по иконке  "HTML" в меню редактора.
• Перед Вами откроется окно, в котором наша страница будет отображаться в исходном коде, т.е. в HTML-коде. Найдите нашу картинку и вставьте перед ней  html- код:
• <div style="float:left; margin-left: 5px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px; ">. После картинки вставляем код: </div>
• Жмем "Обновить"

Так это будет выглядеть в редакторе HTML-кода

Примечание: Для тех, кто совершенно не знаком с html-кодами объясню наши действия. Мы выделили фрагмент документа и прописали для него стиль: выровняли элемент по левом краю с обтеканием  текста по его правой стороне и  задали величину отступов: слева - на 5 px, справа - на 10px, сверху - на 5px, снизу - на 5px.

Вот так теперь выглядит наша статья. Текст в статье отформатирован так, чтобы равномерно распределялся вдоль картинки.

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

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

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

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