CMS RUEN
ruen.suCMS RUEN
RUEN
ПоддержкаПродвижениеНастройкаОформлениеРазработка
ОсновноеОтображениеВзаимодействиеПродажиРекламаПрочееСпециализированное

Расположение изображений

Изображениями может быть что угодно – фотографии, схемы, скриншоты и просто рисунки. Правильно подобранные или подготовленные изображения могут проиллюстрировать и украсить любой текст, а в некоторых случаях позволят обойтись без текста вовсе. Однако не менее важно правильно разместить изображения при их добавлении, чтобы информация легко читалась и была доступной для восприятия.

Есть два варианта манипуляции расположением изображений на странице. Один способ предназначен для для более опытных пользователей, знакомых с основами HTML, и этот способ связан с манипулированием непосредственно кодом HTML. Поэтому этот способ мы упустим и сосредоточимся на следующем.

Простой способ аккуратного расположения изображений заключается в постепенном и продуманном добавлении изображений и текста на страницу.

Чтобы расположить изображения аккуратно и в нужном порядке, следует для начала продумать этот самый порядок и безотрывно ему следовать. Если вначале должно идти изображение, а потом текст, то это значит, что сначала надо добавить изображение, а уже потом добавлять текст. Все просто!

Варианты расположения изображений

Есть несколько основных и одновременно простых вариантов расположения изображений. Однако при наличии должного опыта и знаний не возбраняется размещать изображения иначе, чем на приведенных ниже примерах.

 

Расположение изображение по центру

Расположение изображение по центру

Самый простой и самый толерантный к ошибкам способ размещения изображений, предлагаемый по умолчанию. При наличии комментария, он может быть размещен сразу под изображением (вторая фотография на иллюстрации). Для этого достаточно просто поставить флажок «размещать под изображением» в поле «Комментарий».

Преимущество данного варианта в том, что может быть добавлено сразу несколько изображений, и при этом они будут нормально отображаться. Параметры, выставляемые в диалоге добавления изображений:
  • Расположение: по центру

Важно: данный вариант подходит для размещения изображений, близких по размеру к ширине страницы (ширина изображения – 600-900 точек), и не подходит для размещения нескольких мелких или уменьшенных.

 

Расположение одного изображение слева от текста

Расположение одного изображение сбоку от текста

Удачный и компактный способ для иллюстрации большинства текстов на простых страницах, в блоге, в новостях, в статьях. Каждое такое изображение должно сопровождаться значительным объемом текста, потому как при близком нахождении с иным подобным изображением возможно некорректное смещение последнего.

Вначале добавляется одно изображение, а после него следом идет сопроводительный или иной текст. Параметры, выставляемые в диалоге добавления изображений:
  • Расположение: слева или справа
  • Тип: как превьюв 160х120 или коррекция 160х120

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

 

Расположение нескольких изображений

Расположение нескольких изображений рядом

Простой вариант для компактного размещения нескольких иллюстраций рядом на странице.

Можно добавлять несколько изображений одновременно. И после их добавления необходимо убрать пустые строки между кодом изображений. Параметры, выставляемые в диалоге добавления изображений:
Расположение: без выравнивания
Тип: как превьюв 160х120 или коррекция 160х120

Важно: при подобном расположении изображение должно быть уменьшено таким же образом, как и при добавлении одного изображения сбоку от текста. Однако дополнительным требованием является идентичность всех изображений по высоте.


Детали

Код только что добавленного изображения будет выглядеть таким образом:
<img src="/exogens.ruen.images/knopka-dobavleniya-izobrazhenij.gif" width="498" height="34" alt="Кнопка добавления изображений" title="Кнопка добавления изображений" style="ruen_photo ruen_toleft">

Перемещение этого кода по коду страницы вызовет и перемещение самого изображения по странице. Удаление же этого кода приведет к удалению изображения со страницы.
950 | 1 2017.12.14, 23:01
Информация на данной странице недостаточно понятна, не полна или содержит ошибки? Просто напишите нам об этом и мы все исправим.Напишите замечание!