WYSIWYG Web Builder

Обзор



Содержание сайта
Визуальные редакторы
Обзор программ л.2
WYSIWYG Web Builder

Содержание

Введение
Основные шаги
Настройки WYSIWYG Web Builder

Интерфейс
Интерфейс WYSIWYG Web Builder 9 и 10
Язык интерфейса
Строка меню (Menu Bar)
Лента (Ribbon)
Панель вставок (Toolbox)
Панель быстрого доступа
Менеджер сайта
Инспектор свойств
Менеджер резервирования
Издатель файлов
Form Wizard
Master Page
Master Frames
Master Objects
Менеджер расширений
Менеджер активов
Менеджер объектов
Менеджер темы
Менеджер градиента
Менеджер стиля
Менеджер мультипликации  
Менеджер шрифтов Google
Редактор стилей ссылок
Диспетчер ссылок
Линейка, сетка, направляющие линии

Сайт

Страницы

Объекты
Работа с объектами
Список объектов
Текст
Заметки (Notes)
Заголовки
Шрифты
Заполняющий текст
Спецсимволы
Списки
RollOver Text
Обтекание текста
Горизонтальная линия
Изображения (Image)
Изображения (Picture)
Rollover Image
Rollover Layer
Бегущая строка 
Карта ссылок
Баннер
ClipArt
Text Art
Слайды
Фотоколлаж
Фотогалерея
Аккордеон
Таблицы
Ссылки
Закладки (якоря)
Рамка (Inline Frame)
Lightbox (Лайтбокс)
Анимация
Объекты рисунка
Панели навигации
Диалог
Вставка кода HTML
Audio HTML5
YouTube  
Блог
Статья
Карусель
Держатель места
Рассылка новостей
Лента новостей
Поиск на сайте
Таймер
Верхний колонтитул
Нижний колонтитул
Java Scripts
Java апплеты
Примечания
Информационные бюллетени
RSS Feed (RSS-канал)
Structured Data
Блоки объектов
Объекты jQuery
ThemeRoller
Embedded Page
Reusable objects
Веб-формы
Card
Section (Раздел)
Flexbox
Wizard
Flex Grid (сетка)
Объекты Media
Объекты администрирования
Объекты страниц коммерции
Значок (Favorites Icon)
Карты Google
Toasts
Card Container
Conveyer Belt
И другие объекты

Расширения
События
Глобальная замена
Слои (уровни)
Поиск ошибок
Использование искусственного интеллекта
Оптимизация сайта (SEO)
Администрирование
CMS
Предварительный просмотр
Публикация
Новое в последних версиях
Сотрудничество

Объекты рисунка

Инструменты
Кривая линия   
Замкнутая кривая   
Криволинейный текст 
Линия  
Контур  
Scribble  
Баннер 
Clip Art  
Графические формы
Графические фигуры - разделители  
Text Art  
Свойства объектов рисования 
Публикация объектов рисования  
Примеры рисунков

См. также: Изображения - Введение

Инструменты

Для создания объектов рисунка можно использовать, применяя: В версиях WYSIWYG Web Builder 9 и 10 при рисовании появляется набор инструментов на Ленте.

В редакторе можно создать:

Line - линия
Curve Closed - закрытая кривая
Curved Text - криволинейный текст
Polygon - область или контур
Scribble - каракули, наброски
Shape - графические фигуры
Text Art - художественный текст



Примеры рисунков

Свойства

Объекты рисования имеют как свойства, которые присущи всем объектам (см. Работа с объектами), так и свои индивидуальные свойства и настройки.

Чтобы открыть свойства объекта, дважды щелкните по объекту или в контекстном меню объекта выберите Properties.

См. также Основные свойства объектов рисования



Кривая линия - Curve

На Панели вставок (Раздел Drawing) щелкните по Curve, в окне редактирования рисуйте кривую линию.
Вы можете создать ломаную кривую линию, состоящую из отрезков прямой - щелкайте в разных местах левой кнопкой мыши, и участки будут соединяться прямыми линиями автоматически.
Или Вы можете создать плавну кривую, просто рисуя линию с нажатой левой кнопкой мыши.

Чтобы закончить кривую, дважды щелкните левой кнопкой мыши или нажмите клавишу ESC.

При двойном щелчке по созданному объекту кривой открываются свойства объекта - ввод альтернативного текста, заполнение кривой (цветом), толщина линии, прозрачность, границы, создание ссылки, применение случая или мультипликации CSS.

