Это страничка обучающая вставлять фото.
Собственно фото можно размещать, используя соответствующую кнопочку в редакторе. Но только так делать не надо, поскольку
это дает фото статичное, а страница сайта меняет свой вид в зависимости от размеров дисплея. И чтоб фото хорошо вписалось и в
большой монитор и в смартфон, нужны особые приемы.
Фото не просто вставляется в страницу, вписывается в блок, который меняет форму вместе с дисплеем.
Что не помещается в этот блок, браузер обрезает. Поэтому надо заботиться о том, чтоб не обрезались, например, лица.
Это особо относится к заглавному изображению записи. Блок, в который оно вписывается на стартовой странице может принимать разные размеры.
За несколько лет устоялась такая техника размещения фото. Они помещаются в теги DIV c классами начинающимися с img.
Графически это означает, что размер фото определяется как часть прямоугольника, который по ширине занимает весь экран, а высота его по умолчанию есть одна треть ширины экрана. Прямоугольник имеет ширину, задаваемую классом.
Ширина прямоугольника может быть равна всему окну, половине окна, трети, четверти, и двум третям. Этим размерам отвечают классы img1, img2, img3, img4, img23 — соответственно.
Дополнительно.
1. Высоту прямоугольника, в который вписывается фото, можно увеличить, добавив класс v12 или v23.по умолчанию всякое фото вписывается в блок высотой в одну треть ширины окна браузера. Класс v12 изменит эту высоту до половины ширины окна, а v23 до двух третей ширины окна браузера.
2. Ширину фотоблоков можно описывать и по другому — составными классами, составляя их из img и одного из w1, w2, w3, w4, w23. Например классу img1 в точности отвечает составной класс «img w1». Чтоб в этом случае фото удвоилась в высоте, надо назначить класс «img w1 v23»
3. Введены классы, для размещения текстов подобно фотографиям. Тексты будут размещать внутри частей прямоугольников, подобных таковым для фото. Разница в том что класс элемента DIV для текстов будет включать лексему txt вместо img. Это значит, что если мы хотим разметить два столбика текста рядом, на до подряд поставить два DIV c классом «txt w2».
Премудрость в том, что надо устанавливать ширины областей для текстов, такими же как и для соответствующих фотографий. Например, если мы хотим поставить рядом два фото, вписанные в квадраты, а над ними шапки с текстами, код должен быть такой.
<br style=»clear: both»>
<Div class=»txt w3″> Некоторый текст над первой фото <div>
<Div class=»txt w3″> Некоторый текст над второй фото <div>
<br class=»clear: both>
<Div class=»img w3″> Код, описывающий первое фото <div>
<Div class=»img w3″>Код, описывающий второе фото <div>
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. … …
В приведенном коде:
— первая и четвертая строки — разделители, отмечающие начало нового горизонтального блока и прерывающие обтекание текстом (если такой текст есть);
вторая-третья — тексты над фото, которые могут быть как угодно сложными и включать, например, элементы заголовков или перечни;
пятая-шестая — ссылки на фото, какие они были и раньше.
Поскольку классы у всех дивизий примера включают «w3», тексты и картинки будут вписаны в квадраты с шириной в треть окна. Оставшаяся свободная треть будет заполняться последующим текстом. Ширину зоны для текста справа не следует делать менее трети ширины окна — на узком дисплее телефона такой текст может не поместиться. И заметим, что если в обтекающий текст вставить простой элемент заголовка, то обтекание выключится. Как правильно добавить заголовок объяснено в примере ниже.
На следующей картинке показано, как будет на сайте отобразится приведенный образец кода. Под картинкой приведен реальный код, дающий такой результат.
Итак, ниже код дающий то, что видно выше с добавлением двух заголовков. Две картинки и содержимое серых шапок над ними в примере одинаковые по лени.
В серые шапки на картинками не следует помещать громоздкий текст. И желательно, чтоб по объему тексты справа и слева не слишком различались — иначе некрасиво. Шапок, естетственно, может и вовсе не быть.
В примере, который ниже, в обтекающий текст вставлена пара заголовков (которых, понятно, тоже может и не быть).
Эти заголовки пишутся нестандартно. Вместо тега h1, h2… использется тег P с классом h1, h2…
<br style=»clear: both»>
<div class=»txt w3″>
<h3>ПЕРМОГОРЬЕ</h3> <strong>МАЙ-ИЮЛЬ. </strong> Противоаварийные работы на Георгиевской церкви 17 века.
</div>
<div class=»txt w3″>
<h3>ПЕРМОГОРЬЕ</h3> <strong>МАЙ-ИЮЛЬ. </strong> Противоаварийные работы на Георгиевской церкви 17 века.
</div>
<div class=»im3″><a href=»https://sobory.ru/pic/05050/05077_20110205_012315.jpg
» rel=»lightbox»><img src= «https://sobory.ru/pic/05050/05077_20110205_012315.jpg
» tytle=» Необязательный всплывающий над фото текст»
«></a></div>
<div class=»im3″><a href=»https://sobory.ru/pic/05050/05077_20110205_012315.jpg
» rel=»lightbox»><img src= «https://sobory.ru/pic/05050/05077_20110205_012315.jpg
» tytle=» Необязательный всплывающий над фото текст»
«></a></div>
<p class=»h2»> Первый заголовок H2 </p>
Обратите внимание! В качестве заголовка в обтекающем тексте используются не элементы h1, h2… (они нарушат обтекание),
а элементы p с классами h1, h2… соответственно.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
<p class=»h3″> Второй заголовок H3 </p>
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Если вы смотрите на эту страницу в среде редактора, то все выглядит не как на фото-примере выше. Блоки текстов и картинок будут расположены один над другим. Это косяк редактора. Чтобы редактируя увидеть, что будет на самом деле, нужно нажать кнопку Посмотреть изменения. И в новом табе вы увидите, как на сайте надписи будут строго над фотографиями.
Ниже находится результат работы этого кода, который в редакторе и на сайте будет выглядеть совсем по-разному. Впрочем на сто процентов за это не поручаюсь. Иногда среда редактора ведет себя неожиданно.
ПЕРМОГОРЬЕ
МАЙ-ИЮЛЬ. Противоаварийные работы на Георгиевской церкви 17 века.
ПЕРМОГОРЬЕ
МАЙ-ИЮЛЬ. Противоаварийные работы на Георгиевской церкви 17 века.
Первый заголовок
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Второй заголовок
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.
Здесь конец примера.