Недавно у меня интересовались, как я располагаю картинки у себя в блоге, просили дать мастер-класс ).
Поделюсь своим способом на примере работ, которые были опубликованы раньше. Сразу скажу, что все делать придется "вручную". Для начала нужно переключиться в режим "HTML", когда вы начинаете писать сообщение. Выглядит это так:
С этого момента очень желательно не переключаться обратно в режим "Создать", иначе автоматический редактор Блоггера все исправит в соответствии со своим стилем. Чтобы не мучаться с другими тегами, можно сначала написать весь текст в стандартном режиме, а уж потом переходить к картинкам, т.е. в режим "HTML". Готовы? Начинаем)
Боди с сердечком (подробнее о боди здесь):
Первым делом вставляем картинки. Как и обычно, можно нажать инструмент "Вставить изображение", там выбрать откуда взять картинку (загрузить с компьютера, добавить из загруженных или по URL). Когда Блоггер будет спрашивать, как выравнивать картинку и какой размер выбрать, дабы избежать лишней правки, нужно выбрать "Не выравнивать" и необходимый вам размер (пока можно выбрать тот, который вы обычно используете). Сначала разберемся с тем, что у нас там вставилось. А вставились ссылки на картинки в таком вот формате:
<a href="http://..."> <img src="http://..." /> </a>
Чтобы так расположить картинки, нужно подобрать их ширину (атрибут width) по своему вкусу, установить выравнивание в блоке, где эти картинки находятся, по центру (атрибут text-align:center, т.к. тег <img> - строковый элемент, как текст), и просто расположить их одну за другой. Также нужно не забыть установить поля картинок (атрибут margin), тоже по вкусу, чтобы они не располагались плотно друг к другу и было пространство между ними (в моем случае поля равны 10 пикселей). Все остальное сделает браузер: рассчитает пропорционально высоту картинок, сам расположит их в зависимости от ширины блока, где эти изображения находятся. Например, в моем случае ширина блока для сообщения (левого) фиксирована и равна где-то 700 пикселей, поэтому, чтобы в него влезли две фотки, мы выбрали ширину каждой картинки 320 пикселей (с учетом полей, которые в ширину не входят).
Вот код HTML для такого расположения:
<!-- Блок, в котором располагаем картинки по центру. Эту строку нужно добавить перед ссылками -->
<div style="text-align:center">
<!-- Ссылка на полноразмерное изображение -->
<a href="http://...">
<!-- В ссылку вложена миниатюра изображения шириной 320 пикселей (У меня есть класс "picture", который задает стиль картинки, т.е. ее вид и ее поведение, он прописан отдельно в <head>, без него картинки будут выглядеть обычно), где src - адрес миниатюры -->
<img src="http://..." style="width:320px; margin:10px"/>
<!-- Закрываем ссылку -->
</a>
<!-- Вторая картинка -->
<a href="http//:..." ><img src="http://..." style="width:320px; margin:10px"/> </a>
<!-- Закрываем блок с картинками -->
</div>
Мишка и зайчики (подробнее здесь):
.jpg)
.jpg)
.jpg)
.jpg)
Из-за разных пропорций у картинок слева ширину пришлось сделать побольше, 350 пикселей, чтобы фотки выглядели примерно одного размера:
Код HTML:
<div style="text-align:center">
<!-- Картинки без тени (слева направо, сверху вниз)-->
<!-- Первая картинка-->
<a href="http://..."> <img class="simplepicture" style="width:350px; margin:10px" src="http://..."/> </a>
<!-- Вторая картинка-->
<a href="http://..."> <img class="simplepicture" style="width:320px; margin:10px" src="http://..."/> </a>
<!-- Третья картинка-->
<a href="http://..."> <img class="simplepicture" style="width:350px; margin:10px" src="http://..."/> </a>
<!-- Четвертая картинка-- >
<a href="http://..."> <img class="simplepicture" style="width:320px; margin:10px" src="http://..."/> </a>
</div>
Персиковая нежность, три картинки в ряд (подробнее здесь):
.jpg)
Код HTML:
<div style="text-align:center" >
<!-- Первая картинка -->
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<!-- Вторая картинка -->
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<!-- Третья картинка -->
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
</div>
Ну и напоследок спальнички для малышей (подробнее здесь). Так расположились картинки разных пропорций, но одинаковой ширины (220 пикселей):
Код HTML:
<div style="text-align:center">
<!-- Картинки (слева направо, сверху вниз), для каждой свой адрес -->
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
</div>
Внимание! Этот абзац дальше можно не читать) При ширине блока сообщения, зависящей от ширины области просмотра браузера ("резиновая" ширина), картинки будут выстраиваться по тому же принципу, как выстраивается текст, выравненный по центру (важно для мобильной версии). Последний пример при этом не всегда будет выглядеть красиво, поэтому в этом случае в одной группе изображений лучше разместить одинаковые по размеру и пропорциям картинки.
Надеюсь, получилось понятно) Мы очень старались. Вопросы, естественно, можно задавать в комментариях.
На этом все на сегодня, до новых встреч!
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
