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
Предварительный просмотр
Публикация
Новое в последних версиях
Сотрудничество

Слои

Вставка слоев
Настройки слоев  
Режимы слоев   
Создание адаптивных сайтов с использованием плавающих слоев 
Modal Layer  
Panel Layer
Rollover Layer
Разделители 
Новое в WYSIWYG Web Builder 11  
Новое в WYSIWYG Web Builder 14
Новое в WYSIWYG Web Builder 15
Новое в WYSIWYG Web Builder 17


Слой (Уровень) - контейнер для других объектов.

Вставка слоев

Уровни вставляются на страницу, используя:
Панели вставок - Layer
Лента - вкладка Insert - раздел Other - Advanced - Layer

В авторской справке для работы со слоями применен термин Z-Order, то есть положение слоя по оси Z.

WYSIWYG Web Builder использует CSS.  CSS работает в трех измерениях - высота, ширина и глубина.

В WYSIWYG Web Builder каждый объект (элемент) Вашей web-страницы помещен в отдельный уровень, который позволяет накладываться объектам друг на друга. Обычно это нельзя сделать, используя  стандартный HTML.

Элементы с более высоким z-индексом накладываются на элемент с более низким z-индексом.

Редактор автоматически производит z-индекс для каждого объекта, который Вы добавляете к своей странице. Таким образом у первого элемента будет z-индекс '0', следующий объект '1' и т.д.

Чтобы изменить z-индекс объектов, Вы можете использовать инструменты упорядочения:

Следующие инструменты упорядочения доступны:

Move To Front - Переместите объект на передний план

Move To Back - Переместите объект на задний план

Move object to next position in z-order - Переместите объект на одну позицию вниз

Move object to previous position in z-order - переместите объект на одну позицию вверх

Move Back - Переместите объект в предыдущую позицию в z-заказе


Для перемещения нескольких объектов в "стопке слоев" выделите объекты, после этого в меню Arrange выберите Arrange -> Move to Front (переместить на передний план).

Вы можете также использовать Object Manager (Менеджера Объекта), чтобы продвинуть объект вверх или вниз в z-заказе.

У контекстного меню формы также есть 'Arrange objects' -'опция объектов Упорядочения, которая позволяет Вам перестраивать порядок объектов в форме.

Объекты можно перетаскивать и отпускать на уровне.

Некоторые из достоинств уровней: регулируемая прозрачность, возможность показать/скрыть, точное позиционирование, несколько фоновых повторений и опций выравнивания.


Настройки слоев
  • Прозрачность от  0 до 100%
  • Возможность показать или скрыть уровни (и все их содержавшиеся объекты), используя менеджера уровней или через события.
  • Установите и измерьте уровень относительно
  •  Установите уровень, абсолютный направо и/или граница основания окна браузера
  • Несколько фоновых повторений и опций выравнивания.
  •  Липкий режим уровня, сохраняет уровень видимым всегда.

Opacity - Непрозрачность  - Измените прозрачность уровня от 0 до 100 %
Overflow - Переполнение
  • None - В этом случае размер уровня не может быть меньше, чем содержание
  • Hidden - Скрытое содержание будет отсечено, но браузер не отображает полосу прокрутки, чтобы видеть остальную часть содержания.
  • Scroll -Содержание отсечено, но браузер отображает полосу прокрутки, чтобы видеть остальную часть содержания. Это может быть полезно, чтобы создать прокручиваемое содержание без потребности в Рамке (Inline Frame)
  • Auto - если содержание отсечено, браузер отобразит полосу прокрутки, чтобы видеть остальную часть содержания.

Примечание:
Чтобы создать/обновить содержание уровня, Вы должны изменить размеры этого в проектировщике, таким образом все объекты будут видимы.
После того, как Вы создали/обновили размещение, Вы можете изменить размеры уровня к желательному размеру.
Вы не можете прокрутить содержание уровня в Web Builder.


Режимы слоев -  Layer Mode


У слоев (уровней) есть несколько режимов:

Default mode
- режим по умолчанию. В режиме Default уровень будет установлен в местоположение, куда Вы поместили его

Sticky Layer Mode
- режим прилипания. Режим Sticky Layer сохраняет уровень видимым всегда. Это может быть полезно, если, например, Вы хотите сохранить меню видимым, даже если страница прокручивается.

Новое для Sticky Layer (Липкие слои) - Добавлено свойство «z-index» в липкий слой. Это позволяет перезаписать автоматически сгенерированный z-индекс. Например, если вы хотите, чтобы липкий слой находился поверх всего остального. Оставьте поле пустым для поведения по умолчанию.

