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
Слайды
Фотоколлаж
Фотогалерея
Аккордеон
Таблицы
Ссылки
Закладки (якоря)
Рамка (Inline Frame)
Lightbox (Лайтбокс)
Мультипликация Flash
Мультипликация GIF
Мультипликация CSS 3
Объекты рисунка
Панели навигации
HTML5
YouTube  
Блог
Статья
Карусель
Держатель места
Рассылка новостей
Лента новостей
Поиск на сайте
Таймер
Верхний колонтитул
Нижний колонтитул
Java Scripts
Java апплеты
Примечания
Информационные бюллетени
RSS Feed (RSS-канал)
Structured Data
Блоки объектов
Объекты jQuery
ThemeRoller
Вставка кода
Embedded Page
Reusable objects
Веб-формы
Card
Flexbox
Wizard
Flex Grid (сетка)
Объекты Media
Объекты администрирования
Объекты страниц коммерции
Значок (Favorites Icon)
И другие объекты

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

Панели навигации

Создание панелей навигации
Виды панелей навигации  
   CSS Menu 
   Go Menu
   Mega Menu
   Menu Bar
   Navigation Bar
   Panel Menu
   Site Tree
   Slide Menu
   Tab Menu
   Text Menu
   jQuery Menu (Themeable Menu)
   Layer Menu
   Pagination
   Меню Breadcrumb
   Responsive Menu
   Overlay Menu    
Обзор сайта (SiteTree)  

Дополнения



Создание панелей навигации

Для вставки объектов навигации по сайту используйте:

Редактор WYSIWYG Web Builder предлагает навигационные панели (меню) нескольких типов:

Виды панелей навигации


CSS Menu  -  Меню CSS (Подробнее)

В  WYSIWYG Web Builder 14 добавлена настройка стилей Границы главного меню для индивидуальных сторон.


Go Menu  -  Меню переходов 
(Подробнее)


Mega Menu  -  Мега -меню
(Подробнее)

В  WYSIWYG Web Builder 14 добавлено:
- добавлен отзывчивый способ. Когда Когда видимая область (viewport) станет меньшим чем указанное значение Контрольной точки, Мега Меню покажет изображение гамбургера (), чтобы вызвать полное меню экрана.
- добавлена настройка 'Выравнивание' ('Alignment' ). Это добавляет возможность выровнять кнопку внутри контейнера меню.
- добавлено свойство sub (под-меню) 'Alignment' меню. Определяет выравнивание текста в sub меню.
- добавлено свойство sub (под-меню)'Orientation' меню. Указывает ориентацию подменю относительно кнопки.


Menu Bar  -  Строка меню (Подробнее)

Примечание: в версии в WYSIWYG Web Builder 11 создание MenuBar изменено - больше не используются 'установленные' темы. Теперь меню полностью настраивается с помощью редактора меню. Есть более чем 50 доступных шаблонов.

Чтобы создать Вашу собственную тему для строки меню, Вы можете использовать ThemeStudio.
Темы должны быть скопированными в папку Мои документы\WYSIWYG Web Builder\system\menubar\



Navigation Bar  -  Меню навигации  (Подробнее)


Panel Menu - Панель меню  (Подробнее)

