2. Это страничка как размещать фото (изменена в февр. 2024)

Это страничка обучающая вставлять фото. Эту страницу отредактировал в феврале 2024 года, убрав описания классов «_» и «__», которые не работали как было задумано. В место них возникли классы ‘int’, ‘v1’, ‘v2’, ‘v3’.

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

Фото не просто вставляется в страницу, но вписывается в блок, который меняет форму вместе с размером окна на дисплее. Что не помещается в этот блок, браузер обрезает. Поэтому надо заботиться о том, чтоб не обрезались, например, лица.

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

За несколько лет устоялась нижеописанная техника размещения фото. Фото помещаются в теги DIV c классами начинающимися с img.
При этом размер фото определяется как часть прямоугольника, который по ширине занимает весь экран, а высота его по умолчанию есть одна треть ширины экрана. Какая часть прямоугольника используется, задается классом элемента DIV.

В зависимости от класса ширина обнимающего прямоугольника может быть равна ширине всего окна, половины окна, трети, четверти, и двум третям. Этим размерам отвечают классы img1, img2, img3, img4, img23 — соответственно.

Специальный класс «int» обеспечивает размещение нового блока фото. Он должен добавляться к элементу, предшествующему первому фото в блоке. Этим элементом может быть тег <p>, который надо писать как <p class=»int»> </p>. Содержимое элемента « » можно опускать, оно автоматически добавляется.

Классы «v1», «v2», «v3» можно добавлять к классу «int», когда нужен вертикальный пробел перед блоком.

Например, перед параграфом <p class=»int v2″> </p> будет добавлено поле сверху высотой 2em (то есть в две ширины символа ‘m’).

КОНКРЕТНЫЕ ПРИМЕРЫ

Слева приведен пример размещения блока из трех картинок шириной в треть экрана.

Код для примера сверху это последовательность дивизий класса img3 и некоторого текста сразу после них:

Здесь текст, который будет виден под блоком. Если б блок был короче, как в следующем примере, то текст обтекал бы этот блок. Этот текст может включать элементы <p>, <h1>,<h2>,… , <blockquote> и некоторые другие. Заметьте, что в класс первой дивизии добавлен символ подчеркивания, обеспечивающий, что первая фото из блока окажется на левом краю окна.

Слева пример размещения блока из двух картинок шириной в треть экрана и некоторого текста сразу после них.

Ниже — структура HTML кода:

Это текст, который будет справа обтекать блок картинок.

Если вы не хотите, чтоб текст обтекал фото, то перед ним надо поставить <br style=»clear: both;»>.

Запрет обтекания необходим, когда свободное место справа от фото составляет менее трети экрана. В таком случае на узком экране (в телефоне, например) в узкой правой зоне могут не помещаться даже одинокие слова. Такое сделано в следующем примере. Это правило можно нарушить, если следить за длиной словесной конструкции, с которой начинается обтекающий текст.

Дело в том, что обтекающий текст, сразу перестает обтекать блок слева, как только попадается слово, которое по длине не вмещается в область справа от блока. Скажем если вы начнете текст со слов «В предстоящем году…», а слово «предстоящем» не поместится в отведенную область, то справа от блока останется предлог «В», а «предстоящем» переместится ПОД блок. Это выглядит странно, а часто вовсе непонятно.

Но все получится если в начать этот текст с кода «»В предстоящем году мы…». Последовательность символов « » понимается в HTML как код неделимого пробела (NonBreakable SPace) и в визуальном режиме неотличима от простого пробела, но два слова, разделенные неделимым пробелом воспринимаются браузером как одно слово. В нашем примере блок «В предстоящем году», либо поместится целиком в одной строке, либо перенесется целиком на следующую строку.

<br style=»clear: both;»>.

Это текст, который уже не будет обтекать блок картинок.

Пример размещения блока из четырех картинок разной ширины и некоторого текста сразу после них:

Здесь текст, который будет справа обтекать блок картинок, если там осталось свободное место.

О высоте фото

Высоту прямоугольника, в который вписывается фото, можно увеличить, добавив класс v12 или v23.по умолчанию всякое фото вписывается в блок высотой в одну треть ширины окна браузера. Класс v12 изменит эту высоту до половины ширины окна, а v23 до двух третей ширины окна браузера.

Альтернативы классов для фото

Ширину блоков с фото можно описывать и по другому. А именно, составными классами, составляя их из img и одного из следующих: w1, w2, w3, w4, w23. Например классу img1 в точности отвечает составной класс «img w1». Чтоб в этом случае фото удвоилась в высоте, надо назначить класс «img w1 v23».

