вторник, 25 ноября 2014 г.

Красивое размещение фотографий в статье через таблицу

Нужно выложить несколько фотографий в статье?  Хотите создать галерею из фотографий? Это возможно сделать, используя таблицы.

Загрузка нескольких фоторафий в таблице

Алгоритм размещения нескольких фотографий (картинок) в таблице

1. Копируем код:




Где Атрибут cellspacing=8 задает расстояние между картинками, равное 8 пикселов.
При необходимости, можно добавить еще ряд с фотографиями (3 фото в ряду):
просто скопировать часть кода и вставить после второго ряда ( после тега )


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

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

Примечание: В зависимости от ширины вашего блога, можно менять кол-во фотографий в ряду! Пример

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

  1. Мой вариант: изучаешь по минимуму основы HTML и такие инструкции тебе становятся ни к чему.

    Как вам?

    ОтветитьУдалить
    Ответы
    1. Рада вас видеть на блоге :) Давно не заходили к нам.
      Информатикам легко говорить :), а вот обычным пользователям совсем не до языка html. Хотя, настоящему блогеру ну никак не уйти от этого.

      Удалить
    2. Обычным пользвателям - нормальный интерфейс с кнопочками, который сам нормально размещает фотографии.

      Удалить
    3. Интересно, какие это кнопочки? Подскажите пожалуйста, откройте тайну :)

      Удалить
    4. Вариант 1.
      На любом нормальном фотохостинге есть кнопочка "опубликовать в интернете", возможность тыкнуть мышкой в фотографии, выбранные для публикации, и поле "код для вставки на сайт или блог" откуда тупо берёшь текст и не думаешь про HTML. http://screencast.com/t/1toRP5NQDf

      Вариант 2.
      На нормальной блоггерской платформе в сайт может быть встроен текстовый редактор чуть поумнее чем textarea, который тоже всё за пользователя мог бы сделать. И то, что какая-то платформа такой возможности пока не предоставляет, означает лишь отсталость этой платформы. HTML будут учить единицы, а обычным людям нужна простая кнопка: "Сделать красиво!"

      PS.
      И, к слову, для таких целей люди давно придумали inline, inline-block или float-left. Это позволяет не думать о том, сколько фоточек вы хотите поставить в ряд, это число будет подстраиваться автоматически под ширину окна.

      Удалить
    5. Спасибо большое за подсказку. Я об этом не знала :(
      Нужно отдельно выделить время и проанализировать некоторые фотохостинги. А какой бы вы порекомендовали для этих целей (получать код сразу для внедрения нескольких фотографий)?
      PS: По вашему скриншоту видно, что такую возможность дает сервис Yandex Фотки.

      Удалить
    6. Никакой не могу порекомендовать. Я пользуюсь Я.Фотками. К ним много нареканий, т.к. они отстали от жизни лет на 5-8.

      Ещё есть как минимум Picasa и Flickr. Это не значит, что они лучше или хуже других. Просто они крупные и я о них слышал.

      В контексте вашего блога, возможно, что у Пикасы будут какие-нибудь возможности по интеграции, т.к. это тоже гугловский продукт.

      Удалить
  2. А вот то, что слова "Примечание" и "Пример" никак друг от друга не отличаются, хотя одно из них является ссылкой - это уже ай-ай-ай.

    ОтветитьУдалить
    Ответы
    1. А я с вами не соглашусь. "Пример" - это еще один пример размещения фотографий в статье, а "Примечание" - это то, что не вошло в основную статью.
      Это мое мнение :)
      PS: Я обожаю ваши комментарии!!!

      Удалить
    2. Как посетителю сайта догадаться, что "Пример" - это ссылка?

      Удалить
    3. Здесь вы правы. Но я надеюсь на то, что пользователи-блогеры знают чем отличается обычный текст от гиперссылки.

      Удалить
    4. Любой пользователь-блогер знает, что внешне (при взгляде на текст ГЛАЗАМИ) гиперссылка должна отличаться от обычного текста. А вы - не знаете.

      Примеры:
      Нормальный сайт: http://screencast.com/t/nuVeGAzsuu
      Ваш блог: http://screencast.com/t/L9EAZP60hct

      Удалить
    5. Смешно :)
      Я знаю, но не придаю особому значению. Если так размещать все ссылки в сообщении, то иногда получается ужасно :(
      Для длинных ссылок нужно использовать сервисы по их уменьшению, а это время.

      Удалить
    6. Вы так и не ответили на вопрос:

      Как я должен догадаться, что "Пример" - это ссылка?

      Удалить
    7. > Если так размещать все ссылки в сообщении, то иногда получается ужасно :(

      Ликбез: Секреты хорошего гипертекста (обращаем внимание на всё и отдельное внимание на последнюю фразу: "А так делать нельзя.")

      Удалить
    8. Сергей Викторович, у вас всегда такие каверзные вопросы :)
      В школе на уроках информатики детей учим, что гиперссылка может быть добавлена к любому элементу гипертекстового документа и обычно выделяется графически (выделяется другим цветом и при наведении на гиперссылку курсором мыши меняется цвет или выделяется подчеркиванием.
      PS: Прочитала статью "Секреты хорошего гипертекста". Моя ошибка только в том, что я не указала название примера.

      Удалить
    9. Цвет гиперссылок тоже другой! Нужно поменять? Плохо видно?

      Удалить
    10. Я вижу, что сегодня что-то поменялось. Напоминаю, как я видел ваш текст до сегодняшнего дня: http://screencast.com/t/L9EAZP60hct
      Может быть я дальтоник, но мне казалось, что на скриншоте "ссылка" оформлена просто чёрным болдом, точно так же, как обычный жирный текст.

      Сегодня она красноватая, но теперь спорит с красноватым текстом, который не является ссылкой. http://screencast.com/t/nZAlKWQvDq5o

      Удалить
    11. Не знаю, цветопередача у мониторов разная. Но и раньше ссылки на блоге были зеленоватого цвета (под дизайн блога), при наведении курсора цвет менялся.
      PS: Да я поменяла цвет ссылок :)
      А на счет "...но теперь спорит с красноватым текстом, который не является ссылкой" - это только в этом случае. Поменять цвет текста не сложно:)
      Сергей Викторович, спасибо за столь пристальное внимание и ваши подсказки :)

      Удалить
  3. Спасибо! Всё получилось.Очень кстати. Полезный для работы блог, но мне не хватает карты блога. Потому что не всегда есть время искать нужную информацию по гаджетам в боковой колонке. Еще раз спасибо за помощь в блогостроениии.

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

      Удалить
    2. Спасибо. Ваши пожелания учту :)
      Карта блога была, но мне она не понравилась - удалила. Не знаю пока как ее получше сделать :(

      Удалить
  4. Статья полезная. Но для упрощенного варианта я использую другую фишку. Изначально понравившиеся фотки загружаю на онлайн сервис, делаю там коллаж, выбираю его визуальное оформление, а потом как одну картинку заливаю на сайт. На мой взгляд, это еще проще, чем обычному юзеру вникать в коды. Нет, если есть у кого-то желание с ними поиграть, то конечно, на практике так и приобретаются новые знания. Но как правило, такие фишки с множеством фоток хотят иметь все!
    P.S. На некоторых блогах или сайтах есть определенного место для библиотеки файлов. Поэтому мой способ будет рациональнее.

    ОтветитьУдалить
  5. Я только учусь, завела блог, изучаю пока все тонкости, пробую по чуть-чуть, думаю летом засяду конкретно. Юлия, спасибо за блог, помогает очень! Эту проблему (несколько фото) для себя решила так.1. В он-лайн редакторе создания коллажа, например - http://www.fotograma.ru/photoeffects, создаю коллаж. 2. Вставляю обычно, как картинку в сообщение в блог, выбрав размер - очень крупный. И всё.
    Но всё же статья очень полезная.

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

Новости блога на почту

Рускаталог.ком - каталог русскоязычных сайтов Яндекс.Метрика
Related Posts Plugin for WordPress, Blogger...
Яндекс.Метрика