В  WYSIWYG Web Builder 14 добавлено:
- Добавлен отзывчивый способ. Когда видимая область (viewport) станет меньшим чем указанное значение Контрольной точки, Panel Menu переключится на полный способ экрана (с  кнопкой "close"- Закрыть).
- добавлен "мультипликация гамбургера" ('hamburger animations') -  12 различных мультипликаций доступны.
- добавлена возможность добавить текст нижнего колонтитула (Например, чтобы добавить сообщение авторского права в нижней части меню).
- добавлена возможность добавить эмблему (логотип) к меню.
- добавлено заполнение меню. Это устанавливает отступ вокруг всего меню (Added) и дополнение (padding) вокруг всего меню.
- добавлена поддержка "социальных иконок" ('Social Icons'). Чтобы добавить социальную иконку, установите пункт меню и оставьте поле "текст" (область ('text' )  пустым.
- добавлена поддержка пазделителей (сепараторов).


Site Tree  -  Обзор сайта 
(Подробнее)

Slide Menu  - Меню-аккордеон
(Подробнее)

Tab Menu  -  Меню вкладок  (Подробнее)

В  WYSIWYG Web Builder 14 добавлена возможность создания меню вкладок с использованием адаптивного дизайна (см. Создание сайта для разных экранов).  Когда область обзора страницы (viewport) становится меньше заданного значения Контрольной точки, Меню вкладок (Tab Menu) переключится на режим stacked - сложенный (вертикальный) способ (меню из горизонтального преобразуется в вертикальное). Таким образом меню может использоваться на экранах меньшего размера.

Темы для Tabmenu сохранены
в папке Мои документы\WYSIWYG Web Builder\system\tabmenu\



Text Menu  -  Текстовое меню
 (Подробнее)

В  WYSIWYG Web Builder 14 добавлена возможность создания меню вкладок с использованием адаптивного дизайна (см. Создание сайта для разных экранов). Это работает в комбинации с расположением (Layout ->Type -> Responsive). Когда область обзора страницы (viewport) станет меньшим чем указанное значение Контрольной точки, Текстовое Меню переключится с горизонтального на вертикальное.


jQuery Menu
(Themeable Menu) - Многоуровневое меню - в WYSIWYG Web Builder 9 и 10
Подробнее


Layer Menu
(Меню слоев) - Новое в WYSIWYG Web Builder 11. 

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

Меню может применяться при создании сайтов для экранов разных размеров, к отзывчивым свойствам относятся visibility · видимость, object position · положение объекта, object size · размер объекта, font-family · семейство шрифтов, font-size · размер шрифта, layer sizes - размеры слоев, colors · цвет и border radius · радиус границы.
Подробнее


Меню Breadcrumb
- Новое в WYSIWYG Web Builder 11.

Меню отражает положение текущей страницы в иерархии страниц. Обычно первый пункт меню - главная страница, далее следуют страницы 2-го, 3-го и т.д. уровней.
Пример меню Breadcrumb - на этой странице (вверху).
Вы можете или вручную формировать все связи для меню или автоматически синхронизировать с Менеджером сайта. Так, если, например, вы добавляете новую страницу, то кнопка автоматически добавляется в меню. Или, если вы переименуете страницу, текст элемента также будет обновлен.
Опция "Synchronize with another menu" (Синхронизация с другим меню)
 синхронизирует ссылки меню с указанным меню. Это может быть полезно при наличии нескольких меню на странице (например меню рабочего стола и мобильного устройства). В этом случае вам придется изменить ссылку(ы) только один раз.
Также поддерживаются изображения FontAwesome.
Опция "Level" указывает, какой уровень менеджера сайта будет использоваться для создания кнопок.
Опция "Target" указывает целевое окно ссылок, если включена синхронизация с диспетчером сайтов.
Опция "Icon Font Library" указывает, следует ли использовать значки   FontAwesome  или значки материалов (Material Icons) в элементах меню.
"Use this menu for CMS" - Включите эту опцию, чтобы использовать меню с инструментами CMS. Вместо статического меню ссылки будут динамически генерироваться на основе базы данных CMS. Обратите внимание, что это работает только когда страница была опубликована!
Отзывчивые свойства - visibility (видимость), object position  (положение объекта), object size (размер объекта), font-family (семейство шрифтов), font-size (размер шрифта).
Дополнительные сведения о: отзывчивые свойства
Пример меню Breadcrumb


Responsive Menu - Новое в WYSIWYG Web Builder 11.

Responsive Menu ('Отзывчивое Меню') -  многоуровневое меню, оптимизированное для настольных компьютеров и мобильных устройств. Используется только CSS (без JavaScript!). На настольном компьютере меню имеет стандартный вид (раскрывающееся меню), а на мобильных устройствах будет показано как многоуровневое сложенное меню с общим изображением 'гамбургера' (т.е. горизонтальное меню преобразуется в вертикальное).
Пример веб-страницы с Responsive Menu (измените ширину окна браузера).
Меню поддерживает изображения FontAwesome, ScrollSpy и Affix.
Подробнее


ScrollSpy

ScrollSpy - Новое в WYSIWYG Web Builder 11.
Предствляет из себя навигационный механизм, который автоматически выдвигает на первый план навигационные кнопки, основанные на положении прокрутки страницы, чтобы указать посетителю, где он в настоящее время находится на странице. Эта особенность работает в комбинации с закладками.
Выделите меню, используйте Инспектора свойств
ScrollSpy может применяться для Меню CSS, Navigation Menu, Мега-меню, Меню-аккордеона (Slide Menu), Меню вкладок (Tab Menu), панели меню (Panel Menu), Отзывчивого меню (Responsive Menu) и текстового меню (Text Menu).



Подробнее о ScrollSpy
Об установке закладок
Посмотреть пример (прокрутите страницу по вертикали)


Новое в WYSIWYG Web Builder 11

Добавлена опция в Инспекторе свойств 'Click to open submenus', которая определяет, должен ли пользователь щелкнуть, чтобы открыть под-меню, вместо простого наведения курсора на меню (hover/mouseover). Выбор этой опции рекомендуется для устройств сенсорного экрана, где нет никакой мыши (таким образом меню не будет открываться при наведении курсора).



 - Новая особенность: цвет границы и ее толщина могут теперь быть установлены для разных состояний кнопки (нормального, при наведении курсора)
-  Добавлена поддержка градиентам (gradients) и образцам фона - pattern



- Новая особенность: Добавлены края слева и справа для главного меню и в под-меню Это позволяет дать этим краям свой стиль.
- Новая особенность: на краю пункта может быть установлен значок, который показывает, что у пункта есть sub-пункты. Это обычно - 'стрелка', но Вы можете использовать любую из встроенных графических форм.
(дважды щелкните по вставленному меню и используйте Свойства меню).


- Новая особенность: Добавлен стиль границы для пунктов. Включайте специальный стиль 'separator only', при котором пункты отделяются друг от друга одинаковой линией.
- новая особенность - добавлена возможность создать тень для под-пунктов
- новая особенность - у под-пунктов теперь может быть различный шрифт текста
- Новая особенность: Можно выбрать разный символ для горизонтального сепаратора.


- Новая особенность: Добавлена возможность установить изображения FontAwesome как изображение кнопки.
- Новая особенность: Добавлен выбор (цвет и непрозрачность) - исчезает фон страницы, когда меню является активным.


Affix

Affix - Новое в WYSIWYG Web Builder 11.
Affix часто используются с навигационными меню, чтобы сделать их неподвижными в определенной области при прокрутке страницы по вертикали.
Affix доступен для Меню CSS, Navigation Menu, Mega Menu, Slide Menu, Tab Menu, Responsive Menu и Text Menu.
Для выбора этой опции используйте Инспектора свойств



Подробнее об Affix
Посмотреть пример применения Affix (прокрутите страницу)
 
Хотя Affix и ScrollSpy - две отдельных особенности, они часто используются вместе.


Собственные кнопки для навигационных панелей


Чтобы добавить Ваши собственные изображения кнопки для использования в навигационной панели, разместите их в папке
Мои документы\WYSIWYG Web Builder\system\navbar.
Собственные стили оформления меню

Чтобы создать Вашу собственную тему для строки меню, Вы можете использовать ThemeStudio.
Свою тему Вы можете поместить в папку My Documents\WYSIWYG Web Builder\system\menubar\

Кроме вариантов навигационных меню, которые идут с редактором,, с сайта программы можно загрузить расширения для создания меню навигации, например CSS3 Animation Menu
Страница загрузки

CSS3 Animation Menu - экспериментальное меню, которое отображает большие кнопки меню с изображением, заголовком и описанием. Все элементы могут быть анимированы. Меню использует мультипликации CSS3 (не используется  JavaScript).

Примечание: Расширения доступны только для зарегистрированных пользователей


Pagination (Нумерация страниц)

Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить объект пагинации для облегчения навигации.

Используйте Панель вставок (Toolbox) -раздел NavigationPagination
Из настроек:
Опция "Synchronize with Site manager" (Синхронизация с диспетчером сайтов)
Автоматически генерирует ссылки с автоматической нумерацией и кнопками next / previous. Всегда синхронизируется с текущим уровнем.
Опция "Leave label text empty to remove the button" (Оставьте текст метки пустым, чтобы удалить кнопку).
Это меню также работает с системой управления контентом.
"CMS" - Включите эту опцию, чтобы использовать меню с инструментами CMS. Вместо статического меню ссылки будут динамически генерироваться на основе базы данных CMS.
Обратите внимание, что это работает только когда страница была опубликована.
Отзывчивые свойства (Responsive Properties)· видимость, положение объекта, размер объекта, семейство шрифтов, размер шрифта.

Обзор сайта

Обзор сайта (SiteTree) может отобразить краткий обзор Вашего вебсайта и также относится к объектам навигации.

Примечание: Не путайте этот объект с Картой сайта, которая предназначена для поисковых серверов!

SiteTree отобразит все страницы Вашего вебсайта. Используя обзор сайта, посетители могут быстро найти нужную им веб-страницу.

Для создания обзора сайта используйте:

Вы можете исключить страницы из обзора, выбрав опцию  'Don't Synchronize this Page in Navigation Objects.'

У обзора сайта есть 3 стиля:

Alphabetical - Отображает алфавитный список всех страниц Вашего вебсайта.

Category - Категория - все страницы Вашего вебсайта сгруппированы по категориям.

Для этого стиля Вы должны сначала назначить одну или более категорий на страницу. Вы можете это сделать или  в Свойствах страницы  (Page Properties), или в General Properties (Общих Свойствах SiteTree) непосредственно.

Treeview - Отображение всех страниц Вашего вебсайта в представлении дерева, основанном на структуре сайта в Site Manager - Менеджере сайта.

В Общих свойствах этого объекта Вы можете быстро обновить название (то же самое как название меню в Свойствах страницы, описание страницы (Описание в мета- тэгах) и категории.

Вы можете назначить одну или более категорий на страницу (разделяя их запятой).

Отзывчивые свойства Обзора сайта (Responsive Properties)
visibility, object position, object size, font-family, font-size, background.
См. Сайты для разных экранов.


Кроме того, для навигации по сайту можно использовать и некоторые другие объекты (например такие объекты jQuery, как Аккордеон или jQuery Tabs) - см. Объекты jQuery


Новое в WYSIWYG Web Builder 12

При создании меню  добавлена возможность установить выравнивание меню.

Добавлено свойство ‘Ширина’ (Full Width), так что меню может быть растянуто на всю ширину контейнера (при использовании в сетке).

Улучшено: CSS3 переходы, которые применяются к пунктам меню (вместо контейнера). Например, поворот, масштабирование или изменение стиля элемента при наведении курсора.


Меню наложения (Overlay Menu)

В  WYSIWYG Web Builder 14 добавлен новый объект - Меню наложения (Overlay Menu).
Меню наложения - многоуровневое, полноэкранное меню с применением адаптивного дизайна (т.е предназначенное для экранов разных размеров). Может применяться анимация к меню, поддерживаются значки социальных сетей и множество вариантов стиля оформления меню.


Чтобы добавить значки социальных сетей, нужно  оставить поле "текст" пустым и выбрать значок. Это создаст социальную иконку в нижней части меню вместо стандартного пункта меню.

Для вставки Overlay Menu используйте Панель вставок (Toolbox) - раздел Navigation - Overlay Menu.







Новое в WYSIWYG Web Builder 14

Помимо дополнительных настроек к разным панелям навигации в версии 14 имеются следующие изменения и дополнения:
- Вы можете теперь использовать тег <br> в тексте меню, что позволяет создавать многострочный текст. Отметьте, что это главным образом полезно для пунктов меню, у которых нет под-меню того же самого размера
- добавлен выбор 'синхронизировать с другим меню" (Synchronize with another menu). Включение этой опции синхронизирует ссылки меню с указанным меню, это может быть полезно при наличии нескольких меню на странице (например, меню рабочего стола и мобильного телефона). Так вам придется изменить ссылку(ы) только один раз.
- добавлен выбор "Не переходить по этой ссылке" для ссылок - (links)  ('Do not follow this link' ). При этом выборе добавляется 'rel=nofollow', чтобы предотвратить переход по ссылке для роботов/поисковых систем.


Доступные расширения:

Shiny Button
Это расширение имитирует "блестящую" стеклянную кнопку и использует чистый CSS3.
См. Shiny Button

Glass Button
Это расширение дает пользователям WYSIWYG Web Builder простой способ добавить модные стеклянные кнопки на свой сайт.
См. Glass Button

CSS3 Animation  Menu
Экспериментальное меню для отображения больших кнопок меню с изображением, названием и описанием с анимацией.
См. CSS3 Animation  Menu

Responsive Drop Down Menu
Отзывчивое многоуровневое меню, оптимизированное для настольных компьютеров и мобильных (сенсорных) устройств.
См. Responsive Drop Down Menu

Slim Menu
Это плагин jQuery для создания отзывчивых и многоуровневых меню навигации на лету.
См. Slim Menu

Horizontal Drop Down Menu  (Горизонтальное раскрывающееся меню)
Это отзывчивое меню использует всю ширину окна браузера и имеет 2 точки останова для переключения между горизонтальной и вертикальной компоновкой.
См. Horizontal Drop Down Menu

Full  Screen Menu (Полноэкранное Меню)
Это отзывчивое меню, которое занимает весь экран при расширении.
См. Full  Screen Menu

Bootstrap Menu 
Реализует многоуровневое, отзывчивое меню, оптимизированное для настольных компьютеров и мобильных (сенсорных) устройств.
См. Bootstrap Menu

AllWebMenus (устаревшее)
Расширение AllWebMenus обеспечивает простой способ интеграции AllwebMenus Likno в ваши страницы и имеет доступ к сотням интересных дизайнов меню.
См. AllWebMenus

Accordion Menu
Это расширение реализует простой в использовании аккордеон меню навигации. 
См. Accordion Menu

TreeMenu
Расширение TreeMenu отображает список ссылок в древовидном формате. 
См. TreeMenu

JSCookTree Menu
JSCookTree является мощным скриптом меню с поддержкой темы, написанной на JavaScript, созданный Хэн Юань.
См. JSCookTree Menu

Последнее обновление: сентябрь 2018 г

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


Рейтинг@Mail.ru