Header/Footer mode
- режим верхнего и нижнего колонтитула.
Режим Header/Footer может быть полезным, если Вы используете уровень как заголовок или нижний колонтитул для Вашей страницы обычно в комбинации с опцией ''relative horizontal resizing'.
Обычно эта опция (и другие относительные опции) добавят код "after the <body>" - после тега<body> (см. Вставка кода), приводящий к более высокому z-индексу.
Выбор режима 'Header/Footer' вставит код перед тегом <body>, таким образом уровень будет позади всего другого содержания.
Есть также режим уровня   Docking layer, который позволяет Вам состыковывать уровень с определенной стороной экрана или разместить в центре экрана. Главное различие между этим режимом и липким режимом уровня - то, что режим стыковки уровня не использует JavaScript, вместо этого используется CSS. Этот режим может также быть полезным для верхних  и нижних колонтитулов.

С  Anchored Layer  (Поставленным на якорь Уровнем) Вы можете поставить на якорь одну или более сторон уровня к сторонам страницы.
Например, если Вы допустите  'Anchor Left' или 'Anchor Right', то уровень будет простираться, если Вы измените размеры окна браузера (при смещении левая  и правая границы страницы останется тем же самым).

Но Вы можете также поставить на якорь только одну границу (или все).


Разделители (Dividers)

Разделители фигур (Shape Dividers) — это фигуры на основе SVG, которые можно использовать для разделения разделов страницы.
Вы можете выбирать из более чем 30 форм разделителей, но вы также можете добавлять файлы SVG пользовательских форм.

Разделитель доступен в слоях, Сетках расположения и Flexbox. (см. Сайты для разных экранов)
Разделители фигур представляют собой файлы SVG и хранятся в подпапке «разделители» системной папки. Обычно это C:\Users\Имя пользователя\Documents\WYSIWYG Web Builder\system\dividers.

Разделители могут быть добавлены вверху или внизу (или в обоих местах) слоя.

Из настроек - Orientation определяет, какая сторона редактируется в данный момент, цвет фигуры. ширина, высота. Фигуры можно переворачивать по горизонтали/вертикали. Это позволяет использовать формы, предназначенные для использования сверху, а также снизу (отразить по вертикали).
«Смещение» (offset) используется для перемещения разделителя в центр (50%) контейнера (или куда-либо еще).
Адаптивные свойства - видимость, положение объекта, размер объекта, фон, цвет границы, радиус границы, тень.
См. также:


Panel Layer

Panel Layer (Слой панели) изначально невидим, но может перемещаться с правой или левой стороны страницы с помощью Событий (показать/скрыть). Также возможно вызвать панель через Panel Menu (Меню панели).
Отображение определяет связь панели с содержимым страницы. «Push» передвигает страницу, а «overlay» отображает слой поверх содержимого. В режиме Fixed (Фиксированный слой панели всегда будет виден (только слева и справа).
Dismissible: указывает, можно ли закрыть панель, щелкнув ее снаружи.
Точка останова: если область просмотра меньше указанного значения точки останова, слой панели станет полной ширины.

Новое для Panel Layer - Добавлен «фиксированный» режим отображения для слоя панели. В фиксированном режиме слой панели всегда будет виден.

Новые функции:
- добавлена ​​поддержка вертикальных разделителей формы Shape Dividers. Это позволяет добавлять разделитель слева или справа от слоя, сетки макета и т. д.
- добавлена ​​опция «смещение». Полезно для перемещения разделителя в центр (50%) контейнера.

Контейнер Flex (Flex container)

Dialog / Modal Layer
Диалоговый/модальный слой
- Новая функция: добавлена ​​возможность установить тег заголовка для заголовка диалога (применимо только к Bootstrap). Раньше для тега title было установлено значение <h4>, но теперь вы можете управлять им самостоятельно. Это может быть полезно для оптимизации заголовка вашего веб-сайта и/или улучшения показателей скорости света.


Создание адаптивных сайтов с использованием плавающих слоев

Объект Layer (слой) в WYSIWYG Web Builder является очень мощной функцией для продвинутых веб-макетов, и может быть использован для многих различных типов макета.
В WYSIWYG Web Builder  9 введено понятие "плавающих слоев". Такие слои могут использоваться для создания "отзывчивых" макетов, т.е. такие макеты будет автоматически адаптироваться на основе доступного размера экрана (например - на экранах мобильных телефонов).

Floating Layer - Плавающий режим слоя для расширенного использования. Это сделает уровень плавающим вместо того, чтобы иметь неподвижную позицию. Если многократные плавающие уровни будут помещены на страницу, то они будут размещены друг рядом с другом (слева направо) в зависимости от доступного места экрана.

Режим плавающего слоя сделает слой "плавающим" вместо фиксированного положения. Если на странице размещено несколько плавающих слоев, то они будут располагаться рядом друг с другом (слева направо) в зависимости от доступного места на экране. Если слой не умещается в текущей строке, то он будет перенесен в следующую строку.
Подробнее (англ. язык)
Пример веб-страницы для экранов разных размеров (измените ширину окна браузера)

См. также Сайты для разных экранов).

