Обращаем ваше внимание на то, что перед началом работы с сайтом вам необходимо войти на сайт под своим именем пользователя и паролем. Приемы работы, которые приведены ниже рассчитаны на то, что на вашем сайте установлены и настроены следующие модули: модуль CKeditor для редактирования текста и модуль IMCE в качестве файлового браузера. На сайтах, созданных студией ITassist эти модули присутствуют и настроены, поэтому, если вы являетесь нашим клиентом, то вам не нужно ничего дополнительно устанавливать.

Добавление изображения в текст на сайте

Добавление изображения в текст происходит в несколько этапов:

  • определения места, куда необходимо добавить изображение
  • загрузка изображения на сервер
  • добавление изображения непосредственно в текст
  • редактирование дополнительных параметров изображения

Определение места вставки изображения

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

Загрузка изображения на сервер

Кликните на кнопке Добавить изображение редактора CKeditor. У вас откроется окно Свойства изображения (рис.2)

Добавление изображения. Студия веб дизайна ITassist
Рис. 1 Добавление изображения

 

Окно "Свойства изображения". Студия веб дизайна ITassist
Рис. 2 Окно свойств изображения

 

Теперь необходимо вставить изображение. Для этого кликните на кнопке Просмотреть на сервере. В результате, у вас откроется окно файлового браузера IMCE, как показано на рисунке 3

Вид окна файлового браузера IMCE. Студия веб дизайна ITassist
Рис.3 Окно файлового браузера IMCE

 

В этому окне вам доступно 3 области - 2 колонки и общее широкое поле под ними. В левой колонке отображается путь к вашей директории на сервере, его изменять не нужно, в правой колонке отображаются файлы в вашей директории. Под этими двумя колонками располагается область для просмотра.

Добавление изображения происходит простым кликом на файле изображения в области списка файлов в правой колонке.

Сейчас область файлов и просмотра пуста, так как мы еще ничего не загрузили на сайт. Необходимо загрузить файл на сервер.

Для загрузки файла на сервер, необходимо нажать кнопку Загрузить в верхнем левом углу окна IMCE. в результате у вас появится дополнительное окно, в котором будет поле Добавить файл.

Вызов окна загрузки изображения на сервер. Студия веб дизайна ITassist
Рис. 4 Вызов окна выбора загружаемого изображения на сервер

 

Кликнув по кнопке Выберите файл, вам откроется окно просмотра файлов вашего компьютера. Теперь вам нужно выбрать изображение на своем компьютере и нажать кнопку Открыть или Добавить, которая будет в вашем окне выбора.

Выбор файла изображения на компьютере
Рис. 5 Выбор файла изображения

 

Когда вы выберете файл на вашем компьютере для загрузки и нажмете открыть, у вас окно файлового браузера IMCE будет выглядеть так, как показано на рисунке ниже. Для загрузки изображения с вашего компьютера на сервер, нужно нажать кнопку Загрузить

Загрузка изображения с компьютера на сервер
Рис. 6 Загрузка изображения с компьютера на сервер

 

Добавление изображения в материал сайта

Теперь ваше изображение загружено с вашего компьютера на сервер в вашу директорию. Остается только добавить изображения в текст. Это делается легко. Выберите файл в списке файлов IMCE и нажмите кнопку

Вставка изображения в материал сайта. Материал подготовлен веб студией ITassist
Рис. 7 Вставка изображения непосредственно в содержимое сайта

 

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

Редактирование дополнительных параметров изображения

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

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