Создаём блог, часть 6-я

ОК, поехали дальше.
Немного поговорим о картинках →

7. Делаем картинку объемнее

Кошку на снегу видите? А рамочку вокруг? Об этом и пойдёт речь. :)
Тестируя разные шаблоны, я наткнулась на один, в котором каждая картинка обводилась красивой рамкой – блогеру не надо было корпеть в Фотошоп перед тем как вставить рисунок в сообщение: сведения о том, что всякую картинку юзера следует обвести рамкой, хранились… пррральна, в коде HTML блога. :)

Ваш шаблон не содержит таких сведений? Не беда, вы легко научите HTML делать рамки, если пройдёте по ссылке. :)
Я же решила, что сама хочу выбирать, обрамлять картинку рамкой или нет. И сейчас, запихивая очередного кота в пост, должна была ручками прописать код для этой картинки, который выглядел так →

<img style=»border: 5px groove #AFEEEE; padding: 5px;» src=»http://lh5.ggpht.com/_DM2EEkZHUE4/SW0SMBJ3ZSI/AAAAAAAAAJo/xkiurvPOCbI/12-December.jpg» align=left hspace=20 vspace=15>

Где →
padding – отступ от изображения;
border – собственно рамка;
groove – стиль рамки;
#8B7765 – цвет рамки;
5px – размеры отступа и рамки в пять пикселей (я сделала их одинаковыми);
http://lh4.ggpht.com/_DM2EEkZHUE4/SlnuV0IzRQI/AAAAAAAABCA/ka4QSLSjjK8/kisa.jpg – ссылка на картинку;
align=left – указание на то, что картинку следует разместить слева (right – справа);
hspace=20 vspace=10 – обтекание картинки текстом на расстоянии справа/снизу в 20 и 15 пикселей (если не указать эти значения, текст будет прижиматься к изображению – неэстетично).

На некоторых шаблонах (вот как на этом моём) текст при добавлении рамки вышеуказанным способом автоматически прижимается вплотную к рамке. Если бы не Tod, я бы ни в жиссь не справилась с проблемой. Но сей доблестный рыцарь пришёл на помощь – вот другой код для картинки с рамкой →

<img style=»border: 5px groove #AFEEEE; margin: 0px 10px 10px 0px; padding: 5px;» src=»http://lh5.ggpht.com/_DM2EEkZHUE4/SW0SMBJ3ZSI/AAAAAAAAAJo/xkiurvPOCbI/12-December.jpg» align=left>

где margin – тот самый отступ текста от картинки (сверху, справа, снизу, слева). Видите? Сверху и слева – нулевое значение, а справа и снизу – отступ текста на 10 пикселей.
Отступ снизу я тоже потом поставила в нулевое значение – снизу он и так отступает, по умолчанию.

Неразбериха с кодами случилась по одной причине: я почему-то не использую стандартный загрузчик картинок (наверху формы отправки сообщений – видите? там теги для выделения текста жирным шрифтом, курсивом, оформление цитаты, и там же – кнопка для изображений). Мне отчего-то легче оперировать стандартными html-кодами.

И вот теперь недоразумение прояснилось – Светлана в комментариях к своей теме, посвящённой картинкам в блоге, даёт подробные объяснения →

За отступы текста от картинки отвечает параметр margin. И когда мы загружаем картинку через Blogger, он нам этот параметр (margin) в style включает и дает размеры в зависимости от того хотим ли мы чтобы картинка была по левому краю, по правому краю или по центру.

В общем случае записываем margin следующим образом margin: tpx rpx bpx lpx; где px значит пикселей, а t, r, b, l число этих пикселей которые надо соответственно отступить:

t(op) – сверху
r(ight) – справа
b(ottom) – снизу
l(eft) – слева

а порядок, в котором следуют эти отступы запоминается очень просто с помощью слова TROUBLE.

То есть код для картинки с рамкой меняется в зависимости от того, загружаете ли вы изображение используя стандартные средсва Blogger, вводите ли код html самостоятельно (я поступаю именно так, потому как в моём браузере, Опера, есть панель html-кнопок специально для этих целей – очень удобно).

Поэкспериментируйте – вы сразу поймёте, что отвечает за что, и какие значения вам нравятся больше и как вам удобнее составлять сообщения. :)

Кто хоть раз пытался вставить HTML-код в сообщение, объясняя, например, как модифицировать блог с помощью правки HTML-шаблона, тот обязательно столкнулся с этой проблемой – стоит опубликовать такую новость в блоге, код становится невидимкой. :)

Почему так происходит, как раз и рассказывает прекрасная Светлана. И дарит ссылку на онлайн-сервис Encode / Decode HTML Entities, каковой как раз и позволяет не мучиться: вводим код сразу под строчкой «Convert text to HTML entities (and vice-versa)«, жмём внизу кнопку «Encode«, получаем страшную абракадабру (ну, на мой непросвещённый взгляд), копируем её, забрасываем в своё сообщение, включаем предварительный просмотр – оп-ля! – код виден всем и каждому. :)

Весьма интересный и полезный ресурс. Зубрам от сайтостроения он, наверное, кажется детским лепетом на лужайке, а вот для таких в HTML «чайников» как я – самое оно: основные коды, примеры применения, тонкости оформления таблиц, ссылок, текста, картинок и т.д. – очень наглядно, очень доступно описано и показано. Рекомендую. :)

Popularity: 3%

Связанные записи

• Создаём блог, часть 8-я (4)
• Создаём блог, часть 7-я (7)
• Создаём блог, часть 5-я (1)
• Создаём блог, часть 4-я (0)
• Создаём блог, часть 3-я (2)

Подписаться на обновления Allpa.ru с помощью RSS или Email.
Подписаться на все комментарии в блоге (RSS). Найти меня в Твиттере.