Материал из сайта
http://murmansk-nordika.blogspot.ru/2012/10/blog-post_26.html#more
Красиво расположить фотографии в блоге иногда бывает непросто. За картинками нужен глаз да глаз: они начинают играть в чехарду, отказываются слушаться, наезжают на текст... Если фотографий немного, "приструнить" их получится, а вот если мы решили создать фоторепортаж или красочный отчет о работе...
Красиво оформить картинки в мини-фотогалерею можно с помощью таблицы. Например, вот такой.
Наш краеведческий библиотеатр
 |  |  |
 |  |  |
 |  |  |
А теперь - о том, как расположить картинки "по фэн-шую".
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 в коде - это размер расстояния между фотографиями в галерее.
Настало время самого интересного! Копируем html-код каждой картинки и вставляем на место слов "картинка-один", "картинка-два" и т.д. Очень аккуратненько, главное - не удалить ничего лишнего!
Ну вот, пожалуй, и все. Осталось проверить расположение картинок во вкладке "Создать", сохранить сообщение и порадовать своих читателей. Кстати, каждую картинку при нажатии можно открыть в "полный рост".
Удачной работы!
Это шаблон для фотогалереи "три на три". Если количество рядов нужно увеличить или уменьшить, кусочек кода добавляем или удаляем. Вот этот фрагмент: </tr>
<tr> <td>картинка</td> <td>картинка</td> <td>картинка</td> </tr>.
Проверьте, чтобы в конце кода стояло - </tbody></table>. Иначе таблица не получится.
Число 8 в коде - это размер расстояния между фотографиями в галерее.
3. Копировать-вставить
Настало время самого интересного! Копируем html-код каждой картинки и вставляем на место слов "картинка-один", "картинка-два" и т.д. Очень аккуратненько, главное - не удалить ничего лишнего!
Ну вот, пожалуй, и все. Осталось проверить расположение картинок во вкладке "Создать", сохранить сообщение и порадовать своих читателей. Кстати, каждую картинку при нажатии можно открыть в "полный рост".
Удачной работы!
You might also like:
