Визуальный редактор для вёрстки сайтов

Минимальная высота блоков для компоновки

Режим редактирования hover
Режим редактирования по месту
Создать элемент страницы

Заголовок

Создать форму

Добавить опцию ("Enter")

Отредактировать опцию ("Enter")



Редактировать текст

Название шрифта

Размер шрифта

Толщина шрифта

Стиль шрифта

Цвет шрифта

Выравнивание текста

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

Название шрифта

Размер шрифта

Толщина шрифта

Стиль шрифта

Цвет шрифта

Выравнивание текста


Редактировать размер

Значение наружного отступа

Тип наружного отступа


Значение внутреннего отступа

Тип внутреннего отступа


Координата X

Координата Y


Ширина элемента

Высота элемента

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

Значение наружного отступа

Тип наружного отступа


Значение внутреннего отступа

Тип внутреннего отступа


Ширина элемента

Высота элемента


Редактировать границу

Тип границы

Толщина

Цвет границы

Радиус закругления

Редактировать границу по классу

Тип границы

Толщина

Цвет границы

Радиус закругления


Редактировать фон

Цвет заливки

Размер фонового изображения

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

Цвет заливки


Редактировать таблицу

Промежуток между рамками ячеек


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

Выберите тип маркера списка

Положение маркера относительно
блока строк текста

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

Выберите тип маркера списка


Изменить прозрачность

Уровень прозрачности элемента

Скрыть элемент

Выровнять с FlexBox

Выберите направление
главной оси

Выберите тип выравнивания
вдоль главной оси

Выберите тип выравнивания
вдоль поперечной оси


Выбрать многострочный режим

Тип выравнивания рядов блоков

Выровнять с FlexBox по классу

Выберите направление
главной оси

Выберите тип выравнивания
вдоль главной оси

Выберите тип выравнивания
вдоль поперечной оси


Выбрать многострочный режим

Тип выравнивания рядов блоков

Выровнять выбранный блок

Выбрать тип курсора
Выбрать тип курсора по классу
Обтекание текстом

Выбрать тип обтекания текстом


Добавить (удалить) гиперссылку

Инструкция по работе с программой
  • Перед началом работы создайте рабочую область командой "Создать холст" и укажите размеры области в меню "Редактировать размер";
  • Затем создайте блок(один или несколько) для компоновки элементов (DIV),щёлкнув по кнопке "Создать блок для компоновки";
  • Можно изменить минимальную высоту блоков перед их созданием. (По умолчанию 100px);
  • Выделите нужный блок, щёлкнув по нему и вставляйте в него нужные элементы
    Лучше начать со вставки вспомогательных блоков для компоновки с последующим их позиционированием;
  • Работать в редакторе надо с включенным режимом редактированя по месту. Для отключения режима снимите флажок. Это необходимо при проверке работы гиперссылок.
  • После создания списка и ввода текста можно добавлять новые пункты клавишей "Enter". Перед созданием нового пункта текст должен быть введён.Для завершения создания списка щёлкните в свободном месте.
    Списки можно редактировать, выделив нужный пункт и установив в нужном месте курсор;
  • Устанавливать нужные параметры выделенного элемента можно через меню "Редактирование".
  • Удаление выделенного элемента производится клавишами "Alt + Delete";
  • Сделав щелчок по пункту "Выбор и добавление классов" можно выбрать класс для редактирования или добавить новый, записав его название. Для сохранения добавленного класса в списке нажмите "Сохранить класс".
    Щелчком по крестику удаляется класс у элемента. Для удаления добавленного класса из списка выберите "Удалить класс". Класс исчезнет из списка после сохранения и перезагрузки страницы ("клавиша F5").
    Внизу отображается активный класс для редактирования. Все элементы, принадлежащие этому классу меняют свои свойства согласно настройкам, заданным через редактирование по классам;
  • По умолчанию имеются следующие классы:
    1. big-div — блок для компоновки (использутся для основной разметки);
    2. litle-div — вспомогательный блок для компоновки (используется для разметки внутри блока для компоновки);
    3. ul — маркированный список;
    4. ol — нумерованный список;
    5. details — разворащивающийся элемент;
    6. details-div — блок с содержимым разворащивающегося элемента;
    7. details-text — блок с текстом разворащивающегося элемента;
    8. figure-top — элемент с надписью вверху;
    9. figure-top-div — блок с содежимым элемента с надписью вверху;
    10. figure-top-text — блок с текстом элемента с надписью вверху;
    11. figure-bottom — элемент с надписью внизу;
    12. figure-bottom-div — блок с содежимым элемента с надписью внизу;
    13. figure-bottom-text — блок с текстом элемента с надписью внизу;
    14. caption-h — заголовок;
    15. paragraph-p — абзац;
    16. image — изображение;
    17. table — таблица;
    18. button — кнопка;
    19. input-text — текстовое окно;
    20. textarea — текстовое поле для многострочного текста;
    21. select — окно выбора;
    22. checkbox — переключатель с флажком;
    23. radio — переключатель с точкой.
  • Для удаления всех элементов воспользуйтесь кнопкой "Удалить всё";
  • Для удаления всех стилей элементов служит кнопка "Удалить стили";
  • Для восстановления удалённого щёлкните по кнопке "Восстановить";
  • Для сохранения страницы щёлкните по кнопке "Сохранить";
  • Для обновления страницы нажмите клавишу "F5". Рекомендуется это делать после каждого сохранения. При обновлении страницы сохранённые данные не пропадают;
  • Отмена последнего действия производится щелчком по кнопке "Отменить последнее действие";
  • Позиционировать элементы можно указав их координаты (левого верхнего угла) в меню "Редактирование" или воспользовавшись меню "Выровнять с помощью FlexBox". Для этого предварительно выделить родительский элемент(контейнер внутри которого располагаются элементы);
  • Через меню "Выровнять выбранный блок" можно позиционировать одиночный элемент внутри контейнера.
    Не пользуйтесь этим при присутствии внутри контейнера более одного элемента
  • Есть возможность вставить вспомогательный блок для компоновки в любое место по клику мыши с нажатой клавишей "Alt". Но этим следует пользоваться только в крайнем случае в завершение работы над страницей, т.к. вставленные блоки будут иметь позицию "absolute".
  • При использовании свойства "Обтекание текстом" (float) сначала вставляется изображение и назначается ему свойство "float", а затем текст.
  • Навигации по экрану помогут сочетания клавиш Ctrl + стрелка влево (возврат к начальному положению) и Ctrl + стрелка вправо (возврат к рабочему экрану).
  • При включенном режиме редактирования "hover" можно выполнить любые доступные эффекты при наведении мыши на элемент.
    (Работает только при редактированию по классу).
    Удалить эффекты можно, присвоив новый класс элементу и удалив старый.
  • Для вырезания и копирования выделите нужный элемент. Для вставки выделите блок, в который хотите вставить элемент.
  • Для получения готового результата щёлкните кнопку "Скачать код" и запустите его.

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

    Для тех, кто верит в эзотерику или просто из любопытства.
    Рассчитать число своего рождения с расшифровкой — perviyptr.github.io/numerologia/
    Сделать раскладку на картах Таро с трактовкой — perviyptr.github.io/uchebnik/TaroRasklad/

    Электронная почта для контактов: perviyptr@gmail.com


Посмотреть пример выполнения работы с использованием программы