вторник, 15 января 2013 г.

Как вставить 3 картинки в ряд?




Для опытных пользователей фото редакторов или для любителей Instagram вставить несколько картинок в ряд совсем не сложно, как впрочем и для опытных блогеров. Что же делать тем, кто только делает первые шаги по ведению блога. Большинство предложенных решений сложны и непонятны. Впрочем, я сама еще вчера не умела этого делать. 

Раньше я бы сделала коллаж на компьютере и вставила его целиком. Сейчас сплелись три проблемы в один узел: мой бук не позволяет работать с папками, не открывается Пикаса на буке и бесплатное место в веб-альбомах Пикаса подходит к концу..плюс супер скоростной инет с флешки. Пришлось искать решение в на доступном языке и методом проб и ошибок превращать его в пошаговую инструкцию.

 Итог Вы уже видели: три фото моей любимой мамули в ряд. Интересно? Читаем.

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

Допустим, что Вы уже написали часть сообщения и именно в данном месте нужно разместить картинки в ряд. Замираем на минутку и, ничего не трогая, ищем в том ряду, где Вы выбираете шрифт, цвет, вставляете изображения, кнопочку, которую раньше не замечали или просто боялись и игнорировали - HTML. 

Нашли? Не пугайтесь, дальше сложно не будет. Смело жмём на эти 4 заветные буковки и получаем вместо написанного нами понятного текста набор закорючек с местами знакомыми буквами. Теперь в конце тех загогулин , то есть в том месте, где Вы хотите разместить фото, вставляем код 

<table>
<tbody>
<tr>
<td>столбец 1</td>
<td>столбец2</td>
<td>столбец3</td>
</tr>
</tbody>
</table>

Больше ничего не трогая в тех дебрях, жмём левее той кнопочки СОЗДАТЬ и попадаем в привычное сообщение, в котором после текста появились 

столбец1 столбец2 столбец3

Дальше уже все просто: ставим курсор перед СТОЛБЕЦ1 и вставляем в обычном режиме изображение (да-да, как обычно Вы это делаете). 

получаем это:


столбец 1
столбец2 столбец3

Далее аналогично ставим курсор перед СТОЛБЕЦ2 и вставляем вторую картинку.


столбец 1
столбец2
столбец3

У меня третью фотографию вставлять некуда, не хватает ширины сообщения, поэтому я выбираю изображение маленькое и уже привычными движениями добавляю последнее фото.


столбец 1
столбец2
столбец3

Дело осталось за малым. Просто как обычный текст стереть эти столбцы. Готово! Смотрим то, что получилось и довольно улыбаемся)))

А хотите больше картинок? Уже не страшно и хочется узнать новенькое? Напишу в ближайшее время, так как сначала нужно самой все попробовать. Буду рада комментариям и если не сложно, делитесь ссылками. Не столько рекламы хочется, сколько активных дискуссий, ведь у нас у всех есть свои хитрости. Так давайте делиться!

ВАЖНО! Часто получается не очень красиво из-за разного размера изображений (как у меня одна картинка меньше двух других). В данном случае высота у всех трех изображений должна быть одинаковой. Как это сделать и сделать просто написано здесь

