7.2. Как вставить и/или изменить изображение?

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

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

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

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

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

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

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

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

Рис. 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):

Рис. 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.  На базовом уровне эта опция не рассматривается.