Как вставить изображение в текст. Печать
Ликбез
Автор: WebMaster   
21.10.2012 15:36

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

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

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

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

изображение

За тем выбираем загруженный файл и жмем на кнопку вставить (рис. 10).

Изображение появляется там, где был курсор. Сохраняем и смотрим результат. Если ширина изображения была больше установленной, результат будет такой как на рисунке 11. Это нарушает дизайн сайта, и Ваша статья будет снята с публикации. Чтобы это исправить, открываем статью в редакторе и выделяем изображение. Для этого наводим курсор на изображение и, зажав левую кнопку мыши, сдвигаем его в сторону.

 

Изображение должно окраситься в синий цвет. Жмем на кнопку «вставить/редактировать изображение» (рис. 12)

В появившемся всплывающем окне (рис. 13), жмем на кнопку «оформление».

». Рассмотрим все поля, показанные на рисунке 14. Выравнивание определяет положение изображения на странице, (как в любом текстовом редакторе). Размеры (из за них мы сюда и пришли) – первое поле – ширина, второе – высота. Ставим ширину  650, второе поле оставляем пустым (высота будет выбрана автоматически). Вертикальный отступ – расстояние сверху и снизу. Горизонтальный отступ – расстояние слева и справа (обязательно задавать при выравнивании влево или вправо примерно 10, иначе текст будет сливаться с изображением). Граница – если изображение сливается с фоном, а вам это не нравится, задайте толщину рамки. Последние два поля не трогаем. После заполнения нужных полей, жмем на кнопку «обновить» и получаем предупреждение (рис. 15). Описание изображения нужно на случай, если у пользователя в браузере отключены изображения. Тогда вместо них он будет видеть описания. Добавление описания доступно во вкладке «общие», добавлять или нет дело Ваше. Если нет, жмем «ОК».

предупреждение

Для того чтобы вставить все изображения, размещенные в папке этой статьи, нужно вставить в место предполагаемого размещения следующий код:   {gallery!}путь к папке с изображениями{/gallery}.

Чтобы получить путь к папке с изображениями, нужно открыть одно из изображений для редактирования (рис. 13), скопировать адрес изображения в блокнот и убрать из него слева «images/stories»  а справа имя файла которое выглядит так  «/13.png», а то, что осталось вставить вместо слов «путь к папке с изображениями». За тем убрать выделенный красным восклицательный знак. Обратите внимание на то, чтобы в фигурных скобках не появилось пробела.

Для лучшего понимания просмотрите видео.

Обновлено 16.11.2012 06:50