9.1.09

Blogger: Картинка с подписью!

15 comments

Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков.
У Кайла в блоге можно найти целую коллекцию фотографий этих персонажей:
Russia: What to do With Old Mufflers and Converters!
Расскажи больше...

Александр, который ведет блог Записки европейца, кстати очень интересный. Спросил меня как-то на днях (ну, по крайней мере уже в этом году), как я делаю подписи к картинкам.

Думаю, что и другим читателям это будет интересно. Для того чтобы делать подписи к картинкам нам надо будет припомнить все что мы знаем об Html (Стандартном языке разметки документов). Ну или хотя бы самое основное, что Html будучи языком разметки документов состоит из этих самых меток, которые принято называть тэгами (tag). Метки (т.е. тэги) бывают одиночными (непарными) или парными. И всегда заключаются в угловые скобки - знаки меньше и больше < >.

Примером одиночного - непарного тэга может служить тэг описания картинки <img ...>, который говорит вот здесь у нас будет картинка, а внутри тэга записываются его параметры такие как адрес (т.е. где эта картинка лежит в интернете) - это обязательно, конечно, заголовок картинки (это надпись, которую ваш читатель увидит, если наведет мышкой на картинку) и т.д. подробно я об этом рассказывала в статье: Blogger: Меняем размер картинки!. Очень рекомендую перечитать!

Большинство же тэгов являются парными и это естественно, они отмечают начало и конец чего-то. Ну, например абзаца, или текста который является ссылкой (кстати, если вы не знаете как правильно оформить на Html ссылку пожалуйста сюда: Blogger: Начала HTML - Ссылки!, но сегодня впрочем нам это не понадобится.) Парный тэг состоит из двух частей: метка начала тега <типтэга ...> и метка конца </типтэга> Типтэга - это несколько латинских букв (иногда одна латинская буква). Так мы уже рассматривали:

a - для ссылки (парный)
img - для картинки (непарный)
center - для позиционирования чего- либо по центру (парный)

Самые любознательные могут посмотреть перечень всех тегов Html.

И еще нам придется припомнить то немногое, что мы знаем об CSS стилях: Blogger: Голография и раскрашивание скрипта!. В общем-то, идти по ссылке прямо сейчас не обязательно, все самое важное я скажу здесь.

А самым важным является то, что в любой Html тэг можно добавить параметр style, в котором можно записать как мы хотим увидеть объект, описываемый этой меткой. Ну, например ширину и высоту картинки, величину, шрифт и цвет буковок в абзаце и т.д.

Ну вот, все подготовительные слова сказаны можно, наконец, переходить к картинкам с подписями:

Загружаем картинку через Blogger.

0) Меняем размеры картинки перетаскиваем её на нужное нам место;
1) Переходим из режима Создать в режим Изменить Html;
2) Видим абракадабру от Blogger'а, описывающую нашу картинку. Я вот например увидела такую:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 300pх; height: 225px;" src="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg" alt="" border="0" /></a>

3) Не пугаемся ничего, а окружаем этот текст, описывающий нашу картинку, парным Html тэгом описания блока: <div style=""> - перед началом описания картинки и </div> в конце описания.

4) Теперь печатаем наш текст для описания картинки. Печатаем его между концом описания картинки и закрывающим тегом </div>.

5) Внимательно смотрим на описание картинки и находим в нем параметр style

6) Начинаем переносить, а некоторые элементы копировать из стиля описания картинки в стиль описания блока.

Так элемент описания отступов margin мы переносим из style картинки в style нашего блока. Не забываем про точку с запятой ; (переносим значит в стиле для картинки этого элемента уже не будет, а он будет только в стиле описания блока!)

Мы переносим также элемент описания обтекания текстом float.

Ширину картинки width мы копируем из style картинки в style описания блока div.

Ну, вот и всё... Пожеланию в описание style для div можно добавить

text-align: center; или text-align: justify; для размещения подписи по центру блока или выравниванию её по ширине получившегося столбца,

color:blue; - это будет цвет букв в нашем блоке - столбце. Конечно, blue взято для примера, вы туда подставите шестизначный код цвета или pink или еще английское название какого-нибудь другого красивого цвета (Про цвета я рассказывала здесь: Blogger: Готовим краски для раскраски!).

И, пожалуйста, не забываем про точку с запятой в конце описания каждого свойства!

можно так же изменить величину шрифта в нашем блоке, путем добавления свойства
font-size: 80%;

а можно поставить font-style: italic; это чтобы подпись была курсивом
и добавить font-weight: bold; чтобы текст был полужирным.

На сем моя фантазия иссякла, дорогие мои... Будут вопросы спрашивайте!