Новое в WYSIWYG Web Builder 15
Для кривых и многоугольников добавлена опция 'SVG path animation'.

Замкнутая кривая линия - Curve Closed

Создается аналогично простой кривой линии, но всегда всегда создает замкнутый контур.
На Панели вставок (Раздел Drawing) щелкните по Curve Line, в окне редактирования щелкните и нарисуйте линию.
В свойствах созданного объекта можно выбрать заполнение контура (цветом, градиентом, изображением и пр.), а также применить и прочие свойства, которые есть и у простой кривой линии.
Примеры рисунков

Криволинейный текст  - Curved Text

Для создания криволинейного текста нужно использовать два объекта - текст и кривую.

Сначала Вы должны создать кривую линию:
1. Щелкните "Curved Text"  на Панели вставок, или в меню  Insert выберите Drawing -> Curved Text
2. Создайте кривую линию (Подробнее)
При двойном щелчке по вставленной линиb откроется окно настроек, где Вы можете ввести свой текст, определить шрифт, цвета, эффекты, ссылки, можете создать криволинейный текст с эффектом Rollover и пр.




Линия - Line

На Панели вставок (Раздел Drawing) щелкните по Line, в окне редактирования щелкните и создайте прямоугольную рамку для линии. В месте первоначального щелчка - начало линии.
В свойства объекта можете указать цвет и толщину линии, ее стиль (сплошная, шртриховая и др.), создать стрелки в начале и конце линии (Arrow start и Arrow end) и прочее.

Новое в WYSIWYG Web Builder 16
Новая функция: добавлено 16 новых стилей линий: стрелка, крест, шеврон, завиток, кривая, ромб, сердце, квадрат, звезды, волна, зигзаг и другие. Новое свойство «Растянуть» определяет горизонтальное масштабирование (в процентах) узора  .
- Новая функция: добавлена ​​возможность добавлять текст в строку.
- Новая функция: добавлена ​​возможность добавлять иконку в строку.

Примеры рисунков

Замкнутый контур - Polygon

На Панели вставок (Раздел Drawing) щелкните по Polygon, в окне редактирования щелкните и создайте прямоугольную рамку для контура.
Свойства Polygon аналогичны свойствам Curve Line (замкнутой кривой линии).

Новое в WYSIWYG Web Builder 15
Для кривых и многоугольников добавлена опция 'SVG path animation'.


Scribble - наброски, каракули

На Панели вставок (Раздел Drawing) щелкните по Scribble, в окне редактирования рисуйте линию.
Когда линия отобрана, индивидуальные узлы могут быть изменены, перетаскивая их к новой позиции - используйте функцию Edit Points на Ленте.

Banner - Баннер

На Панели вставок (Раздел Drawing) щелкните по Banner.
Подробнее о создании баннера

Новое в WYSIWYG Web Builder 16
Улучшено: у баннера теперь есть все стандартные параметры фонового изображения, такие как повтор, выравнивание, обложка, растяжение и т. д.
Новые функции: добавлен выходной формат SVG, добавлена ​​поддержка SVG-анимации. добавлена ​​поддержка box-shadow.


Clip Art
На Панели вставок (Раздел Drawing) щелкните по Banner.
Подробнее см. ClipArt   


Shapes - графические фигуры (формы)

На Панели вставок (Раздел Drawing) щелкните по Shapes.
Редактор имеет большой набор различных графических форм. При вставке фигуры в Окно редактирования появляется набор инструментов для работы с фигурами.


Редактор создает каждую форму как .gif файл.

Новое: Появилась возможность поместить на форму различные фигуры, символы и пиктограммы.
Стиль оформления фона 'Glass' (Стеклянный) ранее был доступен только при работе с графич. формами и баннерами. Сейчас этот стиль является стилем градиента и может использоваться в других объектах.

  Type - Выберите тип формы - прямоугольник, эллипс, шестиугольник, восьмиугольник, стрелки, звезды и многое другое.