Составной класс «int v1» равносилен «int1», «int v2» равносилен «int2» и так далее.

Есть классы, для размещения текстов подобно фотографиям. Тексты будут размещать внутри частей прямоугольников, подобных таковым для фото. Элемент DIV для текстов будет включать класс txt вместо img. Это значит, что если мы хотим разметить два столбика текста рядом, надо подряд поставить два DIV c классом «txt w2».

Тексты над блоком фото

Можно получить такой результат с текстами над каждым фото из блока.

Пример

Для этого тексты вставляются в дивизии с классом TXT. Причем надо устанавливать ширины областей для текстов, такими же как и для соответствующих фотографий. Чтоб получить выше приведенный результат, код должен быть такой:

<Div class=»txt w3″> Некоторый текст над первой фото <div>

<Div class=»txt w3″> Некоторый текст над второй фото <div>

<Div class=»_ img w3″> Код, описывающий первое фото <div>

<Div class=»img w3″>Код, описывающий второе фото <div>

Это некий текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. … …

В приведенном коде:
— первая и вторая строки — тексты над фото, которые могут быть как угодно сложными и включать, например, элементы заголовков или перечни;
третья-четвертая — ссылки на фото по вышеизложенным правилам. В третьей строке к классу добавлен символ подчеркивания, чтобы уверенно обеспечить, чтоб фото оказались ниже текстов.

Поскольку классы у всех дивизий примера включают «w3», тексты и картинки будут вписаны в квадраты с шириной в треть окна. Оставшаяся свободная треть будет заполняться последующим текстом. Ширину зоны для текста справа не следует делать менее трети ширины окна — на узком дисплее телефона такой текст может не поместиться. И заметим, что если в обтекающий текст вставить простой элемент заголовка, то обтекание выключится. Как правильно добавить заголовок объяснено в примере ниже.

ПОЛНЫЙ ПРИМЕР ПОДОБНОГО КОДА

Ниже приведен ПОЛНЫЙ код дающий результат, подобный тому, что видно на картинке выше. Картинки и содержимое серых шапок над ними в примере одинаковые (по моей лени).

В серые шапки на картинками не следует помещать громоздкий текст. И желательно, чтоб по объему тексты справа и слева не слишком различались — иначе некрасиво. Шапок, естественно, может и вовсе не быть.

В примере, который ниже, в обтекающий текст вставлена пара заголовков (которых, понятно, может и не быть).
Эти заголовки пишутся нестандартно. В красной рамке — код.

<h3>ПЕРМОГОРЬЕ</h3> <strong>МАЙ-ИЮЛЬ. </strong> Противоаварийные работы на Георгиевской церкви 17 века.

</div>

<h3>ПЕРМОГОРЬЕ</h3> <strong>МАЙ-ИЮЛЬ. </strong> Противоаварийные работы на Георгиевской церкви 17 века.

</div>

<h2> Первый заголовок </h2>

Первый абзац текста….

Второй абзац текста….

<h2> Второй заголовок </h2>

Третий абзац текста…

Четвертый абзац текста…

ПЕРМОГОРЬЕ

МАЙ-ИЮЛЬ. Противоаварийные работы на Георгиевской церкви 17 века.

ПЕРМОГОРЬЕ

МАЙ-ИЮЛЬ. Противоаварийные работы на Георгиевской церкви 17 века.

Первый заголовок

Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.

Второй заголовок

Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом. Это текст для демонстрации обтекания картинок текстом.

Теперь приведем пример кода, где есть тексты, размещаемые перед блоком фото и после блока фото.

<h3 class=»int» > Заголовок, если нужно <h3>

Это первый абзац текста, который будет между заголовком и блоком фото. Вставка class=»int» выше нужна, чтоб запретить обтекание предыдущего блока. Годится также «int v1» или «intv1″ и им подобные, при которых перед заголовком появится пустая строка.

Это второй абзац этого текста. Естественно, за ним может идти третий и проч.

<h3 > Если нужен, то заголовок обтекающего текста. Их может быть и несколько. <h3>

Первый абзац текста, который будет с правой стороны обтекать фото .

Второй абзац текста, который будет с правой стороны обтекать фото.

И так далее…

2. Это страничка как размещать фото (изменена в февр. 2024)

КОНКРЕТНЫЕ ПРИМЕРЫ

Альтернативы классов для фото

Тексты над блоком фото

ПОЛНЫЙ ПРИМЕР ПОДОБНОГО КОДА

ПЕРМОГОРЬЕ

ПЕРМОГОРЬЕ

Главное меню

О Веренице

Рубрики

Мы в соцсетях

Объекты в работе

Только что помогли