МИНИСТЕРСТВО ОБРАЗОВАНИЯ
И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФГБОУ ВО «ОРЛОВСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ИМЕНИ И.С. ТУРГЕНЕВА»
Руководство по использованию визуального редактора
информационного наполнения
в Интернет-представительстве ФГБОУ ВО «Орловский государственный университет имени И.С. Тургенева»
Авторы Новиков С.В.,
Каменев А.В.,
Акинчев А.И.
Орел 2016
Содержание
1 Авторизация 3
2 Интерфейс редактора 4
3 Панель инструментов 5
4 Контекстное меню 7
5 Вставка изображений 7
5.1 Загрузка изображений 8
5.2 Информация об изображении 11
5.3 Обработка изображений на сервере 13
6 Создание таблицы 14
6.1 Свойства таблицы 15
6.2 Работа с таблицами 16
6.2.1 Редактирование строки таблицы 17
6.2.2 Редактирование столбца таблицы 17
6.2.3 Редактирование ячейки таблицы 18
6.2.4 Свойства ячейки 20
7 Создание ссылки 21
7.1 Добавление ссылки на страницу 22
7.2 Добавление ссылки на адрес электронной почты 23
7.3 Добавление ссылки на файл пользователя 24
7.4 Удаление ссылки 28
1 Авторизация
Для внесения каких-либо правок на сайт пользователь должен авторизоваться. И перейти на страницу, доступную ему для редактирования. Для авторизации необходимо зайти на сайт http://oreluniver.ru и в правой верхней части страницы (под флагами и строкой поиска) нажать кнопку  (рисунок 1.1).
Рисунок 1.1 – Авторизация на сайте
На открывшейся форме следует ввести свои логин и пароль и нажать кнопку "Войти" (рисунок 1.2).
Рисунок 1.2 – Ввод данных для авторизации на сайте
В случае успешной авторизации в правом верхнем углу Вы увидите надпись "Вы вошли как (ваш_логин)" (рисунок 1.3).
Рисунок 1.3 – Вид окно после успешного прохождения авторизации на сайте
После успешной авторизации, у редактора на доступных для редактирования ему страницах появляются кнопки «Редактирование» и «Сохранить изменения». Кнопка «Редактирование» используется для входа в режим редактирования страницы редактором. Кнопка «Сохранить изменения» используется для сохранения текущего вида страницы в базе данных.
2 Интерфейс редактора
Редактор состоит из пяти основных частей:
Контекстное меню (1) – вызываемое по нажатию правой кнопки мыши на некотором объекте всплывающее меню с ярлыками наиболее распространенных операций, доступных для данного объекта.
Панель инструментов (2) – раздел в верхней части редактора, содержащий сгруппированные кнопки меню, которые дают доступ к различным функциям редактора.
Блоки элементов (3) – раздел в нижней части редактора, который отображает информацию об элементах HTML.
Область редактирования (4) – пространство под панелью инструментов, где добавляются и редактируются страницы, изображения, файлы, таблицы, ссылки.
Диалоговые окна – всплывающие окна, которые появляются при использовании некоторых функций редактора и открываются одинарным нажатием кнопки на панели инструментов.
На рисунке 2.1 показаны основные блоки редактора:
Рисунок 2.1 – Интерфейс редактора
Изменить размер интерфейса редактора можно при помощи значка  в нижнем правом углу интерфейса.
3 Панель инструментов
Панель инструментов расположена в верхней части окна редактора. Она содержит кнопки меню, которые дают доступ к различным функциям редактора. Все кнопки сгруппированы в соответствии с их функциями и включают в себя как простые операции (например, изменение стиля текста или форматирования) так и более сложные функции (например, вставка текста или изображения).
Панель инструментов представлена на рисунке 3.1.
Рисунок 3.1 – Панель инструментов
Кнопки панели инструментов редактора иллюстрируются иконками; при наведении на них мышью появляются всплывающие подсказки, отображающие названия функций, которым соответствуют данные иконки.
В таблице 1 указаны все элементы панели инструментов
Инструмент
|
Назначение
|
|
Переключатель для редактирования исходного кода HTML страницы
|
|
Максимизирует и минимизирует размер редактора
|
|
Вырезает выделенный фрагмент документа и помещает в буфер обмена
|
|
Копирует выделенный фрагмент документа в буфер обмена
|
|
Вставляет информацию из буфера обмена в документ
|
|
Вставляет из буфера обмена в документ только текст, очищая форматирование
|
|
Открывает диалоговое окно для вставки текста, предварительно подготовленного в программе Word, и очищает его от лишнего форматирования
|
|
Отменяет последнее действие
|
|
Возвращает последнее отмененное действие
|
|
Загружает изображение
|
|
Вставляет таблицу
|
|
Вставляет горизонтальную линию
|
|
Удаляет параметры форматирования у выделенного фрагмента.
|
|
Вставляет специальные символы и знаки
|
|
Форматирует выделенный текст жирным начертанием
|
|
Форматирует выделенный текст курсивом
|
|
Форматирует выделенный абзац в нумерованный список
|
|
Форматирует выделенный абзац в маркированный список
|
|
Уменьшает отступ абзаца слева
|
|
Увеличивает отступ абзаца слева
|
|
Устанавливает выравнивание для абзаца по левому краю
|
|
Устанавливает выравнивание для абзаца по центру
|
|
Устанавливает выравнивание для абзаца по правому краю
|
|
Делает выделенный элемент текста гиперссылкой или добавляет файл для скачивания на страницу
|
|
Удаляет выделенную гиперссылку
|
|
Добавляет якорь для возможности создания гиперссылки в рамках одной страницы
|
|
Выбирает заранее установленный стиль оформления для выбранного фрагмента текста
|
4 Контекстное меню
Контекстное меню вызывается нажатием правой кнопки мыши. На рисунке 4.1 представлено контекстное меню для ссылки.
Рисунок 4.1 – Контекстное меню
Меню является контекстно-зависимым, то есть варианты выбора функций отображаются в нем в зависимости от объекта, который был выбран.
5 Вставка изображений
Для того чтобы вставить изображение, нажмите кнопку
«Изображение» на панели инструментов. Свойства изображения в диалоговом окне позволяют задать параметры конфигурации, которые определяют источник изображения, его размер, свойства экрана или другие дополнительные свойства.
Диалоговое окно «Свойства изображения» содержит три вкладки:
- данные об изображении;
- ссылка;
- дополнительно.
5.1 Загрузка изображений
Для загрузки изображений на сервер необходимо нажать кнопку  . В результате откроется диалоговое окно файлового менеджера (рисунок 5.1).
Рисунок 5.1 – Окно файлового менеджера
Чтобы загрузить файл изображения, необходимо нажать на кнопку «Добавить файл»  . В открывшемся диалоговом окне (рисунок 5.2) необходимо нажать кнопку «Обзор» и выбрать среди файлов изображений на локальном компьютере перейти к соответствующей папке и выбрать требуемые файлы с подготовленными изображениями, дважды щелкнув по нему или с использованием кнопки «Открыть» (рисунок 5.3).
Изображение рекомендуется подготовить для размещения на страницах сайта, то есть изменить его размер в точках (пикселях) с помощью графического редактора (AdobePhotosop, GIMP, Paint и др.) до требуемого. Рекомендуется размещать изображения с шириной не более 800 точек (пикселей).
Рисунок 5.2 – Загрузка изображений
Рисунок 5.2 – Открытие изображения на компьютере
Затем, чтобы отправить файл на сервер, необходимо в окне загрузки изображений нажать кнопку «Загрузить» (см. рисунок 5.4).
Рисунок 5.4 – Загрузка изображений на сервер
В результате изображение разместиться на сервере, после чего необходимо будет выбрать его для добавления на страницы сайта. Для этого можно использовать либо двойной щелчок левой кнопкой мыши, либор кнопку «Выбор» в окне файлового менеджера (рисунок 5.5).
Рисунок 5.5 – Выбор изображения на сервере для добавления на страницу
5.2 Информация об изображении
Вкладка «Данные об изображении» (рисунок 5.6) открывается по умолчанию после нажатия кнопки «Изображение» на панели инструментов. Данная вкладка позволяет установить для изображения URL (путь к файлу) и настроить параметры отображения его на странице.
Элементами вкладки «Информация об изображении» являются:
- Ссылка;
- кнопка «Выбор на сервере»;
- альтернативный текст;
- ширина;
- высота;
- граница;
- горизонтальный отступ;
- вертикальный отступ;
- выравнивание;
- предпросмотр (Preview).
Рисунок 5.6 – Вкладка «Информация об изображении»
URL – web-адрес изображения. Изображение может быть расположено на сайте oreluniver.ru или на внешнем сервере.
Если изображение расположено на сайте университета, то можно использовать путь, который не включает доменное имя и начинается с косой черты, например
/img/stand.jpg
При загрузке изображения на сервер URL формируется автоматически.
Если необходимо использовать изображение, которое хранится на внешнем ресурсе, то нужно отобразить полный путь, например:
http://docs.cksource.com/images/2/25/CKEditor_images_advanced.png
Альтернативный текст – это краткое текстовое описание изображения, которое появляется в виде всплывающей подсказки при наведении на него курсора мыши.
Ширина – ширина изображения в точках (пикселях). По умолчанию это размер исходного изображения.
Высота – высота изображения в точках (пикселях). По умолчанию это размер исходного изображения.
Граница – размер видимой границы вокруг изображения в точках (пикселях). Граница устанавливается только в случае необходимости отделить изображение от фона страницы.
Горизонтальный отступ – расстояние между левым и правым краями изображения и другими элементами страницы, которые окружают изображения, в точках (пикселях).
Вертикальный отступ – расстояние между нижним и верхним краями изображения и другими элементами страницы, которые окружают изображение, в точках (пикселях).
Выравнивание – выравнивание изображения на странице. Доступные опции: по правому и левому краю.
Предварительный просмотр (Preview) – предварительное отображение выбранного изображения, отформатированного в соответствии с параметрами.
Если ранее изображения ранее загружались на сервер, то можно их добавить на страницу при помощи кнопки «Выбор на сервере». При нажатии на эту кнопку откроется диалоговое окно со всеми изображениями, ранее загруженными на сервер с данной страницы (рисунок 5.7).
Рисунок 5.7 – Диалоговое окно «Выбор на сервере»
Из всего списка можно выбрать нужное изображение (кнопка «Выбрать файл»). Соответственно на странице добавится выбранное изображение.
Изображения, которые стали неактуальны, можно удалить при нажатии на кнопку «Удалить файл». В результате откроется диалоговое окно, в котором следует подтвердить выбранное действие, либо отказаться от него.
5.3 Обработка изображений на сервере
Как было описано выше, изображение рекомендуется подготовить для размещения на страницах сайта.
Для небольшой корректировки размеров изображений можно на закладке «Информация об изображении» изменить его размеры, введя новые значения в поле «Ширина» и «Высота». По умолчанию при изменении одного параметра изображения второй будет корректироваться автоматически (изображение будет изменяться пропорционально). Для того чтобы отключить автоматическое изменение второго параметра, необходимо нажать на кнопку «Заблокировать (Unlock Ratio)»  . Чтобы вернуть автоматическое изменение отношений параметров, нужно еще раз нажать на кнопку «Сохранить пропорции»  . Чтобы вернуть изображению обычные размеры необходимо нажать на кнопку  .
6 Создание таблицы
Чтобы создать таблицу, необходимо нажать на кнопку «Таблица»  на панели инструментов. Откроется диалоговое окно «Свойства таблицы», которое позволяет задать параметры конфигурации, определяющие размер таблицы, свойства ее отображения и другие дополнительные свойства.
6.1 Свойства таблицы
Свойства таблицы позволяют установить размер таблицы и настроить, как она будет отображаться на странице (рисунок 6.1).
Рисунок 6.1 – Диалоговое окно «Свойства таблицы»
Элементами вкладки «Свойства таблицы» являются:
Строки – количество строк в таблице (обязательное).
Колонки – количество столбцов в таблице (обязательное).
Ширина – ширина таблицы в точках (пикселях) или в процентах. Изменение единицы измерения на «проценты» позволяет установить долю области редактирования, которую будет занимать таблица.
Высота – высота таблицы в точках (пикселях).
Заголовки – раскрывающийся список, в котором определены форматы ячеек заголовков таблицы для применения к ним специального форматирования (отличного от других ячеек).
Размер границ – толщина границы таблицы в точках (пикселях). Обычно устанавливается не более 2.
Выравнивание – выравнивание таблицы на странице. Доступны следующие варианты: по левому краю, по центру, по правому краю.
Заголовок – название таблицы, которое отображается при наведении мыши на таблицу.
Итоги – содержимое таблицы, которое доступно для вспомогательных устройств, таких как программа чтения с экрана.
6.2 Работа с таблицами
После вставки на страницу таблица может быть изменена. Для редактирования таблицы необходимо дважды щелкнуть по ней или открыть контекстное меню таблицы и в нем выбрать пункт «Свойства таблицы». В появившемся диалоговом окне можно изменять ранее заданные параметры (рисунок 6.2).
Рисунок 6.2 – Контекстное меню для элемента таблицы
Чтобы удалить всю таблицу и ее содержимое, необходимо выбрать пункт «Удалить таблицу».
Кроме того, в контекстном меню можно изменять строки, столбцы (колонки) или ячейки таблицы. Этот метод позволяет вставлять новые строки, столбцы или ячейки в определенных местах, а также объединять или разделять ячейки.
6.2.1 Редактирование строки таблицы
Контекстное меню таблицы позволяет редактировать строки таблицы. Если навести указатель мыши на пункт меню «Строка», то в контекстном меню станут доступны дополнительные опции (рисунок 6.3).
Доступными свойствами строки являются:
Вставить строку сверху – вставляет новую строку перед выбранной (текущей) строкой;
Вставить строку снизу – вставляет новую строку после выбранной (текущей) строки;
Удалить строки – удаляет выбранную (текущую) строку.
Операция «Удалить строки» может быть применена к нескольким выделенным строкам.
Рисунок 6.3 – Контекстное меню для элемента строки таблицы
6.2.2 Редактирование столбца таблицы
Контекстное меню таблицы позволяет редактировать столбцы таблицы. Если навести указатель мыши на пункт меню «Колонка», то в контекстном меню будут доступны дополнительные опции (рисунок 6.4).
Рисунок 6.4 – Контекстное меню для элемента столбца таблицы
Доступными свойствами колонки являются:
Вставить колонку слева – вставляет новую колонку перед выбранной (текущей) колонкой;
Вставить колонку справа – вставляет новую колонку после выбранной (текущей) колонки;
Удалить колонки – удаляет выбранную (текущую) колонку.
Операция «Удалить колонки» может быть применена к нескольким выделенным колонкам.
6.2.3 Редактирование ячейки таблицы
Контекстное меню таблицы позволяет редактировать ячейки таблицы. Если навести указатель мыши на пункт меню «Ячейка», то в контекстном меню будут доступны дополнительные опции (рисунок 6.5).
Рисунок 6.5 – Контекстное меню для элемента ячейки таблицы
Доступными свойствами ячейки являются:
Вставить ячейку слева – вставляет новую ячейку перед выбранной (текущей) ячейкой;
Вставить ячейку справа – вставляет новую ячейку после выбранной (текущей) ячейки;
Удалить ячейки – удаляет выбранную (текущую) ячейку;
Объединить ячейки – слияние нескольких ячеек в одну. Эта опция доступна, только если две или более ячеек выделены;
Объединить с правой – слияние выбранной ячейки с ячейкой справа от нее. Содержание обеих ячейках становится общим. Эта опция доступна, если выбрана не больше, чем одна ячейка.
Объединить с нижней – слияние выбранной ячейки с ячейкой, расположенной под текущей. Содержание обеих ячейках становится общим. Эта опция доступна, если выбрана не больше, чем одна ячейка.
Разделить ячейку горизонтально – расщепление выбранной ячейки на две части и создание новой ячейки справа от нее. Содержимое ячейки остается в левой части. Эта опция доступна, если выбрана не больше, чем одна ячейка.
Разделить ячейку вертикально – расщепление выбранной ячейки на две части и создание новой ячейки ниже от нее. Содержимое ячейки остается в верхней части. Эта опция доступна, если выбрана не больше, чем одна ячейка.
Свойства ячейки – открывает диалоговое окно «Свойства ячейки», которое позволяет настроить дополнительные параметры ячейки.
Операция «Удалить ячейки» может быть применена к нескольким выделенным ячейкам.
6.2.4 Свойства ячейки
Ячейки таблицы можно изменить, применив дополнительные параметры из диалогового окна «Свойства ячейки» (рисунок 6.6).
Рисунок 6.6 – Диалоговое окно «Свойства ячейки»
Доступными свойствами ячейки являются:
Ширина – ширина ячейки в пикселях или в процентах.
Высота – высота ячейки в пикселях.
Тип ячейки. Вариантами являются либо нормальная ячейка данных или ячейка, которая является заголовком со специальным форматированием.
Перенос по словам – этот параметр осуществляет перенос слов содержимого ячейки.
Rows Span – этот параметр растягивает ячейки вниз на несколько строк. Ввод числового значения.
Columns Span – этот параметр растягивает ячейку вправо на несколько столбцов. Ввод числового значения.
Выравнивание по горизонтали – горизонтальное выравнивание содержимого ячейки таблицы. Доступны следующие варианты: по левому краю, по центру, по правому краю.
Выравнивание по вертикали – вертикальное выравнивание содержимого ячейки таблицы. Доступны следующие опции: по верхнему краю, по центру, по нижнему краю или по базовой линии.
Цвет фона. Можно использовать любой из следующих методов для установки цвета.
Нажмите кнопку «Выберите», чтобы открыть диалоговое окно выбора цвета и выберите цвет с помощью мыши, например:
Введите значение в текстовое поле, в формате «rgb(nn, nn, nn)», где nn является числовое значение по шкале от 0 до 255, которое представляет значения красного, зеленого и синего каналов, например:
Введите шестнадцатеричное значение в текстовое поле в формате «#nnnnnn», где nn обозначают три пары шестнадцатеричных значений цветов представляющих значения красного, зеленого и синего цветов, например:
Цвет рамки – цвет границы ячейки. Цвет рамки задается таким же образом, как и цвет фона ячейки.
7 Создание ссылки
Инструмент «Ссылка» позволяет добавлять интерактивные гиперссылки на:
– страницы;
– адрес электронной почты;
– файлы.
7.1 Добавление ссылки на страницу
Чтобы вставить ссылку на страницу, необходимо выделить объект (участок текста или рисунок) и нажать кнопку на панели инструментов «Вставить/Редактировать ссылку»  . При нажатии на кнопку «Вставить/Редактировать ссылку» откроется диалоговое окно «Ссылка».
На вкладке «Информация о ссылке» необходимо указать адрес страницы и протокол связи (рисунок 7.1).
Рисунок 7.1 – Диалоговое окно «Информация о ссылке»
В поле «Протокол» выбрать требуемый протокол связи (http://). В поле «URL» – адрес страницы, на которую требуется перейти по ссылке.
Например, для перехода на страницу http://example.com/about.html в поле «Протокол» нужно указать протокол связи (http://), а в поле «URL» – example.com/about.html.
Если же необходимо перейти на страницу сайта университета, (например, на страницу http://oreluniver.ru/chair), то в поле «Протокол» в качестве протокола связи нужно указать другой, а в поле «URL» – часть адреса страницы, которая находится после http://oreluniver.ru (в данном случае /chair) (рисунок 7.2).
Рисунок 7.2 – Добавление ссылки
7.2 Добавление ссылки на адрес электронной почты
Чтобы вставить ссылку на адрес электронной почты, необходимо установить курсор на странице в требуемое место и нажать кнопку на панели инструментов «Вставить/Редактировать ссылку» . В результате откроется диалоговое окно «Ссылка». Далее выбрать во вкладке «Информация о ссылке» тип ссылки из выпадающего списка «Email» (рисунок 7.3). При выборе данного типа ссылки становятся доступны такие поля ввода, как:
Email адрес – адрес получателя почты. Это поле является обязательным для ввода.
Тема сообщения – по умолчанию текст, который будет вставлен в строке темы отправки почты. Данное поле является необязательным для заполнения.
Текст сообщения – по умолчанию текст, который будет вставлен в сообщение электронной почты. Данное поле является необязательным для заполнения.
Рисунок 7.3 – Тип ссылки: Электронная почта
Заполнив требуемые поля, следует нажать кнопку «ОК».
7.3 Добавление ссылки на файл пользователя
В визуальном редакторе возможна функция добавления собственных ресурсов на страницу с компьютера, то есть можно размещать документы на странице Интернет-представительства и далее их использовать (скачивать) другими пользователями.
Для создания ссылки на файл пользователя необходимо выделить объект (участок текста или рисунок) и нажать кнопку на панели инструментов «Вставить/Редактировать ссылку» . При нажатии на кнопку «Вставить/Редактировать ссылку» откроется диалоговое окно «Ссылка». Далее необходимо выбрать кнопку «Выбор на сервере».
В результате откроется диалоговое окно файлового менеджера (рисунок 7.4).
Рисунок 7.4 – Окно файлового менеджера
Чтобы загрузить файл с документом, необходимо нажать на кнопку «Добавить файл» . В открывшемся диалоговом окне (рисунок 7.5) необходимо нажать кнопку «Обзор» и выбрать среди файлов на локальном компьютере: перейти к соответствующей папке и выбрать требуемые файлы с требуемыми документами, дважды щелкнув по нему или с использованием кнопки «Открыть» (рисунок 7.6).
Рисунок 7.5 – Загрузка файлов
Рисунок 7.6 – Выбор файлов для загрузки на компьютере
Затем, чтобы отправить файл на сервер, необходимо в окне загрузки файлов нажать кнопку «Загрузить» (см. рисунок 7.7).
Рисунок 7.7 – Загрузка файлов на сервер
В результате файлы будут добавлены на сервер, после чего необходимо будет выбрать нужный файл для добавления на страницы сайта. Для этого можно использовать либо двойной щелчок левой кнопкой мыши, либор кнопку «Выбор» в окне файлового менеджера (рисунок 7.8).
Рисунок 7.8 – Выбор файла на сервере для добавления ссылки на него
В результате автоматически будет осуществлен переход на закладку «Информация о ссылке» с указанием адреса на загружаемый файл (Рисунок 7.9).
Рисунок 7.9 – Завершение создания ссылки на файл пользователя
После нажатия кнопки «ОК» ссылка на файл пользователя будет добавлена.
Если файл на страницу был добавлен ранее, то ссылку на него следует добавлять таким образом. Необходимо выделить объект (участок текста или рисунок) и нажать кнопку на панели инструментов «Вставить/Редактировать ссылку» . При нажатии на кнопку «Вставить/Редактировать ссылку» откроется диалоговое окно «Ссылка».
На открывшейся вкладке «Информация о ссылке» следует нажать на кнопку «Выбор на сервере».
В результате откроется диалоговое окно со всеми ранее отправленными файлами (рисунок 7.10). Из списка можно выбрать нужный файл (кнопка «Выбор»). В диалоговом окне файлового менеджера можно удалить файлы, которые не актуальны. Для этого необходимо нажать кнопку напротив удаляемого файла «Удалить файл». В результате откроется диалоговое окно, где следует подтвердить выбранное действие, либо отказаться от него.
Рисунок 7.10 – Диалоговое окно «Выбор на сервере»
После выбора необходимого файла будет осуществлен переход на закладку «Информация ссылки» с указанием адреса на загружаемый файл (Рисунок 7.9). Затем следует нажать кнопку «ОК» и ссылка на файл пользователя будет добавлена.
7.4 Удаление ссылки
Удаление ссылки возможно при помощи кнопки на панели инструментов «Убрать ссылку» . Данная кнопка станет активной при выделении текста ссылки, которую необходимо удалить. Удаляется переход по тексту, который был обозначен как гиперссылка.
|
