Руководство пользователя LMS Moodle

Данная инструкция предназначена для пользователей системы дистанционного обучения LMS Moodle и содержит рекомендации по работе в системе

8. Вставить и/или изменить изображение

Изображения являются почти обязательными. Работать с ними просто, возможностей много. Рассмотрим их.

Insert/edit image - Вставить/изменить изображение

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

Появится окно, которое имеет несколько вкладок.

Вкладка «Основные» имеет следующую структуру (рис. 15):

вставка картинки 1

Рис. 15 Вкладка «Основные»

Поле Поле (русское название) Описание
Image URL Адрес изображения Адрес файла изображения (путь к файлу). Обычно копируется из командной строки, если изображение берется в Интернете. Если оно закачивается, то надо нажать кнопку "Найти или загрузить изображение", а дальше действовать по инструкциям системы - они такие же, как в любом Windows. Не забудьте дать изображению название (это будет описание)
Image description Описание изображения Текст, который выводится при наведении указателя на картинку
Preview Предварительный просмотр В окне показывается картинка, после ввода её верного адреса (пути к файлу)

Вкладка «Оформление» (Appearance) представляет собой (рис. 16):

Вставка картинки 2

Рис. 16 Вкладка «Оформление» (Appearance)

Поле Функция (перевод) Описание (наиболее важные опции выделены фоном)
Alignment Выравнивание Выравнивание изображения на странице.

Варианты:

  • Baseline / По базовой линии - выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки
  • Top / По верху – выравнивание по верхнему краю
  • Middle / По центру – выравнивание по средине
  • Bottom / По низу – выравнивание по нижнему краю
  • Text top / По верху текста - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки
  • Absolute middle / По центру текста – выравнивает центр текущей текстовой строки с центром
  • Absolute bottom / По низу текста - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки
  • Left / Слева – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа
  • Right / Справа – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
Dimensions Размеры Размеры изображения по высоте и ширине в пикселях. Если окошечки пусты, то изображение будет вставлено в своих "родных" размерах. Но если поставить нужный размер, то изображение станет меньше или больше! Если вы хотите сохранить пропорции, то установите галочку в соответствующем окне и укажите только высоту или ширину. Если же вы хотите пропорции изменить, то укажите оба размера. Изображение послушно изменится.
Vertical space Вертикальный отступ Отступ по вертикали от картинки до ближайшего объекта (текста, таблицы и т.п.), в пикселях (значение атрибута vspace)
Horizontal space Горизонтальный отступ Отступ по горизонтали до ближайшего объекта, в пикселях (значение атрибута hspace). Бывает особенно нужно, если картинка стоит сбоку от текста.
Border Граница Толщина рамки для изображения
Class Класс Установка доступного класса из CSS, выбирается из выпадающего списка. Вариантов там много? они делятся на группы. Рекомендуем потратить некоторое время, меняя CSS и наблюдая за результатом. В ходе этого небольшого эксперимента можно выбрать нужные варианты и выписать их в отдельное место или, еще лучше, сохранить соответствующие скриншоты. 
Style Стиль Стиль для изображения (значение атрибута style). На базовом уровне эта опция не рассматривается.

Вкладка «Дополнительные» (Advanced) имеет следующий вид (рис. 17):

Вставка картинки 3

Рис. 17 Вкладка «Дополнительные» (Advanced

Имеется две панели:

"Замена изображения" – панель замены изображения на альтернативное при действиях с указателем мыши.

  • Alternative image (альтернативное изображение) – если установить галочку, то включается поддержка замены картинки на альтернативную при:
    • "for mouse over / при наведении курсора" – при наведении указателя мыши на картинку. В поле нужно вписать адрес (путь к файлу на сервере) альтернативной картинки.
    • "for mouse out / при уведении курсора" – смена изображения при уходе указателя мыши с картинки. В поле нужно вписать адрес изображения (путь к файлу на сервере).

Показываем, как выглядит изображение, которое различается при наведении и уводе курсора. Наведите и уберите курсор и посмотрите, что происходит (рис. 18):

Рис. 18 Замена изображения

Можно подобрать картинки так, чтобы получилась целая история.

Панель "Miscellaneous" (разное)

Поле Функция (перевод) Описание
Id Идентификатор Идентификатор картинки (значение атрибута id)
Language direction Направление письма в языке документа Возможны варианты:
  • Non set – не задано
  • Left to right – слева-направо
  • Right to left – справа-налево (для восточных языков)
Language code Языковой код

Код языка документа (значение атрибута lang).

На базовом уровне эта опция не рассматривается.

Image map Карта изображения

Имя файла, определённого элементом «MAP», в котором задана карта расположения фрагментов изображения со ссылками с них (если есть в наличии) – значение атрибута usemap. 

На базовом уровне эта опция не рассматривается.

Long description link Полное описание

Ссылка на полное описание изображения (дополняет атрибут alt) - значение атрибута longdesc. 

На базовом уровне эта опция не рассматривается.