Редактирование страниц сайта в визуальном редакторе

Основные возможности визуальных редакторов

Для редактирования веб-страниц в большинстве CMS используются визуальные редакторы, доступ к которым осуществляется через браузер. В различных системах могут быть установлены разные редакторы. Однако набор функций в этих редакторах примерно одинаков и повторяет основные возможности, доступные для редактирования текстов в редакторе MS Word (OO Writer). Как правило, доступны возможности:

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

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

Для начала редактирования страниц сайта, созданного с использованием CMS, необходимо выполнить вход в систему. Для этого необходимо ввести логин (имя пользователя) и пароль в соответствующие поля формы входа на сайт.

Если форма входа на сайте отсутствует, то редактирование страниц сайта осуществляется через панель администратора. Путь к панели администратора зависит от установленной CMS

Рассмотрим основные функции визуального редактора CMS Joomla на примере системы, установленной на веб-сервере ЦИТ http://www.gtn.lokos.net/mdou

В данной системе используется визуальный редактор JoomlaCK.

Работа с текстом

Вставлять текст напрямую из Word не рекомендуется, так как вместе с текстом перенесется лишняя разметка. Для вставки используются 3 кнопки:

рис.1

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

Другие инструменты редактирования текста, такие как выравнивание, отступы, курсив, подчеркивание и др., аналогичны соответствующим инструментам редактора MS Word.

рис.2

Создание гиперссылок

Для работы с ссылками есть три кнопки: JLink Properties, Вставить ссылку, Удалить ссылку, Вставить якорь.

• JLink Properties - позволяет указать ссылку на материал на сайте. Достаточно в поле поиска начать вводить текст заголовка и варианты будут выданы списком. Удобство заключается в том что можно указать материал не отображаемый на сайте.
• Вставить ссылку - позволяет создавать гиперссылки на любые веб-страницы, файлы, адреса электронной почты (рис.3). Кроме того, с помощью этого инструмента осуществляется загрузка файлов на сервер (рис.4). С помощью кнопки Create Folder (см. рис. 4) можно создавать папки на сервере.

Создание гиперссылки:

Шаг 1:

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

Нажать кнопку "Вставить/Редактировать ссылку" на панели инструментов

Шаг 2:

Кнопка "Просмотреть на сервере"

рис.3

Шаг 3

Если нужный файл уже есть на сервере (был загружен ранее), выбрать его из списка файлов в окне "File Browser", щелкнув мышкой по названию файла.

Если файл еще не загружался на сервер, нажать кнопку "Обзор":

рис.4

Шаг 4

В открывшемся окне найти на компьютере нужный файл, Выбрать его двойным щелчком или используя кнопку "Открыть". Нажать кнопку "Послать на сервер". После появления файла в списке файлов в окне "File Browser", выбрать файл, щелкнув мышкой по названию

Вставка изображений

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

• Таблицы - свойства типичные для всех редакторов.

Клавиатурные комбинации

Использование правой кнопки мыши - иногда команды работы с буфером обмена (Вырезать, Копировать), не вызываются из меню, доступного по щелчку правой кнопкой мыши.  При этом появляется сообщение:

В данном случае операции с буфером обмена можно выполнять, используя кнопки панели инструментов или клавиатурные комбинации:

Ctrl-C - копировать

Ctrl-X - вырезать

Ctrl-V - вставить