62 комментария:

  1. Блог веду аж с 2010 года, но вот об этом не слышала! Чесслово! Спасибо!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, но уверена, что ты не будешь этим пользоваться, ты уже подсела на инстаграм))) а что делать не яблочникам?

      Удалить
    2. Все доступно описано! Спасибо!!!!

      Удалить
  2. Здорово!!! Ооочень полезная информация!

    ОтветитьУдалить
    Ответы
    1. Рада помочь, Алинка. Я уже разобралась как размещать группу фотографий (например вверху 2,ниже 3). Сегодня ночью буду учиться как менять размер фотографий, чтобы они красиво стояли,ровненько.

      Удалить
  3. Я идиёт) Это ж реально простой способ - сделать табличку из картинок.
    Хотела пояснить все эти закорючки, но форма комментов не приняла код html...

    ОтветитьУдалить
    Ответы
    1. пиши на ящик))но я следущем посте выложу и про таблицу, и про строчки, и про столбцы (если ты об этом)Надо разобраться с размерами только

      Удалить
  4. Вот-вот, у меня бесплатное место в Пикаса уже закончилось. В прошлом месяце писала пост, и вдруг фотки не вставляются. Объем тю-тю, че делать дальше не знала. Приходится теперь постоянно коллажами увлекаться, но в этом есть плюс - можно больше фоток показать )). Но в следующий раз попробую твой совет ))
    И еще расскажите,пжалста, что такое инстаграм??? не разберешь без ста грамм ))

    ОтветитьУдалить
    Ответы
    1. И тут на помощь я пришла! )))
      Сама с этим столкнулась еще ооочень давно, ох я тогда чуть блог не удалила совсем. Но в последствии нашла для себя оптимальный вариант! Готова поделиться. Писала когда-то об этом здесь: http://fetass.blogspot.ru/2012/03/blog-post_4902.html

      Удалить
    2. Светик, спасибо! Обязательно попробую. Сейчас пока загружаю фотки в яндекс, а дальше и в пост попробую вставить ))
      Наташа, круто! Спасибо за совет! У меня сегодня получилось :) Пока оценить не приглашаю - пост еще не дописала.
      Блин, и если честно, не знаю когда напишу ((, все никак с мыслями собраться не могу.

      Удалить
    3. Наташа, куда мысли разбежались?
      Здорово, что все получилось))) Насчет места в Пикасе..Есть способ БЕСПЛАТНО увеличить предоставляемые услуги от Пикаса, опубликую скоро. Но совет Светы тоже эффективен.
      Инстаграм это приблуда для гаджетов от Яблока. Это и умная программа, и соцсеть, и способ мгновенно делиться сообщениями..(но я с ней лично не знакома) А вот у Светы в блоге можно найти пост где она пишет об Инстаграм

      Удалить
    4. У меня есть пост об Инстаграм? Да? Упс, не помню

      Удалить
    5. А почему Инстаграм только для яблочников? У меня Андроид, и Инстраграм там прекрасно функционирует))

      Удалить
    6. :) Наташа, мысли убежали к теории вероятности, которая висит у меня в долгах чуть ли не со второго семестра (посыпаю голову пеплом). И к моей новой школе, навстречу к финскому языку :)))
      Буду с нетерпением ждать пост о том, как на халяву использовать возможности Пикаса ;) И будут у нас потом и 3 столбца и Светин яндекс.фотки, и Пикаса... вообще крутышки будем :)))

      Удалить
    7. А то! До спецов нам, конечно, далеко, но поводов для гордости собой отхватим!

      Удалить
  5. Спасибо!)) в ближайшем посте опробую эту новую для меня технику))))

    ОтветитьУдалить
    Ответы
    1. Пользуйся на здоровье)) А я как только разберусь с ноутом, напишу пост как разместить рядом и друг над другом произвольное количество изображений и пост о том, как менять размер этих изображений, чтобы все выглядело гармонично

      Удалить
  6. Спасибо большое, очень доходчивое разъяснение ))

    ОтветитьУдалить
  7. Ну не гений ли пишет эти строки таким понятным языком?;)

    ОтветитьУдалить
    Ответы
    1. За гения спасибо! Но боюсь, до гения мне очень далеко. Просто мне понятны те сложности, которые возникают у обычных блогеров (сама такая же), поэтому когда нахожу новое и интересное, то делюсь со всеми, расписывая пошагово что и как сделала.

      Удалить
  8. спасибо!!! у меня получилось....красота!!!

    ОтветитьУдалить
    Ответы
    1. Галина, я очень рада, что мои инструкции работают. Единственная просьба, укажите у себя в Google+, там, где Вы писали о себе ссылку не на свой профиль, а на свой блог, чтобы Вас найти стало проще. Хорошо?

      Удалить
  9. Супер, очень пригодится, большое спасибо))

    ОтветитьУдалить
  10. А у меня после вставки картинок (это получилось, спасибо) не пишется дальше текст. Т.е. он пишется, но в формате вставленных картинок и они "убегают" куда попало. Как продолжить просто дальше текст сообщения (как у вас)?

    ОтветитьУдалить
    Ответы
    1. Лида, я тоже с таким сталкивалась. Для того, чтобы этого избежать, прежде чем вставлять фото, напишите любую фразу, хоть АБРА-КАДАБРА-СИМ-САЛАБИМ, и вставляйте фото ПЕРЕД этой фразой, потом когда уже все вставите, сможете писать дальше, а фразу удалите. Суть? Нужно, чтобы ниже вставленных фото оставались пустые строчки (в данном случае фраза), иначе курсор не встает.

      Удалить
    2. Да-да, я сама уже к этой мысли пришла, но Вам спасибо за то, что подтвердили мои догадки. Мой блог пока только формируется, и я к Вам каждый день заглядываю, спасибо, что так охотно помогаете! ))
      У меня есть еще вопрос, он, правда не по теме поста, если что подскажите, где лучше его задать. У меня очень скудный набор шрифтов в блоггере, не идущий ни в какое сравнение с моими вордовскими или фотошопными шрифтами на компе. Это меня, как художника, очень напрягает. Как расширить арсенал доступных блоггеру шрифтов?

      Удалить
    3. Лида, я не художник, но скудность шрифтов и меня расстраивает. У меня в ворде тоже шикарные шрифты.

      Удалить
    4. А, понятно, т.е. это проблема Блоггера. Спасибо! Хотя мне кажется, я видела блоги с симпатичными заголовками и названиями сообщений. Ну ладно, как говорил Семен Семеныч: будем искать! )))

      Удалить
    5. В шапке написать красивым шрифтом не проблема. Достаточно в Пайнт изменить размер картинки под нужный и в нем же сделать надпись (шрифты, установленные в Ворд работают и там), а уже готовую вставить в блог.

      Но вот все остальные шрифты...

      Удалить
  11. как вы мне помогли...уже второй раз обращаюсь за советом. в первый было всё понятно. и снова вас нашла.

    ОтветитьУдалить
    Ответы
    1. А Вы вставьте в блог мою кнопочку (пост "Раздача кнопок на любой вкус") и тогда найти меня будет очень просто, достаточно кликнуть по кнопочке.

      Удалить
  12. Энн, спасибо! Все получилось! А вот как сделать чтобы прикрепленная картинка открывалась в новой вкладке и во весь размер?

    ОтветитьУдалить
    Ответы
    1. Как обычно, либо навести курсором, нажать ПРАВОЙ клавишей мышки и выбрать ОТКРЫТЬ В НОВОЙ ВКЛАДКЕ. Либо как я узнала на днях, навести курсор и нажать на КОЛЕСИКО у мышки. А вообще, достаточно нажать на фото, как увидишь его в полном размере. Первые два способа именно для открытия в НОВОЙ вкладке. Последний удобен для просмотра, тем более что картинки снова стали работать нормально (а то все расстраивались, что удобная функция просмотра исчезла)

      Удалить
  13. Спасибо. Все получилось с первого раза.

    ОтветитьУдалить
  14. Я думал что платформы для блогов сделаны специально что бы простые юзеры не возились с html напрямую, отсутствие таблиц выглядит как серьёзная недоработка.

    ОтветитьУдалить
    Ответы
    1. Иван Соколов, я с Вами согласна. Чего-то не продумали. Хотя если посмотреть на их Гугл плюс, где вообще все сыро и не понятно...

      Удалить
  15. Сколько мучалась с этими картинками, вечно в блоггере они скачут как хотят, а таблица помогла сделать из картинок меню для блога -спасибо. К тому же методом тыка научилась быстро, без кодов вставлять рядом две картинки,если интересно вот ссылка - http://trizza-handmade.blogspot.com/2013/07/blogger.html

    ОтветитьУдалить
    Ответы
    1. Daria, спасибо за отзыв и за ссылку. Обязательно посмотрю.

      Удалить
  16. Очень полезная информация! Я Вам очень благодарна, что Вы собрали столько очень нужной информации по работе с блогом в одном месте!!!!!!!!!!!!Спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Наталья Дрензелева, я рада, что Вам пригодилось. Думаю, что вместе мы еще много нового и интересного найдем.

      Удалить
  17. А не проще убрать переносы
    или после 1-й и 2-й картинками?

    ОтветитьУдалить
  18. Большое спасибо за статью!! И за блог! Нашла массу полезных для себя вещей!

    ОтветитьУдалить
  19. Спасибо автору. Всё думала, как это у других несколько картинок в ряд. Пойду пробовать. А как картинку поместить в текст?

    ОтветитьУдалить
  20. Вы мне так помогли, столько времени искала что-то подобное)) Огромное спасибо!

    ОтветитьУдалить
  21. Спасибо огромное, Энн. Это действительно классная информация, а самое главное своевременная. Спасибо, спасибо, спасибо, Вы мне очень помогли. Удачи Вам.

    ОтветитьУдалить
  22. Спасибо огромное! Очень пригодилось)

    ОтветитьУдалить
  23. Спасибо огромное!!! Не знала, как вставить рядом изображения.

    ОтветитьУдалить
  24. Вот это да... Блин не считаю себя чайником, понял что учись, учись и учись....Спасибо.

    ОтветитьУдалить
  25. Дай вам Бог здоровья и счастья! ОЧЕНЬ доступно и понятно! Спасибо!

    ОтветитьУдалить
  26. Дякую!!! Корисна інформація.

    ОтветитьУдалить
  27. Спасибо ! Очень кстати . Здорово помогло !

    ОтветитьУдалить
  28. Искреннее спасибо, Энн! Всё гениально просто! Даже у меня получилось!)) Успехов!

    ОтветитьУдалить
  29. Огромное спасибо за доступность-ясность-пошаговость!!
    Я теперь умею ставить три фот-ии в ряд!! Благодарю!
    Исшастала кучу сайтов..у ВАС - красота для чайника!

    ОтветитьУдалить
  30. А можно как-то, чтобы в компьютерной версии блога изображения были в одной строке, а в мобильной друг под другом? :-)

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

Дорогой мой читатель, если Вам понравилась статья, то напишите отзыв, мне очень приятно читать комментарии. А если Вы посчитаете, что статья достойна того, чтобы ее порекомендовать остальным, нажмите на +1.

Хотите сохранить полезную информацию в соц.сетях? Выбираем и сохраняем!

LinkWithin

Related Posts Plugin for WordPress, Blogger...