Новое: Добавлена новая функция - добавлен режим Full width ("полная ширина"), чтобы сформировать, текст и картинки для использования с режимом вывода SVG.
Это создает возможность иметь масштабируемые / гибкие формы / текст / клипарт в сетках макета (при создании сайтов для разных экранов).
SVG - Scalable Vector Graphics — масштабируемая векторная графика (См. также Википедия о SVG.).
Новая функция: WYSIWYG Web Builder 14 теперь официально поддерживает SVG.
- Улучшено -  фигуры (Shape) в галерее "Insert Shape" ("вставить фигуру")    теперь отображаются больше и четче, как и другие галереи вставок ('Insert").

Новое: Теперь использует CSS-преобразования для вращения.
Новые функции:
Добавлена ​​опция 'SVG path animation'. Это добавляет возможность анимировать границу (обводку) форм SVG, textart, клипарт. Это делает его похожим на фигуру / текст, нарисованный на веб-странице в режиме реального времени (имитация рисования). И другое.
Подробнее

Новая функция: добавлен объект «Морфинг-форма». Плавно трансформируйте две или более формы, чтобы создавать потрясающие анимации на своем веб-сайте. Поддерживаются все встроенные формы, клипарт и библиотека значков. Вы даже можете переходить между значками из разных библиотек.  Подробнее

Новая функция: добавлено 16 новых форм.
- Новая функция: добавлена ​​опция высоты строки для текста формы (только HTML).
- Новая функция: добавлена ​​(экспериментальная) поддержка анимации пользовательских изображений SVG.

Новые функции:
- добавлена ​​возможность выравнивания текста фигуры.
- добавлен экспериментальный текст «внутри фигуры» для формы «Коннектор блок-схемы». По сути, эта форма точно такая же, как и стандартная форма эллипса. Однако текст будет обтекать окружность внутри обычного прямоугольного блока.
Улучшено: макет CSS для текста теперь всегда использует проценты и flexbox для лучшего отклика.


Графические фигуры - разделители

Новое в WYSIWYG Web Builder 15.
Чтобы разделить страницу на несколько разделов, есть несколько способов. Например, разделы можно отделить друг от друга линиями - см. Объекты рисунка - Линия.
Другой способ - использовать графические фигуры.
Фигуры-разделители можно использовать в слоях, сетках макета и контейнере Flex Box.
Подробнее

Text Art - Художественный текст
На Панели вставок (Раздел Drawing) щелкните по Text Art
Примеры рисунков

Имеются некоторые изменения и новые функции применительно к Text Art.
Подробнее

Новая функция: добавлен стиль «без преобразования» (no transform). Это может быть полезно, например, для вывода стандартного текста в формате SVG со стилем или анимацией «текстовая графика» (text art).

Новое для TextArt - Добавлено 3 новых стиля деформации: большой круг, средний круг, маленький круг. Отличный способ добавить круговой текст.
 Примечание. При экспорте в формате SVG текст является адаптивным.

ClipArt / TextArt / Shape / Polygon (Многоугольник)/ Banner / Text / Merged Object (Объединенный объект)
Новая функция: добавлена ​​возможность публикации изображения в формате WebP. Это может уменьшить размер файла изображения при сохранении того же качества. Опубликованный файл будет использовать сжатие без потерь.
Уровень сжатия можно установить в меню Tools (Инструменты) -> Параметры (Options) -> Опубликовать (Publish).
Уровень 1 — самый быстрый, уровень 9 — самый медленный. Быстрый режим создает файл большего размера, чем более медленный.
- Также возможен экспорт в формате WebP через контекстное меню: Сохранить как изображение (Save as Image).

Новое для Text Art (Текстовое искусство)
Добавлено свойство «Интервал между строками». Добавлено свойство «Интервал между буквами». Подробнее


Основные свойства объектов рисования

Чтобы открыть свойства объекта рисования, дважды щелкните по объекту или в контекстном меню объекта выберите Object Properties.

Size
-  Определяет толщину линии.
Color -  Определяет цвет линии.
Style -  Определяет стиль линии (сплошная, штриховая, точечная и пр.)
Arrow Start - Начало стрелки (для линий со стрелками)
Arrow Start Size - Размер начала стрелки
Arrow End - Конец стрелки
Arrow End Size - Размер конца стрелки

Alternate text (Alt) - Дополнительный текст  Этот текст, обычно короткое описание, появляется вместо объекта в браузере, когда изображения неподдерживаемы или были заблокированы. В некоторых браузерах появляется как всплывающая подсказка (ToolTip), когда Вы перемещаете мышь по изображению.

Anti Alias
- Дайте возможность этой опции улучшить качество графических символов. Это может замедлить работу приложения.

Connector Type -Тип соединителя, соединительные линии обычно используются в блок-схемах.
  • Line Draws - прямая линия.
  • Elbow Draws - изогнутая под прямыми углами
  • Curve Draws - кривая соединительная линия.
Connector orientation - Ориентация соединителя - горизонтальная, вертикальная или авто.

Fill Effect
- Заполнение объекта (для многоугольника, графических форм). Заполнение может быть однородным цветом, градиентом, текстурой, рисунком, с применением прозрачности и пр.

Shadow -Внутренняя Тень

Link - Ссылка

EventsСобытия

Примечание: инструменты Линии, многоугольника, каракули доступны только в системах с установленной  GDI +

Scribble - Каракули

На примере Scribble можно пояснить, как создаются рисунки в WYSIWYG Web Builder.

Каракули - линии произвольной формы.

Для вставки Scribble на Панели вставок щелкните по Scribble

В окне редактирования щелкните в месте, где начнется линия, и, не отпуская левой кнопки мыши, тяните линию.

Можно отпустить кнопку мыши и вновь начать тянуть линию (разрыв соединится прямой).

Чтобы закончить линию, дважды щелкните левой кнопкой или нажмите клавишу ESC.

Чтобы выделить линию - щелкните по линии. При двойном щелчке по линии открывается окно свойств линии: толщина и цвет линии линии (Border Width и Border Color), стиль линии (сплошная, штриховая и пр.).

Так как линия сохраняется как изображение, то ей можно назначить событие или ссылку (на вкладке Link окна свойств).


Публикация графических форм


Чтобы открыть свойства формы, дважды щелкните по объекту или в контекстном меню выберите Object Properties.
Свойства формы в основном аналогичны свойствам других графических объектов, но есть и своя специфика.

WYSIWYG Web Builder теперь дает возможность Вам преобразовать свои формы в элементы HTML5!
В окне свойств объекта есть вкладка Publish, которая дает возможность выбрать метод публикации графических форм:
  • Publish as Image - публикация формы как изображения
  • Publish as <canvas> -  Это создаст сложный набор запросов JavaScript, чтобы отразить в браузере.
  • Publish as <svg> - при публикации используется HTML5's <svg> элемент.
  • Publish as CSS3  -  при публикации используется CSS3, создается standard <div> с моделированием CSS3 (граница и цвет фона). Отметьте в этом режиме, только прямоугольник, эллипс и формы закругленного угла возможны, потому что CSS не поддерживает никакие другие типы формы!

Известные ограничения:
- Использование  HTML5 и CSS3 - очень новая методика и не все рисунки, созданные в WYSIWYG Web Builder, особенности формы, правильно отразятся в современных браузерах.
- Не все эффекты градиента поддержаны.
- Текст на форме не поддержан.
- Усеянная и подчеркнутая штриховой линией граница не поддержана для <canvas>. 
- Тень и другие эффекты изображений не поддержаны.

Shadow Offset X-Теневое Смещение X Горизонтальных теневых смещений.
Shadow Offset Y-Теневое Смещение Y Вертикальное теневое смещение.
Shadow Opacity-Теневые Наборы Непрозрачности прозрачность тени.
ShadowColor Определяет теневой цвет.
Opacity -Непрозрачность

К формам также можно применить вращение.

Графический интерфейс устройств + Информация

WYSIWYG Web Builder использует  GDI+ (Gdiplus.dll)  - графический интерфейс устройств + (Gdiplus.dll) для некоторых из его расширенных графических особенностей, таких как  рисунок строк, многоугольников и кривых.

Если у Вас не будет GDI+ installed, то эти особенности будут заблокированы в приложении.
Но Вы можете легко установить GDI+ installed  на Вашей системе!

Microsoft Windows GDI+ is  -  Графический интерфейс устройств Windows  является "следующим поколением" среда графики, добавляя продвинутые особенности, такие как альфа-плавное сопряжение, затенение градиента, более сложное управление путем, встроенная поддержка современным форматам графических файлов, таких как JPEG и PNG.

GDI+ is включен с Windows XP или выше.
Также доступен бесплатно и без ограничений для Windows NT 4.0 SP6, Windows 2000, Windows 98, и Windows Me.

Подробная информация

Последнее обновление - январь 2024 г.


О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.


Рейтинг@Mail.ru