• проектирование и развитие сайта
    комплесные решения

  • эффективное управление
    оперативное изменение данных
    экономия времени

  • взаимодействия с посетителями сайта
    отзывчивый веб-дизайн
    получение полезных контактов

  • многопользовательский интерфейс
    коллективное управление содержимым сайта

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

IT магазин - конструктор сайтов

Руководство пользователя

    1. Введение
    2. Команды верхнего меню
    3. Строка выбора текущего элемента
    4. Примерные уроки
  • Введение

    Визуальный редактор основан на широко распространенном принципе - «что видишь, то и получишь». Этот способ редактирования содержания максимально приближает процесс изменения кода к конечному внешнему виду страницы сайта. Возможности визуального редактора включают в себя встроенные возможности браузера для редактирования текста непосредственно на странице и функциональные возможности командного меню самого редактора.

    Набор действий редактирования состоит из действий клавиатуры, мыши, команд верхнего меню и строки выбора текущего элемента.

    С помощью клавиатуры и мыши можно производить следующие основные действия: установка курсора, печать текста, выделение фрагмента редактора, выделение содержимого текущего элемента двойным нажатием мыши, перемещение элементов, отменить действие (Ctrl+Z), повторить действие (Ctrl+Shift+Z), копирование фрагмента (Ctrl+C), вставка скопированного текста (Ctrl+V), вырезать фрагмент(Ctrl+X) и команд контекстного меню.

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

  • Команды верхнего меню

    • HTML код элемента

      Открывает диалог с содержимым выбранного элемента для редактирования открытого html кода.

      HTML код элемента

      Диалог содержит поле для редактирования html кода выбранного элемента, кнопку «Добавить» для сохранения изменений и кнопку «Отмена».

    • Отменить действие

      Команда отменяет последнее действие и восстанавливает код редактора.

    • Повторить действие

      Команда повторяет последнее отмененное действие и восстанавливает код редактора.

    • Убрать форматирование

      Команда заменяет html код текущего элемента на текст содержащийся во вложенных элементах.

    • Вставить составной элемент

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

      Вставить составной элемент

      Команда открывает диалог для работы со составными элементами. На закладке «Элементы» с левой стороны отображается дерево элементов визуального редактора, с отметками напротив каждого элемента. Элементы дерева открываются и схлапываются по щелчку мыши на подписи элемента. После отметки элемента его название и html содержание отображаются справа в полях «Название» и «HTML код», значение которых доступно для изменения. Кнопка «Добавить» вставляет html код к текущему элементу редактора после вложенных в него элементов. Диалог можно использовать для дублирования уже созданных блоков html кода в новое место визуального редактора. Справа имеется поле отметки «Добавить в библиотеку», при установленной отметке во время добавления элемент сохраняется на закладку «Библиотека» для повторного использования.

      Вставить составной элемент

      На закладке «Библиотека» с левой стороны отображается простой список сохранненых элементов для повторного использования. После отметки элемента его название и html содержание отображаются справа в полях «Название» и «HTML код», значение которых доступно для изменения. Справа имеется поле отметки «Обновить компоненты», при установленной отметке во время добавления элемент заново сохраняется в библиотеке с измененым значением полей.

    • Расположение элементов

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

      Расположение элементов

      Команда открывает диалог для выбора шаблона расположения элементов в визуальном редакторе. В список доступных шаблонов расположения элементов входят «Верхний блок и колонка слева», «Верхний блок и колонка справа», «Колонка слева», «Колонки слева и справа», «Две колонки справа». Кнопка «Да» вставляет html код вокруг содержимого текущего элемента редактора.

    • Табличный элемент TABLE

      Команда открывает диалог для добавления таблицы в визуальный редактор

      Табличный элемент

      Диалог добавления таблицы содержит поля, от значений которых зависит содержимое блока таблицы. Отметка в поле «Строка заголовка» отвечает за выделения специальной строки под заголовок таблицы, поля «Количество строк», «Количество столбцов», «Ширина таблицы», «Единицы ширины» и «Толщина границы» формируют соответственно грид, расположение и границу таблицы.

    • Выбрать заголовок

      Команда открывает диалог для добавления в визуальный редактор заголовка определенного размера

      Выбрать заголовок

      Диалог предоставляет выбор формата заголовка для добавления в визуальный редактор, выбор состоит из списка тэгов H1, H2, H3, H4, H5, H6. Кнопка «Да» вставляет html код вокруг содержимого текущего элемента редактора.

    • Блочный элемент DIV

      Команда вставляет html код тэга DIV вокруг содержимого текущего элемента, блочный элемент распологается одной строкой по ширине родительского элемента.

    • Параграф P

      Команда вставляет html код тэга P вокруг содержимого текущего элемента, параграф распологается одной строкой по ширине родительского элемента.

    • Элемент цитаты BLOCKQUOTE

      Команда вставляет html код тэга BLOCKQUOTE вокруг содержимого текущего элемента.

    • Строчный элемент SPAN

      Команда вставляет html код тэга SPAN вокруг выделенного фрагмента визуального редактора, строчные элементы распологаются друг за другом в строку с шириной по содержимому элемента.

    • Вставить горизонтальную линию HR

      Команда вставляет html код тэга HR после вложенных элементов текущего элемента.

    • Форма FORM

      Команда вставляет html код подготовленного элемента формы с двумя полями и кнопкой вокруг содержимого текущего элемента.

    • Выбрать элемент формы

      Команда открывает диалог для добавления в визуальный редактор элемента формы

      Выбрать элемент формы

      Диалог предоставляет выбор элемента из списка FORM, FIELDSET, LEGEND, BUTTON[type=button], BUTTON[type=reset], BUTTON[type=submit], INPUT[type=checkbox], INPUT[type=file], INPUT[type=hidden], INPUT[type=image], INPUT[type=password], INPUT[type=radio], INPUT[type=text], SELECT, OPTION. Кнопка «Да» вставляет html код после вложенных элементов текущего элемента редактора.

    • Подчеркнутый шрифт

      Команда вставляет html код вокруг выделенного фрагмента редактора для изменения начертания текста на подчеркнутый вид.

    • Жирный шрифт

      Команда вставляет html код вокруг выделенного фрагмента редактора для установления жирного начертания шрифта.

    • Курсивный шрифт

      Команда вставляет html код вокруг выделенного фрагмента редактора для установления курсивного начертания шрифта.

    • Зачеркнутый шрифт

      Команда вставляет html код вокруг выделенного фрагмента редактора для установления зачеркнутого начертания шрифта.

    • Выравнивание по левому краю

      Команда выравнивает текст блока по левому краю.

    • Выравнивание по центру

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

    • Выравнивание по правому краю

      Команда выравнивает текст блока по правому краю.

    • Выравнивание по ширине

      Команда выравнивает текст по ширине блока.

    • Нумерованный список OL

      Команда вставляет html код тэга OL и тэга LI после вложенных элементов текущего элемента редактора.

    • Простой список UL

      Команда вставляет html код тэга UL и тэга LI после вложенных элементов текущего элемента редактора.

    • Элемент списка LI

      Команда вставляет html код тэга LI после вложенных элементов текущего элемента редактора.

    • Элемент якоря

      Команда вставляет html код тэга A с атрибутом NAME вокруг выделенного фрагмента визуального редактора.

    • Вставить изображение

      Команда открывает диалог для вставки html кода формирующего изображение после вложенных элементов текущего элемента редактора

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

      Диалог содержит закладку «Ресурс страницы». На закладке слева отображается простой список изображений с отметкой выбора текущего, список формируется из соответствующего странице места на сервере. Справа отображается смаштабированное изображение и его размеры.

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

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

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

      Диалог содержит закладку «Выгрузка». На закладке расположена форма для выгрузки изображений на сервер. Форма содержит поля для выбора файла изображения, установки способа масштабирования, установки размера сохраненного на сервере изображения, и выбора места на сервере для выгрузки изображения или ресурс страницы или общий ресурс.

    • Вставить видео с youtube.com

      Команда открывает диалог для вставки html кода формирующего видео с сервиса youtube.com после вложенных элементов текущего элемента редактора

      Вставить видео с youtube.com

      Диалог содержит поле для ввода значения ссылки к файлу видео сервиса youtube.com.

    • Вставить flash объект

      Команда открывает диалог для вставки html кода формирующего объект с видео после вложенных элементов текущего элемента редактора

      Вставить видео с youtube.com

      Диалог содержит поля для ввода значений параметра объекта видео, поля «Ссылка», «Ширина» и «Высота».

    • Инспектор свойств элемента

      Команда открывает диалог для установки значений набора параметров стилей CSS (Cascading Style Sheets — каскадные таблицы стилей) для форматирования внешнего вида текущего элемента редактора.

      Инспектор свойств элемента

      Диалог содержит закладку «Отображение» для установки значений параметров стилей области расположения текущего элемента, это "position", "display", "float", "clear", "z-index", "top", "left", "width", "height", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding-top", "padding-right", "padding-bottom", "padding-left".

      Инспектор свойств элемента

      Диалог содержит закладку «Граница» для установки значений параметров стилей границ текущего элемента, это "border-color", "border-style", "border-collapse", "box-shadow", "border-top-width", "border-left-width", "border-right-width", "border-bottom-width", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius".

      Инспектор свойств элемента

      Диалог содержит закладку «Содержание» для установки значений параметров стилей текста и фона текущего элемента, это "font-style", "font-variant", "font-weight", "font-family", "text-align", "vertical-align", "text-decoration", "text-transform", "background-image", "background-repeat", "color", "font-size", "line-height", "text-indent", "text-shadow", "background-color", "background-image", "background-position".

      Инспектор свойств элемента

      Диалог содержит закладку «Список» для установки значений параметров стилей списка текущего элемента, это "list-style-position", "list-style-type", "list-style-image", "list-style-image".

      Инспектор свойств элемента

      Диалог содержит закладку «Атрибуты» для добавления и установки значений атрибутов текущего элемента, таких как ID, CLASS. Справа находится кнопка добавить, которая предоставляет возможность добавления новых атрибутов. Для атрибута CLASS встроен функционал, который проверяет содержимое ресурса css и предлагает классы css для установки значения атрибута, классы перечисляются в виде полей с отметкой.

      Инспектор свойств элемента

      Для полей, значение которых отвечает за установку параметров цвета, это цвет границы (border-color), цвет текста (color), цвет фона (background-color), встроен дополнительный функционал для вызова окна выбора цвета из цветовой гаммы модели RGB (Red, Green, Blue — красный, зелёный, синий). Окно открывается по двойному нажатию мыши в определенном поле. Слева вертикальный выбор смешения для красного цвета, справа выбор определенного цвета для значения параметра текущего элемента.

    • Открыть ресурс CSS

      Команда открывает диалог с содержимым определенного файла css для редактирования.

      Открыть ресурс CSS

      Диалог содержит поле для редактирования css кода определенного файла, кнопку «Добавить» для сохранения изменений в файл и кнопку «Отмена». Стили задают значения параметров форматирования внешнего вида элементов области редактирования. Здесь можно задать параметры классов css для использования в установке значения атрибута class в инспекторе свойств текущего элемента.

    • Включить контур элементов

      Команда добавляет для элементов редактора контур в виде штрих черты вокруг границы каждого элемента.

    • Развернуть на весь экран

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

    • Сохранение данных

      Команда сохраняет данные на север и выводит соответствующие сообщение.

    • Отмена изменения данных

      Команда отменяет все изменения и восстанавливает данные в редакторе с сервера.

  • Строка выбора текущего элемента

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

  • Примерные уроки

    • Пример-урок №1

      Создание нумерованного списка.

      Пример-урок №1
      1. Выберите подходящий тег div, в новом редакторе это может быть единственный корневой элемент.
      2. Выполните команду "Нумерованный список". Напечатайте "Черный".
      3. Выберите тег OL, выполните команду "Элемент списка", напечатайте "Красный".
      4. Выберите тег OL, выполните команду "Элемент списка", напечатайте "Зеленый".
      5. Выберите тег OL, выполните команду "Элемент списка", напечатайте "Синий".
      6. Выберите тег OL, выполните команду "Элемент списка", напечатайте "Желтый".
      7. Выберите тег OL, выполните команду "Элемент списка", напечатайте "Черный".
      8. Нажмите кнопку мыши над первым элементом списка.
    • Пример-урок №2

      Дублирование содержимого элемента в новое место редактора.

      Пример-урок №2
      1. Выполните действия из примера №1.
      2. Выберите подходящий тег div, выполните команду "Вставить горизонтальную линию".
      3. Повторите выбор тега div, выполните команду "Вставить составной элемент".
      4. На закладке "Элементы" слева, открывая вложенные элементы, отметьте тег OL, нажмите кнопку "Добавить.
      5. Нажмите кнопку мыши над первым элементом второго списка.
    • Пример-урок №3

      Способы установки цвета текста текущего элемента редактора.

      Пример-урок №3
      1. Выполните действия из примеров №1 и №2.
      2. Выполните команду "Открыть ресурс CSS", внесите следующий код:
        /* CSS Document */
        li{color:black;}
        li.red-style{color:red;}
        li.green-style{color:green;}
        li.blue-style{color:blue;}
        #index{color:yellow;}
      3. Нажмите кнопку "Добавить.
      4. Выберите второй элемент первого списка с надписью "красный", выполните команду "Инспектор свойств элемента". На закладке "Содержание" в поле "Цвет текста (color)" напечатайте "red".
      5. Выберите третий элемент первого списка с надписью "зеленый", выполните команду "Инспектор свойств элемента". На закладке "Содержание" в поле "Цвет текста (color)" напечатайте "green".
      6. Выберите четвертый элемент первого списка с надписью "синий", выполните команду "Инспектор свойств элемента". На закладке "Содержание" в поле "Цвет текста (color)" напечатайте "blue".
      7. Выберите пятый элемент первого списка с надписью "желтый", выполните команду "Инспектор свойств элемента". На закладке "Содержание" в поле "Цвет текста (color)" двойным нажатием мыши откройте окно цветовой гаммы модели RGB и выберите желтый цвет, закройте окно.
      8. Выберите второй элемент второго списка с надписью "красный", выполните команду "Инспектор свойств элемента". На закладке "Атрибуты" поставьте отметку у поля "red-style".
      9. Выберите третий элемент второго списка с надписью "зеленый", выполните команду "Инспектор свойств элемента". На закладке "Атрибуты" поставьте отметку у поля "green-style".
      10. Выберите четвертый элемент второго списка с надписью "синий", выполните команду "Инспектор свойств элемента". На закладке "Атрибуты" поставьте отметку у поля "blue-style".
      11. Выберите пятый элемент второго списка с надписью "желтый", выполните команду "Инспектор свойств элемента". На закладке "Атрибуты" в поле "ID" напечатайте "index".
      12. Выберите первый элемент первого списка.

Корзина заказа

Количество: 0 ед.
Сумма: 0 р.
корзина заказа

Личный кабинет

Формы оплаты:

mastercard
visa
Яндекс.Метрика
Хостинг 5Гб за 3$