В панели управления интернет-магазином при создании в и редактировании товаров, новостей, статей, информационных страниц, писем для рассылок загружается визуальный HTML редактор вида:

Если Вы не видите в панели управления своим интернет-магазином визуальный HTML редактор, то необходимо включить в своем браузере JavaScript. Как это сделать читайте на странице http://7910.org/oscommerce_chapter1010.php

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

Общий вид и список функций редактора TinyMCE

Редактирование страниц осуществляется с использованием визуального редактора.

ОБЩИЙ ВИД РЕДАКТОРА показан на рисунке:

Управление содержанием документа осуществляется с помощью кнопок панели управления. Внешний вид редактируемого документа отображается в окне редактирования (светлое поле). Для изменения размеров окна редактора, нажать левую кнопку мыши при положении её указателя на метке в правом нижнем углу окна редактирования (изменение размеров) и, при нажатой кнопке, перемещением "мышки" установить нужный размер окна.

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

ОПИСАНИЕ ФУНКЦИЙ КНОПОК РЕДАКТОРА (в порядке расположения):

Кнопка	Подсказка (в скобках – сочетание клавиш)	Функция
Секция "Файл"
	Save	Сохранить файл
	New document	Новый документ
Секция "Шрифт"
	Bold (Ctrl+B)	Полужирный
	Italic (Ctrl+I)	Наклонный
	Underline (Ctrl+U)	Подчёркнутый
	Strikethrough	Зачёркнутый
Секция «Выравнивание текста»
	Align left	По левому краю
	Align center	По центру
	Align right	По правому краю
	Align full	По ширине колонки
Секция «Стиль абзаца»
		Стиль оформления текста
		Стиль оформления абзаца
		Тип шрифта
		Размер шрифта
Секция «Управление фрагментами»
	Cut	Вырезать
	Copy	Копировать
	Paste	Вставить
	Paste as Plain Text	Вставить как текст
	Paste from Word	Вставить из Word
Секция «Поиск и замена текста»
	Find	Найти
	Find/Replace	Найти и заменить
Секция «Списки»
	Unordered list	Маркированный список
	Ordered list	Нумерованный список
Секция «Сдвиг»
	Outdent	Сдвинуть влево
	Indent	Сдвинуть вправо
Секция «Отмена - возврат»
	Undo	Отмена последнего действия
	Redo	Возврат отмены
Секция «Управление объектами и кодом»
	Insert/edit link	Вставить ссылку
	Insert/edit image	Вставить изображение
	Cleanup messy code	Вычистить грязный код
	Edit HTML Source	Редактировать код HTML
Секция «Цвета»
	Select text color	Выбор цвета текста
Секция «Таблицы»
	Insert a new table	Вставить новую таблицу
	Table row properties	Свойства строки
	Table cell properties	Свойства ячейки
	Insert row before	Вставить строку перед текущей
	Insert row after	Вставить строку после текущей
	Delete row	Удалить текущую строку
	Insert column before	Вставить столбец перед текущим
	Insert column after	Вставить столбец после текущего
	Delete column	Удалить столбец
	Split table cells	Разделить ячейки
	Merge table cells	Объединить ячейки

Описание операций, выполняемых в редакторе (по функциям)

Сохранение документа

Save - Сохранить файл

- Сохранить текущий вариант документа в файле

New document - Новый документ

- Полностью очищает введенные данные. Ввод документа можно начать с чистого листа.

Управление фрагментами

Cut - Вырезать

- вырезает часть документа и помещает в буфер обмена.

Copy - Копировать

- помещает часть документа в буфер обмена.

Paste – Вставить

- помещает данные из буфера обмена в документ.

Paste as Plain text - Вставить как текст

- Вставить обычный текст позволяет вставить данные из буфера обмена,предварительно очистив их от форматирования. При использовании Opera®, Firefox® или Mozilla® открывается форма, в которую пользователь вставляет текст из буфера обмена нажатием Ctrl+V. При установленном параметре «Keep linebreaks» (сохранить переносы строк), переносы строк оформляются в виде абзацев.

После вставки текста в форму:

• "Insert" - вставка текста из формы в редактируемый документ;
• "Cancel" - отказ от вставки текста в документ.

Paste from Word - Вставить из Word

- Вставить из Word позволяет вставить данные из Word, предварительно очистив их от лишнего форматирования. При использовании Firefox® или Mozilla® открывается форма, в которую пользователь вставляет текст из буфера обмена нажатием "Ctrl+V".

После вставки текста в форму:

