WYSIWYG Web Builder

WYSIWYG Web Builder

WYSIWYG Web Builder – это оффлайновый конструктор сайтов, в котором можно создавать HTML-страницы и сайты без знания HTML, CSS, Javascript, PHP. Объекты страницы можно просто перетаскивать мышкой с панели элементов и задавать им нужные параметры в окне свойств. Вроде бы программа для домохозяек и ленивых школьников. Но на самом деле конструктор может пригодится и опытным веб-разработчикам для предварительного быстрого макетирования, для ускорения процессов создания лендингов с адаптивной версткой, для настройки анимации, для встраивания готовых дизайнерских решений и даже для интеграции сайта с CMS.

Интерфейс конструктора

Интерфейс программы во многом похож на интерфейс среднестатистического векторного редактора или редактора деловой графики. Слева или сверху выбираем инструмент, с помощью которого создаем на странице объект. Перетаскиваем и масштабируем объект с помощью мыши. Выравниваем взаимное расположение с помощью направляющих и набора соответствующих кнопок. Справа в окне свойств производим тонкую настройку параметров объекта.
Слева в области Blocks есть готовые дизайнерские шаблоны.
Но, в отличие от векторного редактора, в WYSIWYG Web Builder можно не только рисовать графические фигуры и добавлять изображение с текстом, но располагать на странице большое количество HTML-элементов: меню, формы, галерею изображений, слайд-шоу, медиа объекты, виджеты...
Когда вы создаете многостраничный сайт, то в правой части интерфейса программы вам пригодится окно "Менеджер сайта", в котором будет отражаться структура сайта и предоставлены инструменты для оперирования страницами.
Центральная рабочая область снабжена линейками, что облегчает быстрое точное позиционирование элементов на странице. Если у вас есть макет страницы в PSD формате, то WYSIWYG Web Builder – одно из самых удобных решений для работы по созданию страницы по макету (см. видео в конце статьи).

Основные возможности

Возможности вёрстки и интерактива

🔶 Формирование web-страницы из стандартных html-элементов (текстовые блоки, изображения, таблицы, фреймы, формы...)
🔶 Добавление на страницу медиа-объектов (видео, аудио, Flash, Java-объекты...)
🔶 Виджеты для работы и изображениями (галерея, слайд-шоу, коллаж...)
🔶 Плагины для расширения функционала (таймер, поиск по сайту, блог...)
🔶 Возможность добавить свой код на страницу (HTML, Javascript, Java...)
🔶 Возможность подключить стороннюю Javascript библиотеку по ссылке
🔶 Готовые jQuery скрипты (гармошка, автодополнение, календарь, меню...)
🔶 Иконки из предустановленного набора
🔶 Рисование векторных фигур (линии, овалы, многоугольники...)
🔶 Выбор формата сохранения векторных фигур при публикации (svg, canvas, растр)
🔶 Возможность манипулировать элементами по событию
🔶 Возможность анимировать элементы (CSS, jQuery)
🔶 Таймлайн для анимации
🔶 Возможность использования web-шрифтов
🔶 Возможность управлять взаимным расположением элементов на странице (выравнивание на плоскости, ранжирование по глубине)
🔶 Работа со слоями
🔶 Добавление примечаний на страницу (не видны при публикации)
🔶 Проставление мета-тэгов страницы
🔶 Формирование адаптивного дизайна с помощью точек останова и/или сетки верстки
🔶 Проставление ссылок и анкоров
🔶 Элементы для работы с PayPal (добавления в корзину, покупки, пожертвования...)
🔶 Элементы администрирования сайта (форма авторизации и регистрации, смена пароля, досттуп к странице...)
🔶 Элементы для работы с CMS (администрирование, меню, поиск...)

Функциональные возможности

🔷 Просмотр сайта перед публикацией (открывается в браузере по-умолчанию)
🔷 Публикация сайта (на диске сохраняются html, css, js, медиа-файлы...)
🔷 Сохранение проекта (на диске сохраняется файл *.wbs и медиа-файлы для работы над сайтом в дискретном режиме)
🔷 Создание направляющих линий с возможностью "прилипания" к ним объектов страницы
🔷 Импорт существующих HTML-страниц
🔷 Автосохранение проекта
🔷 Резервное копирование проекта (в том числе по FTP)
🔷 Выбор темы интерфейса программы
🔷 Встроенный менеджер стилей
🔷 Встроенный валидатор ссылок
🔷 Встроенный менеджер материалов
🔷 Генерация карты сайта
🔷 Глобальная замена контекста по всем страницам сайта/проекта
🔷 Пакетная обработка свойств всех страниц
🔷 Возможность заблокировать элемент на холсте против его случайного изменения
🔷 Настройка поиска по сайту

Drag and Drop с помощью WYSIWYG Web Builder

Тут я подразумеваю не перетаскивание элементов на холст пользователем в интерфейсе конструктора, а функционал Drag&Drop для посетителя сайта на опубликованной html-странице, который вы можете спрограммировать с помощью конструктора.

