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

14 янв. 2009 г.
Posted by Allpa

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

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 - размеры отступа и рамки в пять пикселей (я сделала их одинаковыми);
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3i-6YcdFJDhqTWiGsKHmLtW2lxcqZSMCMh0t2rNPl3pcRQV8FWUuIhwNxziqnYLSgtnkZ_q2i6jpOfQidRhL_XVtSwraJv_QaOx1xhRMLfsUXRDbILYG5sO7N-Q0mpxfwrGPDkRutVc/ - ссылка на картинку;
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-кнопок специально для этих целей - очень удобно).

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


8. Включение HTML кода в наши статьи

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

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


9. htmlka

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


Продолжение следует.

Предлагаю ознакомиться с аналогичными статьями:



Подписаться на сообщенияПодписаться на комментарии
© "Кошка у камелька" Allpa's blog | 2009 | При копировании материалов гиперссылка на сайт обязательна