Краеведение - солнечный зайчик души. Идея протеста не вызывает? Тогда Вы - наш человек. Заглядывайте на огонёк. Всегда вам рады. Краевед-краеведу - друг, товарищ и брат.

пятница, 26 октября 2012 г.

На вернисаже как-то раз... Фотогалерея в блоге

Красиво расположить фотографии в блоге иногда бывает непросто. За картинками нужен глаз да глаз: они начинают играть в чехарду, отказываются слушаться, наезжают на текст... Если фотографий немного, "приструнить" их получится, а вот если мы решили создать фоторепортаж или красочный отчет о работе...

Красиво оформить картинки в мини-фотогалерею можно с помощью таблицы.  Например, вот такой.


Наш краеведческий библиотеатр


imagebam.com imagebam.com imagebam.com
imagebam.com imagebam.com imagebam.com
imagebam.com imagebam.com imagebam.com

А теперь - о том, как расположить картинки "по фэн-шую".

1. Загружаем


Для начала нужно загрузить отобранные для фотогалереи картинки на любой сервис для хранения фотографий, который дает html-код. Я, например, выбрала Imagebam.



Сервис оказался очень удобным: регистрироваться необязательно, можно загрузить сразу несколько фотографий одновременно и выбрать размер миниатюрного изображения, которое в итоге будет отображаться в блоге (я выбрала 180 пикселей). После загрузки фотографий получаем html-коды.

2. Создаем невидимую таблицу


А теперь придется поколдовать во вкладке HTML. Открываем вкладку и вставляем вот такой код:

<table cellspacing="8"><tbody>
<tr> <td>картинка-один</td> <td>картинка-два</td> <td>картинка-три </td> </tr>
<tr> <td>картинка-четыре</td> <td>картинка-пять</td> <td>картинка-шесть</td> </tr>
<tr> <td>картинка-семь</td> <td>картинка-восемь</td> <td>картинка-девять</td> </tr>
</tbody></table>

Это шаблон для фотогалереи "три на три". Если количество рядов нужно увеличить или уменьшить, кусочек кода добавляем или удаляем. Вот этот фрагмент: </tr>
<tr> <td>картинка</td> <td>картинка</td> <td>картинка</td> </tr>.

Проверьте, чтобы в конце кода стояло -  </tbody></table>. Иначе таблица не получится.
Число 8 в коде - это размер расстояния между фотографиями в галерее.

3. Копировать-вставить


Настало время самого интересного! Копируем html-код каждой картинки и вставляем на место слов "картинка-один", "картинка-два" и т.д. Очень аккуратненько, главное - не удалить ничего лишнего!

Ну вот, пожалуй, и все. Осталось проверить расположение картинок во вкладке "Создать", сохранить сообщение и порадовать своих читателей. Кстати, каждую картинку при нажатии можно открыть в "полный рост".

Удачной работы!

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

  1. Спасибо большое! Уже замучились "строить" эти картинки))) Очеень полезный пост)))

    ОтветитьУдалить
  2. Рада была помочь! :) Эти картинки меня тоже иногда не слушаются.

    ОтветитьУдалить
  3. Спасибо, попробовали. Очень понравилось, как стоит в блоге. Но при открытии в полный рост у нас ОЧЕНЬ долго грузятся (где-то минута - две каждая фотография). А так - замечательно. Спасибо еще раз!

    ОтветитьУдалить
    Ответы
    1. Увы, "нет в мире совершенства", - как говорил Лис в сказке про Маленького принца. И фотография, конечно, будет загружаться медленнее, чем обычно, потому что загружена на сторонний сервис, а не напрямую в Блоггер. Я попробовала несколько фотосервисов, все они работают примерно с одинаковой скоростью.
      Еще свою роль играет скорость Интернета: у меня фотографии открываются за полминуты.
      Есть вариант делать миниатюры (превьюшки) побольше и располагать не три, а две в ряд.

      Удалить
  4. Спасибо огромное, уважаемая Полярная Сова!
    Как молодой блогер))) не могу не выразить искреннюю признательность за те интересные и важные советы, которые получила именно здесь.
    Желаю всего самого наилучшего, а особенно творческих успехов (п.ч. без них нынче библиотеке никуда)!

    ОтветитьУдалить
    Ответы
    1. Уважаемая Агния! Полярная Сова не настолько почтенна, как кажется :). Нашему блогу всего-то полтора года.

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

      Удалить
    2. Делюсь и, волнуясь))), жду в гости!
      http://agniyainteralia.blogspot.com/

      Удалить
    3. Нам с Совой ваш блог показался очень симпатичным.
      Пусть приносит радость Вам и вашим читателям.

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

      Удалить
  5. Ой как к стати этот урок для нас. Только закончила размещать фото в посте, пока утрясла их по местам - замучилась, решила пойти отдохнуть, по блогам погулять. А тут токой урок по размещению фото! Сейчас уже поздно пробывать своё воять, а вот завтра обязательно. Я Вам очень благодарна за уроки, большое спасибо!

    ОтветитьУдалить
    Ответы
    1. Видно, мое педагогическое прошлое иногда дает у себе знать: и Сову тянет иногда поделиться с товарищами-блогерами свежими находками.
      Ольга, надеюсь, у Вас все получится. :) Удачи!

      Удалить
  6. Дорогие мои, любимые Медведь-краевед и Полярная Сова! Передаю вашему блогу Кубок "Признания" (какая-то новая награда, мне неизвестная), но которой вы очень даже достойны! Подробности в БИБЛИОКОМПАСе. Желаю вам здоровья, процветания вашим блогу и САЙТУ! Последним просто очарована, какие молодцы и когда успели!? Понравился информативностью, содержанием и дизайном.

    ОтветитьУдалить
  7. Вот, и на этот раз заглянула к вам не напрасно! :)

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

Этот пост ждёт ваших комментариев.
Не знаете, как оставить комментарий?
Тогда эта инструкция для вас!

- Нажмите на стрелку рядом с окошком "Подпись комментария".
- Выберите "Имя/URL".
- Напишите своё имя, строчку URL можно оставить пустой.
- Нажмите "Продолжить" и комментируйте.

Заранее спасибо!

Related Posts Plugin for WordPress, Blogger...