Режим опции Floating может использоваться, чтобы управлять плавающими уровнями

Default -  уровень будет установлен к правой стороне предыдущего плавающего объекта (или при переполнении строки объект будет перемещен в следующую строку)
Clear Left - Левый уровень будет перемещен к следующей строке.
Full Width - уровень будет использовать полную ширину (100 %) страницы. Никакие другие объекты не могут быть на той же самой строке. Этот режим может быть полезным для заголовков или нижних колонтитулов.
Modal Layer - установит уровень на самый верх стопки уровней. Другие элементы на странице будут заблокированы, пока Вы не закроете уровень. В основном это преобразует уровень в диалог jQuery Диалог, но без theming.
Panel Layer - Уровень Панели. Первоначально невидим, но может скользить от правой или левой стороны страницы при использовании события (показать/скрыть).
Display - определяет отношения панели к содержанию страницы.

Default Mode Relative horizontal position - Похож на режим Default.
Вместо того, чтобы использовать абсолютные координаты, позиция уровня теперь будет относительно ширины страницы.
Это свойство только имеет эффект, когда страница отображена в браузере!
Relative vertical position -Относительная вертикальная позиция
Вместо того, чтобы использовать абсолютные координаты, позиция уровня теперь будет относительно высоты страницы.
Это свойство только имеет эффект, когда страница отображена в браузере!
Relative horizontal sizing -  Вместо того, чтобы использовать абсолютные измерения, ширина уровня теперь будет относительно ширины страницы.
Это свойство только имеет эффект, когда страница отображена в браузере!
Relative vertical sizing -Относительное вертикальное установление размеров
Вместо того, чтобы использовать абсолютные измерения, высота уровня теперь будет относительно высоты страницы.
Это свойство только имеет эффект, когда страница отображена в браузере! Right - Устанавливает позицию объекта относительно правого края страницы. Это заменит 'левый' признак. Bottom - Основание
Устанавливает позицию основания объекта относительно основания страницы.
  • Left -  содержание будет выровненно по левой границе (значение по умолчанию).
  • Center - содержание будет расположено по центру
  • Right - содержание будет выровнено по правому краю.
  • Stretch content - размер объектов основан на размере окна браузера.

Примечания о  Stretch content:
Эта функция была прежде всего создана, чтобы использоваться для верхнего и нижнего колонтитулов, которые должны занимать всю ширину окна браузера.
Но эта опция будет только работать также с такими объектами, как   изображения, формы, текст, и не будет работать с расширенными объектами, такими как меню, расширения, блог, галереи и т.д. Эти объекты не могут быть растянуты на всю ширину окна браузера.
Растяжение изображений может снизить качество изображений.
Sticky Mode - Режим прилипания
Orientation - Ориентация - Определяет, какой стороны окна браузера будет 'придерживаться' уровень.
Вы можете использовать значения смещения, чтобы установить горизонтальное и вертикальное смещение от границ.
Значение Delay определяет задержку мультипликации.
Связанная обучающая программа:
http://www.wysiwygwebbuilder.com/using_layers.html


Новое в WYSIWYG Web Builder 11

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

Липкий слой теперь использует Affix.

Добавленная функция 'Box Sizing', которая используется, чтобы сказать браузеру, что должны включать свойства калибровки (ширина и высота). Выбор  'Box Sizing' особенно полезен для полных слоев ширины, где Вы обычно хотите границу в области видимости (viewport). С  'Box Sizing' размер границы будет добавлен к полной ширине (будет более 100 %).


 

Добавлена опция 'Enable form'  (Позволить форму) - этот выбор преобразует слой в форму.
 
Добавлена опция 'Enable backdrop' (Позволить фон)

Добавлена опция 'Close on escape' для Модального (плавающего) слоя. Слой исчезает при щелчке вне слоя (посмотреть пример модального слоя). Определяет, закроет ли нажим клавиши 'esc' модальный слой.

Добавлена опция 'Display close button' (Показать кнопку закрытия)

Добавлен выбор 'Animation' ('Мультипликации') для Модального Слоя. Определяет, используется ли мультипликация, чтобы показать/скрыть модальный слой