А это получившийся в этой статье код (картинка и подпись):
<div style="margin: 0pt 10px 10px 0pt; float: left; width: 300px; color: rgb(0, 102, 0); font-size: 80%; text-align: justify; font-style: italic; font-weight: bold;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg"><img style="cursor: pointer; width: 300px; height: 225px;" src="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg" alt="" border="0" /></a>Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков....</div>

Небольшое добавление: Раз уж у нас все так хорошо пошло, давайте сделаем совсем красиво!

1) Увеличиваем ширину в <div> пикселей на 10;

2) а картинку окружаем тэгами размещения по центру <center> </center>

Вот теперь я вам рассказала абсолютно всё!
А вот это полученный улучшенный код:

<div style="margin: 0pt 10px 10px 0pt; float: left; width: 310px; color: rgb(0, 102, 0); font-size: 80%; text-align: justify; font-style: italic; font-weight: bold;"><center><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg"><img style="cursor: pointer; width: 300px; height: 225px;" src="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg" alt="" border="0" /></a></center>Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков....</div>


Всем удачи и здоровья!
Света


Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

15 комментариев:

  1. Все, я просто убит - более подробного и развернутого описания я не ожидал.
    Низкий поклон, или как сейчас говорят, респект и уважуха!!!

    ОтветитьУдалить
  2. Света, добрый Вам день!
    У меня такой вопрос. Я как-то пытался у себя приводить пример кода, при этом Blogger с удовольствием принимает его именно как код, а не как текст для примера (вне зависимости от того, в каком режиме редактора я пишу). Помню, мне тогда пришлось делать скриншот и публиковать код в виде картинки. Но тогда тот, кому этот код нужен, не сможет его скопировать как текст.
    Как Вы поступаете?

    ОтветитьУдалить
  3. Мне всегда было интересно, как Вы делаете подпись под картинкой) Спасибо огромное!

    ОтветитьУдалить
  4. Светлана, расскажите пожалуйста, как сделать "облако тэгов", как у Вас "категории блога".
    А то у меня что-то никак не выходит...

    ОтветитьУдалить
  5. Александр, спасибо за лестный отзыв!

    Теперь буду ждать, когда на Вашем сайте появятся картинки с подписями - это будет для меня знаком, что все рассказано хорошо, понятно и ничего мной не упущено!

    Читатели-блоггеры - лучшие бетта-тестеры в мире! Ура!!!

    :)))

    ОтветитьУдалить
  6. Геннадий, здравствуйте!

    Спасибо за комментарий и вопрос. О том как вставлять Html код в статьи я написала здесь: Blogger: Включение HTML кода в наши статьи!

    А чтобы мой ответ для Вас не стал просто ссылкой добавлю, что в свои статьи я вставляю Html код, оформляя его как цитату. А в своем шаблоне я подправила описание стилей для .post blockquote, вставив туда свойство overflow:scroll;.

    Удачи!
    Света

    ОтветитьУдалить
  7. Спасибо, Скеггльёльд!

    А облако тэгов мы с вами сделаем... давайте на следующей неделе. Подождать сможете? ;))

    Света

    ОтветитьУдалить
  8. Света, большое спасибо!
    Как все просто, оказывается! :)
    Берем на вооружение.

    ОтветитьУдалить
  9. "А облако тэгов мы с вами сделаем... давайте на следующей неделе. Подождать сможете? ;))"

    Конечно :) Спасибо!)

    ОтветитьУдалить
  10. Света спасибо за заметку о подписяк к картинке, давно раздумывал об этой фиче. Теперь стану прикручивать:)
    Если нужна будет помощь, что-нибудь нарисовать-подкрасить - пишите:)
    Удачи

    ОтветитьУдалить
  11. У меня ничего не получилось:(

    ОтветитьУдалить
  12. Вам спасибо, Бесплатные картинки!

    С рисованием у меня всегда было туго - прямая линия по линейке через раз получалось нарисовать. Так что ваше предложение очень пригодится!

    Удачи во всем!
    Света

    ОтветитьУдалить
  13. Здравствуйте, Didelis!

    Будет время-настроение попробуйте еще очень аккуратно - думаю, что получится. А если не получится - оставьте ссылочку посмотреть как это не получилось - поправим тогда вместе!

    Всего хорошего,
    Света

    ОтветитьУдалить
  14. Светлана, большущее спасибо! Очень полезная и нужная информация. А то уже замучилась прикручивать к своим картинкам подписи.)

    ОтветитьУдалить
  15. есть ли ЕДИНЫЙ код для автоматической подписи КАЖДОЙ заливаемой в блог картинки? Как в ucoz? например. Там эта гайка вообще в настройках встроена.

    ОтветитьУдалить

Популярные сообщения