ЖЖ-ликбез. Выравнивание картинок в тексте

Итак, пост для Живого Журнала написан, вычитан, откорректирован. Вся интрига вынесена в видимую с морды компактную часть, а обширная развязка спрятана под кат. Можно жать кнопку "Отправить в..."? Ан нет :). Текст - текстом, но для того, чтобы Ваш Живой Журнал был действительно живым, его необходимо оживить тематическими картинками или фото. Это утверждение, кстати, справедливо не только для Живого Журнала, но и для любого другого блога или сайта. Визуальная информация всегда воспринимается в первую очередь и позволяет составить первое впечатление об блоге у случайного посетителя и повлиять на то, станет ли он его постоянным читателем.Однако, разбросанные как попало фотографии отнюдь не делают блог или сайт привлекательными. Примеров таких на Живом Журнале - не счесть. Я лично люблю перелистывать порой френдленту и часто натыкаюсь в ней на весьма интересные мысли по тому или иному вопросу. Но дикое выравнивание фотографий (вернее практически полное отсутствие каких-либо попыток это сделать) у некоторых моих френдов порой скребет как ножом по сердцу. Поэтому этот пост, главным образом предназначен для них.

Легко и просто вставлять картинки, которые по ширине соизмеримы с шириной текстового поля вашего блога. Для этого достаточно пару раз нажать "Enter" после текста в визуальном редакторе или вставить пару тэгов <br />, если работаете (как я) в HTML-режиме, после чего сделать то же самое после вставки картинки, не заморачиваясь особо на обтекании её текстом (текст получится четко выше и ниже изображения).

Немного придётся потрудиться, если картинка небольшая и её приходится вписывать в текст. Как это выглядит в визуальном редакторе особо останавливаться не буду, поскольку всё видно в окошке предросмотра. Одно лишь скажу, что в данном случае стоит выбрать выравнивание по левому краю или (в некоторых случаях) по правому краю, не забыв при этом про отступы (!) Согласитесь, некрасиво, когда текст начинается прямо из картинки (при обтекании текстом справа) или заканчивается прямо в ней (при обтекании текстом слева). Но вот с отступами почему-то при работе в визуальном редакторе у меня ничего не получается. После того, как я вставил картинку в этот пост в визуальном редакторе и перешел в HTML-вкладку, код вставки выглядел следующим образом:

<img hspace="10" height="231" width="160" vspace="10" align="left" src="ссылка на картинку" alt="" />

За отступ, по идее должен отвечать атрибут vspace="10", но он почему-то отказывается выполнять свою работу. Поэтому я предпочитаю вставлять картинки в HTML, работая со стилями. Вот как выглядит код вставки картинки в моем варианте:

<img style="border: 0pt none; float: left; margin-right: 10px; margin-bottom: 10px; width: 200px;" alt="PROдвинутый блог о выравнивании картинок в тексте" src="ссылка на картинку" />

Если желаете, чтобы картинка отображалась в правой части поста, меняете в коде выравнивание на float: right; , а отступ на margin-left: 10px;

Ну вот и всё об этом :). Удачного блоггинга!

Хотя, конечно, на одном красивом дизайне блог или сайт держаться не будут. Хотите, чтобы плоды ваших трудов были доступны для всеобщего обозрения - продвигайте свой проект в поисковых системах. Отличную возможность раскрутить свой сайт по тематическим ключевым словам в таких популярнейших поисковых системах как Яндекс и Google предоставляет студия webakula.com.ua в Харькове. Пройдите по ссылке и узнайте как получить бесплатную консультацию и заказать услугу продвижение и оптимизация сайта в студии. Будьте первыми среди конкурентов!