Добавлен способ Full Screen (‘Полный Экран’). Это установит ширину/высоту слоя к 100 % представления.

И другое

Посмотреть пример
Обучение


Modal Layer

Режим  слоя Modal Layer расположит слой поверх всего на странице. Другие элементы на странице будут отключены, пока вы не закроете этот слой.

Enable background -  указывает, включено ли наложение фона.
Close on escape - указывает, будет ли нажатие клавиши 'esc' закрывать модальный слой.

Модальный тип jQuery UI (как и в предыдущей версии WWB) или Bootstrap. В отличие от опции jQuery UI Bootstrap является отзывчивым, так что слой может иметь различный размер в контрольных точках (точках останова).
Также Bootstrap использует заголовок слоя в заголовке.

Слой панели изначально невидим, но может скользить с правой или левой стороны страницы с помощью событий (Показать / Скрыть).

Display, определяет отношение панели к содержимому страницы. "Push" толкает страницу и "overlay" отображать слой над содержанием.
Dismissible указывает, можно ли закрыть панель, щелкнув снаружи на странице.

Точка останова, когда видовой экран меньше заданного значения точки останова, слой панели становится полной шириной.
Связанные онлайн учебник:
http://www.wysiwygwebbuilder.com/floating_layers.html

Новое в Диалоговом/модальном слое (Dialog / Modal Layer) - добавлена ​​возможность установить тег заголовка для заголовка диалога (применимо только к Bootstrap). Раньше для тега title было установлено значение <h4>, но теперь вы можете управлять им самостоятельно. Это может быть полезно для оптимизации заголовка вашего веб-сайта и/или улучшения показателей скорости света.


Rollover Layer

Rollover Layer работает так же, как и Rollover Image, но вместо изображений теперь можно использовать объекты любого типа. В дополнение к фиксированному режиму (где вы можете разместить объект в любом месте), объект также поддерживает плавающий режим, поэтому его можно использовать в  Layout grids (Сетках расположения).

Новое в WYSIWYG Web Builder 12

Улучшено: поля плавающих слоев теперь реагируют (responsive), поэтому они могут иметь разные значения в точках останова (в Контрольных точках).
-  добавлена опция ‘Position children’ ("положение детей"). По умолчанию дочерние элементы слоя используют абсолютные позиции, поэтому их можно разместить в любом месте. При использовании плавающего режима 'floating' объекты внутри слоя будут плавать вместо фиксированного положения. Это может быть полезно при использовании плавающих слоев, для которых задан 'Relative horizontal sizing' ("относительный горизонтальный размер"), для создания жидких макетов.
- добавлена функция "100vh" в опции плавающего режима. При этом высота слоя будет равна 100% видового экрана. Это может быть полезно для создания плавающих слоев с относительным горизонтальным размером. Например, для создания столбцов полной высоты. 
- добавлена опция наложения фона. При этом используется указанный цвет фона (и Альфа-значение) для добавления и наложения на фоновое изображение.
- добавлена возможность использовать видео в качестве фона. Поддерживаются URL-адреса Youtube и Vimeo. Это особенно полезно для полной ширины/полноэкранных слоев.
- Новая функция: добавлена возможность выбора семантического тега HTML5 вместо универсального < div>. Доступные параметры: <article> (<статья>), <aside>, <footer> (<нижний колонтитул>), <header> (<заголовок>), <nav> (<навигация>), <section> (<раздел>).

В WYSIWYG Web Builder  14 Новая функция: добавлено свойство breakpoint ("точка останова" или Контрольная точка) для слоя панели. Если область видимости меньше заданного значения точки останова, слой панели будет иметь полную ширину.

В WYSIWYG Web Builder  15 - Новая функция: добавлена поддержка «перетаскивания» для реорганизации плавающих элементов. Теперь вы можете перетаскивать плавающий слой (сетка макета / flexbox) до или после другого плавающего объекта.

- Новая функция: добавлен режим Lightbox («лайтбокс»). Это позволяет отображать содержимое слоя в лайтбоксе. Лайтбокс может быть открыт / закрыт через события (показать / скрыть). Поддерживаемые лайтбоксы: fancybox, magnificpopup, colorbox, lightcase, prettyphoto, swipebox, tosrus, venobox.
Посмотреть пример

Новое для Слой (Layer)  - добавлены параметры плавающего режима,  добавлено вертикальное выравнивание для плавающих макетов, добавлена ​​возможность устанавливать отступы и другое.
Подробнее 

См. также:
Параллакс
Работа со слоями и пр. (видео)
Наложение фонового заполнения (видео)
Всплывающее окно (Лайтбокс)


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

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


Рейтинг@Mail.ru