• "Insert" - вставка текста из формы в редактируемый документ;
• "Cancel" - отказ от вставки текста в документ.

Find - Найти

- позволяет осуществлять поиск в документе. При вызове функции, открывается форма «Find/Replace» (Поиск/Замена). Для поиска используется вкладка «Find» (Найти).

• "Find what" - в это поле вводится искомое слово или фраза.
• "Direction" - направление поиска от текущей позиции
  • Up — искать "Вверх"
  • Down – искать "Вниз"
• "Match case" - поиск с учетом регистра (если поставить галочку).
• "Find next" - найти следующее место в тексте, с тем же словом/фразой.
• "Cancel" - отказ от поиска.

Find/Replace - Найти/заменить

- позволяет осуществлять поиск и замену в тексте документа. Используется та же форма, что и при поиске ("Find/Replace"), но вкладка "Replace" (Замена).

• "Find what" - поле для ввода искомого слова/фразы.
• "Replace with" - поле слова/фразы для замены.
• Direction - направление поиска от текущей позиции
  • Up — искать "Вверх"
  • Down - искать "Вниз"
• "Match case" - поиск с учетом регистра (поставить галочку).

Сначала выполняется поиск и отображение участка документа с выделенным искомым текстом.

• "Replace" - замена найденного в данной позиции. Если в этом месте документа замена не нужна, можно продолжить поиск - нажать "Find next"</b>.
• "Find next" - найти следующее место в тексте, с тем же словом/фразой.
• "Replace all" - замена искомых слов/фраз по всему документу, автоматически, в заданном направлении от текущей позиции.
• "Cancel" - отказ от поиска/замены.

Форматирование текста

Управление шрифтом

Bold - Полужирный
- выделяет текст полужирным.

Italic - Курсив
- выделяет текст курсивом.

Underline - Подчеркивание
- выделяет текст подчеркиванием.

Strikethrough - Перечеркивание
- выделяет текст перечеркиванием.

Управление выравниванием

Align left - Выравнивание влево
- текст выравнивается по левому краю.

Align center - Выравнивание по центру
- текст выравнивается по центру.

Align right - Выравнивание вправо
- текст выравнивается по правому краю.

Align full - Выравнивание равномерно
- текст выравнивается по ширине.

Управление параметрами выделенного текста

Стиль
- позволяет для текста выбрать стиль отображения. Список стилей загружается из CSS-файла, соответствующего макету.

Формат
- позволяет выбрать формат отображения текста.

Шрифт
- позволяет для текста выбрать шрифт. При форматировании текста рекомендуется использовать CSS стили вместо явного указания размера и шрифта.

Размер шрифта
- позволяет задать для текста размер шрифта.

Создание списков

Unordered list
- маркированный список, позволяет добавить на страницу маркированный список или представить в виде такого списка выделенный фрагмент текста.

Ordered list
- нумерованный список, позволяет добавить на страницу нумерованный список или представить в виде такого списка выделенный фрагмент текста.

Горизонтальный сдвиг (отступ)

Outdent
– сдвинуть влево (уменьшить отступ), сдвигает влево выделенный фрагмент (объект) относительно остального текста.

Indent
– сдвинуть вправо (увеличить отступ), сдвигает вправо выделенный фрагмент (объект) относительно остального текста.

Отмена – возврат

Undo - Отмена - отменить последнее действие.

Redo - Возврат – выполнить ошибочно отменённое действие.

Управление ссылками

Управление ссылками (на "якоря", другие страницы, сайты) активизируется при выборе объекта (выделении текста, выборе картинки) с которого нужно сделать ссылку.

Вставить/изменить ссылку
- внедряет ссылку в текст (тег <a href="адрес ссылки">текст ссылки</a>). Содержит несколько вкладок.

Вкладка «General» (Основные)

Вкладка "Popup" (Всплывающие)

Для открытия ссылки во "всплывающем" окне с заданными параметрами (на Javascript). Настройки становятся доступны после установки галочки "Javascript popup".

Вкладка «Events» (События)

Вызов ссылки по событию. В поля вводятся адреса, на которые выполняются переходы при наступлении соответствующих событий.

Вкладка «Advanced» (Расширенные)

Дополнительные свойства ссылки (атрибуты, добавляемые к тегу ссылки).

MIME (Multipurpose Internet Mail Extensions) - стандарт для определения типа передаваемой информации и механизмов ее обработки.
Лайтбокс – специальне окно для просмотра изображений, с дополнительным интерфейсом. Реализуется на JavaScript.