Хотя по умолчанию есть несколько событий перетаскивания и бросания в самом конструкторе, они не покрывают всего спектра пожеланий пользователя. Можно пойти путем подключения сторонней js-библиотеки для этого дела. Выберем jQuery. Нужна основная библиотека и ui-библиотека. Основная библиотека в WYSIWYG Web Builder подключена – посмотрите с свойствах страницы закладку Advanced – поле jQuery version. А вот ui-библиотеку подключим так: на закладке Page кликнем по кнопке Page HTML и откроем закладочку Between <head></head> tags. Вставим строку <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> – таким образом мы произвели подключение библиотеки, контролирующей Drag&Drop на вашей будущей странице.

Теперь элементы страницы можно делать перетаскиваемыми или контейнерами, которые будут ловить перетаскиваемые элементы. Например:
$('#wp_myDrag').draggable({revert:'invalid', opacity:'0.7'}); // элемент с id=myDrag сделать перетаскиваемым, после непопадания в цель возвращать элемент обратно, во время перетаскивания изменять прозрачность.
$('#wp_myDrop').droppable({accept:$('#wp_myDrag'), tolerance:'intersect'}); // элемент с id=myDrop сделать целью, в которую может попасть только элемент-источник с id=myDrag если во время бросания он будет более чем наполовину находиться в области элемента-цели.

На счет id замечу, что после публикации все id всех элементов получают префикс wb_, поэтому, если в свойствах объекта вы видите id="myDrag", то после публикации будет id="wb_myDrag", потому что все элементы помещаются в div с таким id.

Master Frame

Это удобный инструментарий для размножение одного и того же содержимого из одного места на разные страницы.

1. Создать мастер-страницу, назовем ее для наглядности master. Имя лучше задавать на панели Site Manager. Это соответствует Menu name.
2. На странице master создать по своему макету нормальные шапку и подвал. Между ними вставить впритык элемент Content Place Holder – это будет место, оригинальное для каждой другой страницы. А шапки и подвал будут одинаковыми.
3. Создать новые страницы, отвечающие своим задачам.
4. На каждой из новых страниц создать элемент Layer, который будет в ширину – как элемент Content Place Holder на странице master, а начало его координат будет 0, 0. Это будет контейнер, в который нужно поместить оригинальный для каждой страницы контент.
5. В свойствах каждой оригинальной страницы на закладке Miscellaneous сделать настройки в разделе Master Page: в поле Page выбрать страницу master; в поле Type выбрать Master Frame (request content place holder).

Всё. Теперь на каждой оригинальной странице шапка и подвал будет как на мастер-странице, а между ними будет оригинальный контент.

Следует сказать, что конструктор идет по пути наименьшего интеллектуального напряжения в этом вопросе, он просто при публикации проекта в HTML копирует код мастер-страницы в каждую оригинальную страницу. В то время, как при ручном кодировании страниц грамотный вебмастер поступает несколько иначе – он создает, например, файлы header.htm и footer.htm, а в каждой оригинальной странице подтягивает их код одной командой SSI типа <!--#include virtual="header.htm"-->

Некоторые особенности

По коду. В интерфейсе программы HTML-код править не очень удобно, хотя и можно. Однако после публикации вы можете редактировать все файлы сайта, что для знающего верстальщика будет полезно. Любой конструктор генерит избыточный код, но если говорить о WYSIWYG Web Builder, то его код можно охарактеризовать как умеренно избыточный, что выгодно отличает его от аналогов. По крайней мере, логика вёрсти простая – все элементы имеют абсолютное позиционирование с заданными координатами и размерами.
По шрифтам. Если вы назначает шрифты просто так не задумываясь, то не факт, что именно ими будут отображаться ваши тексты на компьютерах посетителей сайта. Для того, чтобы гарантировано шрифты дошли до посетителя надо их тем или иным способом подгрузить и настроить такую подгрузку в редакторе. Это делается в Tools > Options > Fonts > раздел HTML. Здесь вы можете настроить загрузку Google-шрифтов – тогда при публикации в head страниц будет прописываться команда загрузки. Если же выбрать опцию Automatically use @font-face for non web-face fonts – тогда при публикации файлы шрифтов будут сохраняться в папку публикации и из нее подтягиваться.

Скачать, почитать

📥 Скачать WYSIWYG_Web_Builder_14 (портабельная с паролем для архива: newart.ru). Проверялась на Windows 7x32 и 10x64.
С помощью этой версии я сделал небольшое веб-приложение для тренировки изучающих английский язык – можете посмотреть.

📥 Более свежая версия – WYSIWYG_Web_Builder_18.2.2 (также портабельная и такой же пароль для архива: newart.ru).

📘 Руководство пользователя WYSIWYG Web Builder. На английском, уж чем богаты, тем и рады. От себя я добавил в конец этого PDF документа описания всех событий элементов, на которые можно назначить реакцию. События описаны на русском на 5 страницах. Всего в руководстве 299 страниц.