3.4.3   Добавление изображений
 

Добавление на страницу и изменение параметров добавленных изображений осуществляется с помощью диалога добавления/изменения изображения, изображенного на рисунке 3.9.

 

Рисунок 3.9 – Окно добавления/изменения изображения вкладка «Общее»
 

Для добавления изображения поставить курсор в место в тексте, куда нужно вставить изображение. В случае редактирования - нажмите на изображение левой кнопкой мыши. Нажмите на кнопку вызова диалога добавления/изменения изображения  (добавить/изменить изображение).

Установите основные параметры изображения в группе «Общие параметры».

В поле «Адрес» введите адрес URL-адрес изображения. URL-адрес должен начинаться с «http://», за исключением, случаев, когда изображение выбирается из имеющихся на сервере. Если объект находится на сервере, можно воспользоваться менеджером файлов. Открытие менеджера файлов осуществляется по нажатию на кнопку  (менеджер файлов). После задания корректного пути к файлу изображения, оно появится в окне группы «Предварительный просмотр».

В поле «Описание» введите текст, который появится в случае ошибки загрузки изображения или если у пользователя отключено отображение изображений. Содержимое этого поля учитывается поисковыми системами. Если не заполнять это поле редактор выдаст предупреждение, что изображение без описания – его можно проигнорировать.

В поле «Заголовок» введите текст, который появится в качестве подсказки при наведении курсора. Содержимое этого поля так же учитывается поисковыми системами.

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

 

Рисунок 3.10 – Окно добавления/изменения изображения вкладка «Положение»
 

В выпадающем списке «Выравнивание» установите положение изображения в тексте. Доступны варианты расположения в тексте, приведенные в таблице 3.3.

Таблица 3.3 – Элементы выпадающего списка «Выравнивание»

Равнение	Описание
Не установлено	Изображение будет вставлено в текст как символ с равнением по базовой линии.
По базовой линии	Изображение будет вставлено в текст как символ. Базовая линия изображения будет выравнена по базовой линии (родительского элемента) строки. Если в строке (родительском элементе) не задана базовая линия, то за нее принимается нижняя граница.
По верхнему краю	Изображение будет вставлено в текст как символ.  Верхний край изображения будет выравнен по верху самого высокого элемента строки.
По центру	Изображение будет вставлено в текст как символ. Средняя точка изображения будет выравнена по базовой линии строки (родителя) плюс половина высоты строки (родительского элемента).
По нижнему краю	Изображение будет вставлено в текст как символ. Основание изображения будет выравнено по нижней части элемента строки, расположенного ниже всех.
По верхнему краю текста	Изображение будет вставлено в текст как символ. Верхняя граница изображения будет выравнена по самому высокому текстовому элементу текущей строки.
По нижнему краю текста	Изображение будет вставлено в текст как символ. Нижняя граница изображения будет выравнена по самому нижнему краю текущей строки.
По левому краю	Изображение будет выравнено по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
По правому краю	Изображение будет выравнено по правому краю, а все остальные элементы обтекают его по левой стороне.

 

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

В полях «Размер» установите горизонтальный и вертикальный размер изображения в пикселях. При задании размеров изображения фактический размер изображения в файле не меняется, но при отображении в окне интернет-обозревателя изображение будет показано с заданными размерами. Эта функция полезна, если требуется немного подогнать изображение. Не следует пользоваться ею при создании миниатюр, так как объем изображения в Кб останется прежним. В этом случае следует воспользоваться одним из графических редакторов.

Установить флажок «Сохранить пропорции», чтобы при задании одной из размерностей изображения второе поле заполнялось автоматически пропорциональным значением.

Задайте значения в пикселях вертикального и горизонтального отступа от соседних элементов (текста и края страницы) в полях «Верт. отступ» и «Гориз. отступ». В случае обтекания текста с одной из сторон изображения, рекомендуют устанавливать это значение равным 6 пикселям, чтобы обтекающий текст не «прилипал» к изображению.

В поле «Граница» задайте  значение в пикселях определяющее толщину рамки вокруг изображения. По умолчанию рамки нет. Установите значение толщины рамки равным 0, если изображение является ссылкой. Это позволит избежать выделения изображения синей полосой.

Если Вы знакомы с языком разметки CSS , можете задать дополнительные стили изображения в поле «Стиль».

Для добавления изображения нажмите кнопку «Вставить». Если Вы редактировали изображение и хотите сохранить изменения, нажмите кнопку «Обновить». Для закрытия окна без применения или сохранения изменений нажмите кнопку «Отмена».

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