Управление изображениями

Смотрите также Менеджер изображений в визуальном HTML редакторе

Insert/edit image - Вставить/изменить изображение
- позволяет управлять изображениями в документе. Окно имеет несколько вкладок:

Вкладка «Основные»

Вкладка «Appearance» (Визуализация)

Вкладка «Advanced» (Расширенные)

Имеется две панели:

"Swap image" (сменить картинку) – панель замены изображения на альтернативное при действиях с указателем мыши.

• Alternative image (альтернативное изображение) – если установить галочку, то включается поддержка замены картинки на альтернативную при:
  • "for mouse over" – при наведении указателя мыши на картинку. В поле нужно вписать адрес (путь к файлу на сервере) альтернативной картинки.
    
  • "for mouse out" – смена изображения при уходе указателя мыши с картинки. В поле нужно вписать адрес изображения (путь к файлу на сервере).

Панель "Miscellaneous" (разное)

Вычистить грязный код

Cleanup messy code - Вычистить грязный код
– автоматическая корректировка кода с удалением лишних и ошибочных тегов.

Редактирование HTML-кода

Edit HTML Source - Редактировать HTML
- открывается Редактор html-кодов, в котором пользователь получает возможность корректировки html-кода.

Выбор цвета текста

Select text color - Выбор цвета текста

- предоставляет возможность выбора цвета текста из палитры. На кнопке, под символом шрифта (А) показывается текущий выбранный цвет. Его можно применить к выделенному тексту или нажать кнпку перед началом ввода текста с выбранным цветом. При нажатии на стрелку рядом с кнопкой, выводится таблица (40 цветов), в которой можно выбрать нужный цвет:

Если цветов, представленных в этой таблице не достаточно, нужно нажать кнопку "More colors" под таблицей. При этом, откроется отдельное окно выбора цветов, с тремя вкладками. Для всех вкладок, кнопка "Apply" – применить выбранный цвет (окончание выбора).

Вкладка "Picker"

Вкладка "Picker" – "пипетка" позволяет выбрать произвольный цвет.

Для выбора цвета – кликнуть в нужном месте радужной палитры, затем, в правом столбце выбрать его яркость. Внизу справа показывается код цвета, а также, прямоугольник, залитый выбранным цветом. В окне с кодом можно ввести нужный код цвета с клавиатуры, в 16-ричном (hex) коде.

Вкладка "Web safe"

Вкладка "Web safe" – веб-безопасные цвета. Выбор из палитры в 216 цветов, являющейся стандартной для всех программ инернет-браузеров (во всех браузерах отображаются одинаково).

Для выбора цвета – кликнуть на нужном цветном квадратике.

Вкладка "Named"

Вкладка "Named" - именованные – таблица цветов, имеющих стандартные наименования (показываются внизу, под палитрой, при наведении курсора на цветные квадратики).

Выбор – аналогичен остальным вкладкам – кликнуть на нужном цвете, нажать кнопку "Apply" - применить.

Работа с таблицами

Вставить новую таблицу

Inserts a new table - Вставить новую таблицу

- позволяет управлять уже существующими таблицами и создавать новые. Окно содержит несколько вкладок.

Вкладка "General"

Вкладка "General" (Основные):

Вкладка "Advanced"

Вкладка "Advanced" - (Расширенные):

