Визуальный редактор встречается повсеместно, его основное назначение – предоставить пользователю, наглядный и удобный редактор контента.
Рассмотрим каждый инструмент редактора.
Рис. 33
ВСТАВКА / РЕДАКТИРОВАНИЕ ИЗОБРАЖЕНИЯ
Вставить / Редактировать изображение.
Прежде всего, запомните, что на сайте необходимо использовать ТОЛЬКО оптимизированные изображения. Чем меньше вес изображения, тем лучше. Возьмите за правило использовать файлы размером не более 100Кб для крупных объектов (800x600) и до 40Кб для средних объектов (300x300). Мелкие изображения - до 10Кб.
Изображения разрешением более 1024x768 и весом свыше 300Кб использовать категорически запрещено.
При этом качество изображения должно быть удовлетворительным.
Обязательно учтите, что сайт поддерживает загрузку только следующих типов файла:
bmp,csv,doc,epg,gif,ico,jpg,odg,odp,ods,odt,pdf,png,ppt,swf,txt,xcf,xls.
Вставить изображение в материал, в описание категории или раздела, отредактировать его при необходимости позволяет Менеджер изображений и Панель быстрой вставки изображения. Оба инструмента являются удобными и прекрасно дополняют друг друга.
Для открытия Менеджера изображений воспользуйтесь кнопкой Вставить / Редактировать изображение.
Для открытия Панели быстрой вставки изображения воспользуйтесь кнопкой Изображение
Начнем с простого.
ПАНЕЛЬ БЫСТРОЙ ВСТАВКИ ИЗОБРАЖЕНИЯ
Данная функция достаточно удобна и позволяет очень быстро вставить изображение в текст из Библиотеки изображений сайта или пополнить эту библиотеку, выбрав изображение на Вашем компьютере.
Библиотека изображений – группа графических файлов, хранящихся на сервере в папке /images, загруженных в эту папку с целью хранения и использования. Библиотека изображений может содержать каталоги (папки) если это требуется пользователю для удобства.
Внимание! Название всех создаваемых Вами каталогов (папок), имена загружаемых и создаваемых Вами объектов должно иметь латинское написание, в противном случае объект не будет отображаться на сайте.
В панели быстрой вставки изображений содержимое Библиотеки имеет функцию предпросмотра и позволяет опознать объект визуально.
Создание папок для Библиотеки изображений осуществляется в Медиа менеджере или в Менеджере изображений. Об этом мы расскажем в соответствующем уроке.
Рис. 34
Вставка изображения на страницу сайта
Использовать имеющиеся в библиотеке изображение можно выбрав его и нажав кнопку Вставить.
При выборе изображения, его адрес URL появится в поле с аналогичным названием.
Предварительно для изображения можно настроить ряд параметров:
Детали картинки – текст описания изображения (Атрибут alt=)
Заголовок картинки – текст заголовка изображения (Атрибут title=). Отображается при наведении курсора на изображение
Выравнивание текста материала относительно изображения.
См. Рис. 34
Добавление изображений в библиотеку
Загрузить изображение с Вашего компьютера в библиотеку можно нажав кнопку Обзор… и выбрав его в окне Открыть. Выбрав изображение нажмите кнопку Открыть, а затем кнопку Загрузить. Изображение появится в Библиотеке изображений.
См. Рис. 34
МЕНЕДЖЕР ИЗОБРАЖЕНИЙ
Окно менеджера разделено на две части: верхняя – параметры объекта, нижняя – объект и его свойства.
Область параметров имеет три закладки (См. Рис. 35):
Рисунок - базовые параметры изображения
Всплывающее изображение – позволяет установить замену изображению, которая появится при наведении на исходное. Принцип кнопки. Если вы навели курсор на кнопку, она меняется.
Дополнительно – позволяет назначить элементу дополнительные свойства.
Рис. 35
Нижняя часть менеджера отображает содержимое Библиотеке изображений, список доступных в ней элементов, каталогов (папок), окно предварительного просмотра элемента с его свойствами.
Так же имеется набор инструментов.
создать каталог (папку)
загрузить изображение
самоучитель
При создании нового каталога (папки) , укажите в окне New Folder в поле Имя название новой папки (см. Рис. 36)
Внимание! Название всех создаваемых Вами каталогов (папок) должно иметь латинское написание, в противном случае объект не будет отображаться на сайте.
Рис. 36
Для загрузки объекта в библиотеку необходимо вызвать окно Загрузить воспользовавшись кнопкой .
Для выбора объекта с Вашего компьютера воспользуйтесь кнопкой Add.
Clear – закрыть окно.
В области Options определите порядок действий, в случае если имя загружаемого объекта совпадет с именем уже имеющегося на сервере.
Рис. 37
Поддерживаются расширения: bmp,gif,ico,jpg,png,swf и некоторые другие графические форматы.
Рис. 38
При необходимости переименуйте объект 
или удалите его из списка загружаемых объектов
Если все в порядке воспользуйтесь кнопкой Загрузить.
Вернемся в Менеджер изображений.
Если выбрать элемент (изображение) из Библиотеки изображений в окне Подробности появится дополнительный набор инструментов управления выбранным объектом.
переименовать изображение
удалить изображение
копировать изображение
вставить изображения из буфера
вырезать изображение
просмотр изображения (масштаб 1:1)
вставить изображение на страницу
Названия инструментов интуитивно понятны, подробно рассматривать их назначение мы не будем.
Вкладка параметров изображения Рисунок.
Рис. 39
Важно помнить, что во вкладке отображаются параметры выделенного изображения.
Выбрав элемент в Библиотеке изображений, Вы можете управлять его параметрами и получать сведения о нем:
URL - адрес относительного расположение файла
Альтернативный текст – короткое описание изображения
Размеры – первая ячейка – по горизонтали, вторая – по вертикали
Выравнивание – расположение элемента на странице относительно других элементов
Очистить – края элемента, куда нельзя будет вставить другие элементы
Граница вокруг изображения. Размер указывается в пикселях
Рамка создает кайму вокруг изображения с выбранными параметрами (ширина, Стиль, Цвет)
В окне Просмотр показано изображение с учетом внесенных изменений в параметры элемента
Вкладка параметров изображения Всплывающее изображение
Рис. 40
Если установить «галочку» Включить и установить курсор в область При наведении курсора, затем выбрать элемент из Библиотеке изображений, в этой области появится относительный адрес изображения.
Далее необходимо установить курсор в область Без наведения и выбрать элемент из Библиотеки изображений, в этой области появится относительный адрес изображения.
Все это позволит сделать визуальный эффект, который можно описать следующим образом: На странице сайта отображается изображение, обозначенное как Без наведения, при наведение на него курсора, оно сменится на изображение помеченное как При наведении курсора.
Размеры и пропорции изображений идентичны.
Вкладка параметров изображения Дополнительно
Рис. 41
Стиль – список внутритекстовых свойств css, применяемых к элементу
Список классов – список доступных css классов шаблона
Классы – список применяемых к элементу css классов шаблона
Заглавие – текст, всплывающей подсказки, отображаемый при наведении курсора на элемент
ID – уникальный идентификатор элемента
Направление письма – направление текста (слева направо / справа налево)
Код языка – код языка элемента
Карта изображения – id связанной карты изображения, например #map
Длинное описание – URL к файлу, содержащему детальное описание изображения
- просмотр
Кнопки Обновить, Вставить, Закрыть позволяют обновить список содержимого Библиотеке изображений, вставить выбранный элемент или закрыть менеджер.
ВСТАВКА / РЕДАКТИРОВАНИЕ ССЫЛОК (URL)
Необходимо знать, что URL (Uniform Resource Locator) – единым указателем ресурсов, в своих уроках мы считаем ссылки на файлы (документы), материалы (страницы со статьями, новостями, объявлениями), внешние адреса (другие сайты в Интернете), якоря (отмеченные как внутренний адрес материала участки текста и другие элементы контента).
Носителем ссылки (URL) может быть как пункт меню, так и кусок текста на странице сайта или изображение.
Для создания и редактирования ссылок в Визуальном редакторе существует инструменты:
- Вставить / редактировать ссылку
- Удалить ссылку
Прежде чем воспользоваться этими инструментами, Вам необходимо выделить кусок текста, который будет ссылкой. Элементом, позволяющим сослаться на заданный адрес, может быть не только текст, но и изображение.
Выделив элемент, допустим это кусок текста «Скачать годовой отчет», наживаем на кнопку , тем самым открываем Менеджер ссылок, в рамках Визуального редактора он имеет название Расширенная Ссылка.
МЕНЕДЖЕР ССЫЛОК
Окно Менеджера ссылок имеет две вкладки: Ссылка и Дополнительно
Для назначения ссылки в область URL впишите ее адрес, например www.rrc46.ru.
В поле можно вводить и относительные адреса, на файл, содержащийся в Библиотеке файлов (в ее состав входит и Библиотека изображений). Такая ссылка может выглядеть так: /images/Docs/file1.doc. Открытие файла «File.doc» из каталога (папки) «Docs», расположенного в корневой директории Библиотеки файлов «images».
Рис. 42
Ниже, в области Link Browser располагается список возможных вариантов ссылки.
Раскрывающийся список Контакты позволяет выбрать в качестве ссылки контакт.
Раскрывающийся список Контент содержит все материалы (статьи, новости, объявления), имеющиеся на сайте, выбрав один из которых Вы установите на него ссылку.
Меню – содержит перечень всех имеющихся на сайте пунктов меню, в которых адреса уже заданы. Вы можете использовать эти адреса, для новой ссылки, выбрав необходимый пункт меню.
Каталог ссылок дает возможность воспользоваться ссылками своего содержания.
Область Attributes содержит следующие параметры:
Якоря – список якорей на странице. Возможности этого параметра подробно раскрываются в описании инструмента «Якорь» Визуального редактора jce.
Цель – наиважнейший параметр ссылки, использующийся чаще любых других. Его функция заключается в том, что бы определить каким образом откроется адресат ссылки.
Возможные варианты:
Открыть в текущем окне – если ссылка должна осуществить переход на другую страницу Вашего сайта, то страница откроется в том же окне (вкладке) браузера.
Открыть в новом окне – открытие происходит в новом окне (вкладке) браузера.
Открыть в родительском окне.
Открыть поверх окон (заменяет все фреймы)
Заголовок - текст, отображаемый в подсказке при наведении курсора на ссылку.
Рис. 43
Вкладка Дополнительно содержит следующий список параметров:
ID – уникальный идентификатор, который позволяет отличить объект от остальных объектов страницы
Стиль – список внутритекстовых свойств css, применяемых к элементу
Список классов – список доступных классов css шаблона
Классы – список (разделенных пробелом) css классов, применяемых к элементу
Направление письма – направление текста
Код целевого языка – код языка целевой ссылки
Код языка – код языка элемента
Целевая кодировка символов – кодировка символов целевого url
Целевой тип MIME – тип целевого url. MIME - многоцелевые расширения электронной почты в сети Интернет.
Отношение страницы к цели – связь между текущей страницей и целевым url
Отношение цели к странице – связь между целевым url и текущей страницей
Указатель вкладок – порядок перехода элемента по клавише табуляции
Горячая клавиша – сокращенная клавишная команда для доступа к элементу
МЕНЕДЖЕР ФАЙЛОВ
Инструмент Просмотр в Менеджере ссылок во вкладке Ссылка (См. Рис. 42) позволяет выбрать объект (файл) из списка, представленного в Библиотеке файлов, тем самым установить ссылку на него. Библиотеку файлов можно использовать для загрузки необходимых файлов, не имеющихся на сервере или управления уже имеющимися там объектами.
Внимание! Именно эту процедуру многие начинающие пользователи считаю вставкой файла на страницу сайта. На самом деле файл загружается на сервер, а на странице размещается ссылка на него.
Библиотека файлов имеет идентичное строение и функциональное значение, что и Библиотека изображений, которая является ее структурной единицей.
Весь узел управления библиотеками доступен из Медиа менеджера.
Но в сущности всё это одно и тоже, с поправкой на поддержку расширений.
Обязательно учтите, что сайт поддерживает загрузку только следующих типов файла:
bmp,csv,doc,epg,gif,ico,jpg,odg,odp,ods,odt,pdf,png,ppt,swf,txt,xcf,xls
Рис. 44
Если выбрать файл из Библиотеки файлов, в окне Подробности появится дополнительный набор инструментов.
переименовать изображение
удалить изображение
копировать изображение
вставить изображения из буфера
вырезать изображение
просмотр изображения (масштаб 1:1)
вставить изображение на страницу
Так же имеется уже известный нам набор инструментов.
создать каталог (папку)
загрузить изображение
самоучитель
В нижней части Менеджера файлов находятся три кнопки: обновить, Insert, Закрыть, позволяющие обновить содержимое Менеджера файлов, добавить в поле URL Менеджера ссылок (См Рис. 42) адрес ссылки на выбранный файл (объект), закрыть Менеджер файлов.
Вернемся в Визуальный редактор (См. Рис. 33)
Инструмент позволяет удалить ссылку. Предварительно выделите область влияния ссылки, затем воспользуйтесь инструментом для удаления.
РАЗБИЕНИЕ МАТЕРИАЛА НА СТРАНИЦЫ
Разбить материал на страницы можно, воспользовавшись инструментом 
, с панели инструментов Визуального редактора
Когда это необходимо?
Если у Вас текст одной статьи, размещенной в одном материале очень большого объема.
Какой объем текста в одном материале считать очень большим?
Мы рекомендуем Вам не создавать материалы в одну страницу весом более 200Кб, это приводит к длительной загрузке страницы и усложняет навигацию по сайту.
Для наглядного представления, как работает инструмент разбиения материала на страницы, мы разместили этот урок на стыке страниц. Обратите внимание, что следом за разделом Разбиение материала на страницы идет ссылка на следующую страницу (<<Предыдущая - Следующая >>), в которой находится продолжение материала ВИЗУАЛЬНЫЙ РЕДАКТОР JCE.
Структурно весь текст находится в одном материале, но с целью его удобоваримости, как группы информационных единиц, мы поделили его на две страницы сайта.
Внимание! Необходимо четко понимать, что страница сайта и материал это не одно и то же.
Материал - это информационный элемент сайта, который содержится в категории и принадлежит определенному разделу, а страница сайта – это область представления информации с абсолютным адресом в Сети (URL), которая содержит в себе материал (контент – содержимое материала) или его часть.
Именно для формирования этих частей мы и используем инструмент .
Рис. 45
Заголовок страницы – заголовок страницы, создаваемой в результате разделения материала.
Псевдоним таблицы содержания – название ссылки на страницу, отображаемой в мини меню.
О чем идет речь?
Помимо ссылки перехода по станицам, расположенной внизу, в верхней части первой страницы появится мини меню, со списком ссылок на вторую и последующие страницы материала:
Рис.45-1
Обратите внимание на заголовок страницы (Разделы – Заголовок) на Рис.45-1 содержит запись Заголовок. Эту запись можно редактировать в поле Заголовок страницы. См. Рис 45.
Псевдоним таблицы содержания – так же можно найти в мини меню См. Рис. 45-1 (Псевдоним)
Ссылка Все страницы позволяет вывести весь материал на одну страницу.
ЯКОРЬ
В Визуальном редакторе инструмент, позволяющий поставить якорь, обозначается так 
. (См. Рис. 33)
Достаточно интересный инструмент, часто используемый опытными разработчиками сайтов.
Система якорей и ссылок на них позволяет организовать удобную (быструю) навигацию внутри одного материала.
Пример: Примером может служить наши уроки, каждый из которых начинается с меню, каждый пункт которого переносит Вас в глубь текста именно в ту область, в которой раскрывается тема, заложенная в меню. Таким образом, нажав на ссылку «Якорь» в верхнем меню раздела «Визуальный редактор jce» Вы перенесетесь вниз по тексту именно к этому разделу.
Аналогичным образом ставится ссылка «к началу страницы», позволяющая вернуться вверх, к началу страницы. Воспользуйтесь наглядным примером, расположенным ниже.
Якорь к началу страницы
Организовать такую навигацию очень просто, достаточно поставить курсор в ту часть текста, на которую Вы собираетесь сделать ссылку (поставить якорь). Затем на панели инструментов нажмите кнопку Якорь .
В появившемся окне, в поле Имя якоря впишите название якоря и нажмите кнопку Вставить.
Рис. 46
Затем сформируйте импровизированное меню, подобное тому, что находится в заголовке данного урока.
Выделите кусок текста, который хотите сделать ссылкой.
И нажмите на кнопку Вставить / редактировать ссылку на панели инструментов в Визуальном редакторе. В появившемся Менеджере ссылок (См. Рис. 42) в области Attributes из списка Якоря выберите соответствующий якорь.
Если в списке необходимого якоря нет, создайте его.
РАБОТА С ТЕКСТОМ
В Визуальном редакторе имеется достаточно большое количество инструментов для редактирования текста:
- полужирный.
- курсив
- подчеркнутый
- зачеркнутый
- упорядоченный список
- список
- по ширине
- по центру
- по левому краю
- по правому краю
- подстрочный знак
- надстрочный знак
- очистить код
- очистить формат
Инструменты знакомы любому пользователю, работавшему в MS Office или других офисных приложениях.
Внимание! Визуальный редактор поддерживает структуру мета данных текста, копируемого из большинства офисных программ, что позволяет сохранить формат текста в исходном виде. Это позволит Вам копировать текст из Word, Excel, Writer, Calc и др.
Если сохранение формата не требуется, для его очистки воспользуйтесь соответствующим инструментом .
СОЗДАНИЕ ТАБЛИЦ
Вновь обратимся к панели инструментов Визуального редактора (См. Рис 33).
Для создания и редактирования таблиц в ней имеются все необходимые инструменты:
- Вставка новой таблицы
Если воспользоваться инструментом Вставка новой таблицы, на экран будет вызвано окно Вставить / Изменить таблицу, которое позволит Вам настроить свойства будущей таблицы в соответствие с Вашими требованиями.
Рис. 47
Вкладка Основные дает возможность указать количество столбцов и строк будущей таблицы, клеточный отступ и межклеточное расстояние, ширину и высоту таблицы, выравнивание и границу. Названия всех параметров данной вкладки являются интуитивно понятными и не требуют комментариев.
Вкладка Расширенные позволяет настроить расширенные свойства таблицы:
Рис. 48
Id таблицы, сводка, стиль, код языка – параметры, имеющие область внесения записей, укажите интересующие Вас параметры.
Область Фоновое изображение предназначено для указания относительного адреса объекта, который Вы хотите сделать фоновым в новой таблице. Внести относительный адрес объекта можно воспользовавшись кнопкой Просмотр . Кнопка вызовет уже знакомый нам Менеджер изображений, в библиотеке которого необходимо выбрать изображение, которое вы планируете установить как фоновое для таблицы. После нажатия кнопки Insert в Менеджере изображений в области Фоновое изображение появится относительный адрес объекта.
Таким образом, Вы установите, выбранное изображение в фон таблицы.
Списки Фрейм, Линейка(масштаб), Направление языка позволяют выбрать необходимые свойства для некоторых узлов таблицы.
Цвет границы и Цвет фона управляют цветами границы и фона таблицы.
- Свойства строк таблицы
Выбрав строку имеющейся таблицы и нажав на кнопку - Свойства строк таблицы мы вызовем окно Свойство строки.
Рис. 49
Как и в большинстве случаев, окно содержит две вкладки: Основные и Расширенные, которые позволяют настроить свойства строки в соответствии с требованиями пользователя.
В нижней части окна имеется список, в котором можно выбрать область применения указанных свойств.
К основным свойствам строки относятся: Строка в части таблицы, Выравнивание, Вертикальное выравнивание, Класс, Высота.
Рис. 50
К Расширенным – Id строки, Стиль, Направление языка, Код языка, Фоновое изображение, Цвет фона.
Если Вы читали наши уроки последовательно и не пропуская разделов, то вы уже знакомы со всеми представленными параметрами и знаете как ими пользоваться.
- Свойства ячеек таблицы
Выбрав ячейку имеющейся таблицы и нажав на кнопку - Свойства ячеек таблицы мы вызовем окно Свойство ячейки
Рис. 51
Рис. 52
И вновь две вкладки. Все параметры в окне свойства нам уже хорошо известны.
Самое главное, что нужно научиться делать – это не путать области применения параметров.
Больше экспериментируйте с имеющимися свойствами элементов таблицы, и Вы научитесь добиваться нужного результата.
Наверное, Вы согласитесь, что предложенных нами инструментов по формированию и настройке таблиц более чем достаточно для создания таблиц любой сложности.
Далее мы обозначим список инструментов, предназначенных для управления количеством элементов таблицы:
- Вставить строку перед этой («Эта» строка – строка, которую Вы выбрали перед тем, как нажать на кнопку)
- Вставить строку после этой
- Удалить строку (Удаление выделенной строки)
- Вставить столбец перед этим
- Вставить столбец после этого
- Удалить столбец
Далее идут инструменты, знакомые любому пользователю офисных приложений.
- Объединить ячейки таблицы
- Разбить объединенные ячейки таблицы
- Удалить таблицу.
КНОПКА ПОДРОБНЕЕ
Многие из Вас видели на различных сайтах, в том числе и на этом, кнопку «Подобнее…», которая обычно располагается под кратким описанием статьи, новости или объявления, при нажатии на которую, открывается страница с более полным текстом.
Как это сделать?
В первую очередь, необходимо знать, что при таком представлении информации, эта статья, новость или объявление является одним материалом, содержащим и краткое описание, и полный текст. По этому, для его создания нам необходимо сделать материал (См. раздел МАТЕРИАЛЫ), написать в нем текст краткого описания, перенести курсор на следующую строку, затем нажать кнопку 
Подробнее на панели инструментов в Визуальном редакторе материала и со следующей строки дописать полный текст статьи.
Вследствие указанных операций, между кратким описанием и полным текстом в редакторе появится разделитель: 
, который обозначает, что в этой области текст прервется и закончится кнопкой «Подробнее…» , при нажатие на которую пользователь увидит полный текст материала.
Надпись кнопки можно сменить на любую удобную для Вас. Соответствующие настройки описываются в разделе Материалы, нашего урока.
РАСШИРЕННЫЙ РЕДАКТОР КОДА
- Расширенный редактор кода
Редактор кода предназначен для редактирования html кода страницы в интерфейсе кода программы.
Такая возможность дает вывести привычный интерфейс для опытных сайтостроителей.
Кроме того, используя Расширенный редактор кода, Вы сможете вставить в страницу сторонний код, например yandex карту или счетчики статистики, flash-анимацию или календарь, управляемый java скриптом.
Редактор имеет функцию подсветки объектов, нумерацию строк кода и редактор шрифта, что позволяет нам считать его удобным инструментом написания кода.
Рис. 53
