Алгоритм размещения нескольких фотографий (картинок) в таблице
1. Копируем код:
Где Атрибут cellspacing=8 задает расстояние между картинками, равное 8 пикселов.
При необходимости, можно добавить еще ряд с фотографиями (3 фото в ряду):
просто скопировать часть кода и вставить после второго ряда ( после тега )
просто скопировать часть кода и вставить после второго ряда ( после тега )
Далее в код вместо слов "картинка-один, картинка-два" и т.д. вставляем HTML- код картинки
 |  |  |
 |  |  |
Конечно, есть и другие способы вставки фото в таблицу. Если у вас есть свои предложения по этому поводу, пишите в комментариях.
Примечание: В зависимости от ширины вашего блога, можно менять кол-во фотографий в ряду! Пример
Мой вариант: изучаешь по минимуму основы HTML и такие инструкции тебе становятся ни к чему.
ОтветитьУдалитьКак вам?
Рада вас видеть на блоге :) Давно не заходили к нам.
УдалитьИнформатикам легко говорить :), а вот обычным пользователям совсем не до языка html. Хотя, настоящему блогеру ну никак не уйти от этого.
Обычным пользвателям - нормальный интерфейс с кнопочками, который сам нормально размещает фотографии.
УдалитьИнтересно, какие это кнопочки? Подскажите пожалуйста, откройте тайну :)
УдалитьВариант 1.
УдалитьНа любом нормальном фотохостинге есть кнопочка "опубликовать в интернете", возможность тыкнуть мышкой в фотографии, выбранные для публикации, и поле "код для вставки на сайт или блог" откуда тупо берёшь текст и не думаешь про HTML. http://screencast.com/t/1toRP5NQDf
Вариант 2.
На нормальной блоггерской платформе в сайт может быть встроен текстовый редактор чуть поумнее чем textarea, который тоже всё за пользователя мог бы сделать. И то, что какая-то платформа такой возможности пока не предоставляет, означает лишь отсталость этой платформы. HTML будут учить единицы, а обычным людям нужна простая кнопка: "Сделать красиво!"
PS.
И, к слову, для таких целей люди давно придумали inline, inline-block или float-left. Это позволяет не думать о том, сколько фоточек вы хотите поставить в ряд, это число будет подстраиваться автоматически под ширину окна.
Спасибо большое за подсказку. Я об этом не знала :(
УдалитьНужно отдельно выделить время и проанализировать некоторые фотохостинги. А какой бы вы порекомендовали для этих целей (получать код сразу для внедрения нескольких фотографий)?
PS: По вашему скриншоту видно, что такую возможность дает сервис Yandex Фотки.
Никакой не могу порекомендовать. Я пользуюсь Я.Фотками. К ним много нареканий, т.к. они отстали от жизни лет на 5-8.
УдалитьЕщё есть как минимум Picasa и Flickr. Это не значит, что они лучше или хуже других. Просто они крупные и я о них слышал.
В контексте вашего блога, возможно, что у Пикасы будут какие-нибудь возможности по интеграции, т.к. это тоже гугловский продукт.
А вот то, что слова "Примечание" и "Пример" никак друг от друга не отличаются, хотя одно из них является ссылкой - это уже ай-ай-ай.
ОтветитьУдалитьА я с вами не соглашусь. "Пример" - это еще один пример размещения фотографий в статье, а "Примечание" - это то, что не вошло в основную статью.
УдалитьЭто мое мнение :)
PS: Я обожаю ваши комментарии!!!
Как посетителю сайта догадаться, что "Пример" - это ссылка?
УдалитьЗдесь вы правы. Но я надеюсь на то, что пользователи-блогеры знают чем отличается обычный текст от гиперссылки.
УдалитьЛюбой пользователь-блогер знает, что внешне (при взгляде на текст ГЛАЗАМИ) гиперссылка должна отличаться от обычного текста. А вы - не знаете.
УдалитьПримеры:
Нормальный сайт: http://screencast.com/t/nuVeGAzsuu
Ваш блог: http://screencast.com/t/L9EAZP60hct
Смешно :)
УдалитьЯ знаю, но не придаю особому значению. Если так размещать все ссылки в сообщении, то иногда получается ужасно :(
Для длинных ссылок нужно использовать сервисы по их уменьшению, а это время.
Вы так и не ответили на вопрос:
УдалитьКак я должен догадаться, что "Пример" - это ссылка?
> Если так размещать все ссылки в сообщении, то иногда получается ужасно :(
УдалитьЛикбез: Секреты хорошего гипертекста (обращаем внимание на всё и отдельное внимание на последнюю фразу: "А так делать нельзя.")
Сергей Викторович, у вас всегда такие каверзные вопросы :)
УдалитьВ школе на уроках информатики детей учим, что гиперссылка может быть добавлена к любому элементу гипертекстового документа и обычно выделяется графически (выделяется другим цветом и при наведении на гиперссылку курсором мыши меняется цвет или выделяется подчеркиванием.
PS: Прочитала статью "Секреты хорошего гипертекста". Моя ошибка только в том, что я не указала название примера.
Цвет гиперссылок тоже другой! Нужно поменять? Плохо видно?
УдалитьЯ вижу, что сегодня что-то поменялось. Напоминаю, как я видел ваш текст до сегодняшнего дня: http://screencast.com/t/L9EAZP60hct
УдалитьМожет быть я дальтоник, но мне казалось, что на скриншоте "ссылка" оформлена просто чёрным болдом, точно так же, как обычный жирный текст.
Сегодня она красноватая, но теперь спорит с красноватым текстом, который не является ссылкой. http://screencast.com/t/nZAlKWQvDq5o
Не знаю, цветопередача у мониторов разная. Но и раньше ссылки на блоге были зеленоватого цвета (под дизайн блога), при наведении курсора цвет менялся.
УдалитьPS: Да я поменяла цвет ссылок :)
А на счет "...но теперь спорит с красноватым текстом, который не является ссылкой" - это только в этом случае. Поменять цвет текста не сложно:)
Сергей Викторович, спасибо за столь пристальное внимание и ваши подсказки :)
Спасибо! Всё получилось.Очень кстати. Полезный для работы блог, но мне не хватает карты блога. Потому что не всегда есть время искать нужную информацию по гаджетам в боковой колонке. Еще раз спасибо за помощь в блогостроениии.
ОтветитьУдалитьСпасибо. Ваши пожелания учту :)
УдалитьКарта блога была, но мне она не понравилась - удалила. Не знаю пока как ее получше сделать :(
Спасибо. Ваши пожелания учту :)
УдалитьКарта блога была, но мне она не понравилась - удалила. Не знаю пока как ее получше сделать :(
Статья полезная. Но для упрощенного варианта я использую другую фишку. Изначально понравившиеся фотки загружаю на онлайн сервис, делаю там коллаж, выбираю его визуальное оформление, а потом как одну картинку заливаю на сайт. На мой взгляд, это еще проще, чем обычному юзеру вникать в коды. Нет, если есть у кого-то желание с ними поиграть, то конечно, на практике так и приобретаются новые знания. Но как правило, такие фишки с множеством фоток хотят иметь все!
ОтветитьУдалитьP.S. На некоторых блогах или сайтах есть определенного место для библиотеки файлов. Поэтому мой способ будет рациональнее.
Елена, спасибо за идею!
УдалитьЯ только учусь, завела блог, изучаю пока все тонкости, пробую по чуть-чуть, думаю летом засяду конкретно. Юлия, спасибо за блог, помогает очень! Эту проблему (несколько фото) для себя решила так.1. В он-лайн редакторе создания коллажа, например - http://www.fotograma.ru/photoeffects, создаю коллаж. 2. Вставляю обычно, как картинку в сообщение в блог, выбрав размер - очень крупный. И всё.
ОтветитьУдалитьНо всё же статья очень полезная.