Поле	Функция (перевод)	Описание
Id	Идентификатор	Идентификатор таблицы (значение атрибута id)
Summary	Краткое описание	Краткое описание таблицы (значение атрибута summary)
Style	Стиль	Стиль таблицы (значение атрибута style)
Language direction	Направление письма в языке таблицы	Возможны варианты: Non set - не задано Left to right - слева-направо Right to left - справа-налево (для восточных языков)
Language code	Языковой код	Код языка (значение атрибута lang)
Background image	Фоновое изображение	Фоновое изображения таблицы (адрес файла изображения)
Border color	Цвет рамки	Цвет рамки из палитры цветов (при нажатии на кнопку вызывается окно выбора цветов, описанное в выборе цвета текста.
Background color	Цвет фона	Цвет фона из палитры цветов (при нажатии на кнопку вызывается окно выбора цветов, описанное в выборе цвета текста.
Class	Класс	Наименование класса из таблицы CSS стилей (из имеющихся)
Table caption	Заголовок таблицы	Резервирование места под заголовок, над таблицей

Параметры строки таблицы

Table row properties - Параметры строки таблицы

- позволяет управлять параметрами и атрибутами строк и содержит две вкладки.

В нижней части окна находится поле выбора строк, к которым будут применены выбранные параметры и атрибуты:

• Update current row - применить к текущей строке.
• Update odd rows in table - применить к нечётным строкам таблицы
• Update even rows in table - применить к чётным строкам таблицы
• Update all rows in table - применить ко всем строкам таблицы

Выбранные параметры вступают в силу после нажатия кнопки "Update". При отказе от применения параметров - нажать "Cancel".

Вкладка "General"

Вкладка "General" (Основные):

Вкладка "Advanced"

Вкладка "Advanced" (Расширенные):

Поле	Функция (перевод)	Описание
Id	Идентификатор	Идентификатор строки таблицы
Style	Стиль	Стиль строки таблицы (CSS), значение атрибута style
Language direction	Направление письма в языке таблицы	Возможны варианты: Non set - не задано Left to right - слева-направо Right to left - справа-налево (для восточных языков)
Language code	Языковой код	Код языка (значение атрибута lang)
Background image	Фоновое изображение	Фоновое изображение для строки (адрес файла изображения)
Background color	Цвет фона	Цвет фона из палитры цветов (при нажатии на кнопку вызывается окно выбора цветов, описанное в выборе цвета текста.

Параметры ячейки таблицы

Table cell properties - Параметры ячейки таблицы

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

• Update current cell - применить к текущей ячейке
• Update all cells in row - применить ко всем ячейкам в текущей строке
• Update all rows in table - применить ко всем строкам таблицы

Выбранные параметры вступают в силу после нажатия кнопки "Update". При отказе от применения параметров - нажать "Cancel"

Вкладка "General"

Вкладка "General" (Основные):

Вкладка "Advanced"

Вкладка "Advanced" (Расширенные):

Поле	Функция (перевод)	Описание
Id	Идентификатор	Идентификатор ячейки (значение атрибута id)
Style	Стиль	Стиль таблицы (значение атрибута style)
Language direction	Направление письма в языке таблицы Возможны варианты: Non set - не задано Left to right - слева-направо Right to left - справа-налево (для восточных языков)
Language code	Языковой код	Код языка (значение атрибута lang)
Background image	Фоновое изображение	Фоновое изображения таблицы (адрес файла изображения)
Border color	Цвет рамки	Цвет рамки из палитры цветов (при нажатии на кнопку вызывается окно выбора цветов, описанное в выборе цвета текста.
Background color	Цвет фона	Цвет фона из палитры цветов (при нажатии на кнопку вызывается окно выбора цветов, описанное в выборе цвета текста.

Вставить строку перед

Insert row before - Вставить строку перед

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

Вставить строку после

Insert row after - Вставить строку после

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

Удалить строку

Delete row - Удалить строку

- удаляет строку с выделенной/активной ячейкой.

Вставить колонку перед

Insert column before - Вставить колонку перед

- добавляет в таблицу колонку перед выделенной/активной ячейкой.

Вставить колонку после

Insert column after - Вставить колонку после

- добавляет в таблицу колонку после выделенной/активной ячейки.

Удалить колонку

Remove column - Удалить колонку

- удаляет колонку с выделенной/активной ячейкой.

Объединить ячейки таблицы

Merge table cells - Объединить ячейки таблицы

- объединяет ячейки таблицы, в количестве, заданном в окне:

С текущей ячейкой объединяются ячейки справа и ниже. Количество объединяемых ячеек указывается:

• Columns - количество объединяемых колонок, включая текущую (количество ячеек по горизонтали, вправо от текущей).
• Rows - количество объединяемых строк, включая текущую (количество ячеек по вертикали, вниз от текущей).

Разделить ячейки таблицы

Split table cells - Разделить ячейки таблицы

- разделяет выделенную ячейку таблицы, если она создана объединением нескольких ячеек. Одиночная ячейка не разделяется.

Вставка flash клипа

Insert Embedded Media - Вставка flash клипа

Для вставки flash ролика в визуальном редакторе нажмите кнопку Добавить/изменить клип. В выпадающем меню Тип: выберите "flash", в поле Адрес: добавьте ссылку на flash ролик. По желанию можно установить желаемые размеры клипа (ширина х высота).

Скачать руководство пользователя по работе с панелью управления интернет-магазином:
*.chm в формате Microsoft HTMLHelp (10.3Mb)	*.docx в формате Microsoft Word 2007 (19.1Mb)
*.doc в формате Word 97-2003 (22.2Mb)	*.pdf в формате Adobe Acrobat (15.2Mb)