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

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

Создание панелей навигации
Виды панелей навигации  
   CSS Menu 
   Dropdown 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   
Themeable Menu
Обзор сайта (SiteTree) 
Оглавление
Доступные расширения

Дополнения



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

Для вставки объектов навигации по сайту используйте:
После вставки объекта в окно редактирования дважды  щелкните по нему, чтобы открыть свойства и настройки.

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

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

Улучшено: если выбран объект навигации (строка меню, меню панели и т. д.), кнопка «Ссылка» (Link) откроет свойства объекта.

Новое: Защищенные пункты меню — контроль видимости пунктов меню на основе статуса входа. Подробнее

Выпадающее меню (Dropdown Menu)- новая функция: добавлен пункт «Выпадающее меню» на панели инструментов. Выпадающее меню представляет собой упрощенную версию тематического меню без jQuery. Раскрывающееся меню использует Bootstrap 5 и не зависит от jQuery (в отличие от тематического меню).
Примечание. Тематическое меню (с поддержкой пользовательского интерфейса jQuery) теперь по умолчанию скрыто на панели инструментов, но вы по-прежнему можете получить к нему доступ через меню «Вставка» или вручную добавить его обратно на панель инструментов.

Новое для Navigation (навигация) - Добавлена ​​синхронизация с закладками. Добавлены свойства преобразования текста (прописные, строчные, заглавные буквы). Подробнее


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


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

Новое: Добавлена настройка стилей Границы главного меню для индивидуальных сторон.


Новое: Новая функция: добавлены переходы по ссылкам (основной и вложенные элементы). Это добавляет возможность анимировать фон или границу пунктов меню. Включает в себя 18 эффектов перехода: исчезновение, скольжение, масштабирование, поворот, подчеркивание, наложение и т. д.
Пример CSS меню
- Новая функция: добавлена возможность устанавливать альфа-значение цвета тени.

Новое: Для CSS-меню/текстового меню улучшено: «Интервал» (Spacing) элементов (главного) меню теперь адаптируется, поэтому он может отличаться в точках останова. Это может быть полезно для увеличения интервалов между ссылками на мобильных устройствах (и предотвращения появления предупреждений «Цели касания слишком малы» (Tap targets are too small) в Google Lighthouse).

Новое: добавлен режим размера «пространство между». Расстояние между каждой парой соседних элементов будет одинаковым.


Go Menu  -  Меню переходов


Пример Go Menu

Go Menu создает раскрывающееся меню навигации, где каждый пункт меню соответствует одному URL-адресу или странице на вашем веб-сайте. Когда пользователь нажимает кнопку «Перейти», активируется ссылка выбора.

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

Подробнее о Go Menu

Новое: улучшено: Оптимизирован сгенерированный код для Go Menu. Больше не требует jQuery, теперь используется гибкий бокс для выравнивания, добавлена ​​возможность использовать несколько экземпляров оверлейного меню на странице, добавлено свойство «режим макета», добавлены переходы ссылок и другое.
Подробнее

Новое: Для Go Menu - новая функция: добавлено свойство радиуса границы.


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

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

Новое: - В Мега Меню новая функция: теперь поддерживает иконки шрифтов, это заменяет (фиксированный) набор иконок jQuery UI. Это не только предоставит вам более широкий выбор значков, но также улучшит качество изображений.
- Новая функция: добавлена возможность устанавливать разные иконки для каждой ссылки (вместо одного глобального значка маркера).

Новое: Добавлено свойство «Смещение значка» для пунктов подменю и другое. Подробнее

Новое для Mega Menu (Мега меню) Добавлены свойства подменю «стиль наведения». Добавлен «радиус границы» в свойства кнопок и подменю. Добавлены свойства длительности перехода и замедления. И другое
Подробнее


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

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

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



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


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

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

Новое: Добавлено для Панели меню
- Новая функция: добавлены ссылки переходов. Это добавляет возможность анимировать фон или границу пунктов меню. Включает в себя 18 эффектов перехода: исчезновение, скольжение, масштабирование, поворот, подчеркивание, наложение и т. д.
Пример Панели меню
 - Улучшено: цвет фона панели теперь может быть полупрозрачным (альфа) в режиме наложения.
- Улучшено: добавлена поддержка полупрозрачных (альфа) границ.

Новое: Слой панели (Panel Layer) и меню панели (Panel Menu) - Новая функция: добавлено свойство «позиция» (position) в слой панели. Выбирайте между фиксированным или статическим положением.
Подробнее

Новое для Panel Menu: добавлен тип «Показать» (в дополнение к «наложению» и «нажатию»), добавлен тип «Фиксированный» (в дополнение к «наложением», «нажатию» и «показанию», и другое. Подробнее

Новое для Panel Menu (Меню панели) Добавлена ​​анимация «умножения». Это превращает значок гамбургера в значок «закрыть».
См. также Новое в WYSIWYG Web Builder 19


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

Slide Menu  - Слайд-меню
(Подробнее)

Новое для Slide Menu (Слайд-меню) - скрипт преобразован в стандартный JavaScript (больше не использует jQuery). И другое.
Подробнее

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

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

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



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

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

Новое: Для CSS-меню/текстового меню улучшено: «Интервал» (Spacing) элементов (главного) меню теперь адаптируется, поэтому он может отличаться в точках останова.
Новая функция: добавлено свойство «Полная ширина» (Full Width). Отображение меню на всю ширину в сетках макетов (см. Сайты для разных экранов)


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

Новое: Для Breadcrumb улучшено - добавлена ​​поддержка структурированных данных (schema.org), чтобы поисковые системы лучше понимали структуру навигации Breadcrumb. Подробнее
Улучшено - заполнение разделителя теперь отзывчиво, поэтому оно может отличаться в точках останова.

Новое для Breadcrumb - Улучшено: все свойства стиля теперь также доступны через Инспектора свойств.



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

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

Новое: Responsive Menu - Новые функции: добавлена ​​возможность устанавливать границу (ширину и цвет), добавлено свойство «интервал» (spacing), добавлено свойство «Мобильное выравнивание» ('Mobile alignment), добавлена ​​поддержка CMS.
Подробнее

Новое: Для адаптивного меню новая функция: добавлена ​​опция «Смещение стрелки» (Arrow offset). Это определяет расстояние между текстом и стрелкой (для пункта меню с подуровнями). Также можно установить отрицательное смещение. В этом случае стрелка будет располагаться справа от пункта меню.


Новое: добавлено свойство «Подчеркивание».
См. также Новое в WYSIWYG Web Builder 18


Новое для Responsive Menu (Адаптивное меню)
Добавлено свойство «Смещение значка». Улучшено: скрипт преобразован в стандартный JavaScript (больше не использует jQuery). И другое  Подробнее


ScrollSpy

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



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


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



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



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


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


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


Affix

Новое: Affix (Аффикс - Прикрепление) часто используются с навигационными меню, чтобы сделать их неподвижными в определенной области при прокрутке страницы по вертикали.
Affix доступен для Меню CSS, Navigation Menu, Mega Menu, Slide Menu, Tab Menu, Responsive Menu и Text Menu.
Эта функция работает в сочетании с закладками. поэтому ссылка в вашем меню должна указывать на закладку на текущей странице.
Для выбора этой опции используйте Инспектора свойств



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

Новое для Affix  - Улучшено: скрипт Affix (ранее входивший в состав Bootstrap) был обновлен и больше не использует jQuery. Кроме того, скрипт теперь инициализируется с помощью атрибутов данных вместо JavaScript.



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


Чтобы добавить Ваши собственные изображения кнопки для использования в навигационной панели, разместите их в папке
Мои документы\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)· видимость, положение объекта, размер объекта, семейство шрифтов, размер шрифта.

Новое: Pagination
- Улучшено: использование эллипса ("...") в качестве текста отключит ссылку.
- Новая функция: добавлена возможность отображения эллипсов при синхронизации с менеджером сайта. Установите «Start at» на -1. Видимые элементы указывают, сколько смежных страниц должно отображаться на каждой стороне текущей страницы.

Новое: Меню пагинации (Pagination Menu) - Новые функции: добавлена ​​возможность отображать круглые предметы. Установите радиус границы на 500 и используйте отрицательное значение для правого отступа, чтобы добавить интервал между элементами.

Новое для  Pagination (нумерация страниц) - Улучшено: все свойства стиля теперь также доступны через Инспектор свойств. См. также Новое в WYSIWYG Web Builder 19


Themeable Menu  (Тематическое меню)
 

Этот объект представляет из себя тематическое (многоуровневое) меню с взаимодействием с мышью и клавиатурой для навигации.
Объект основан на виджете меню библиотеки пользовательского интерфейса jQuery: http://jquery.com/
В версии 14 мы также добавлена поддержка меню типа Bootstrap!

Строка меню может быть вертикальной или горизонтальной.
При синхронизации с Менеджером сайта (Site Manager) Web Builder автоматически синхронизирует элементы с содержимым Site Manager.
Так, например, если вы добавляете новую страницу, то элемент автоматически добавляется в строку меню. Или если вы переименуете страницу, текст элемента также будет обновлен.

Стиль - внешний вид тематического меню определяется темой страницы. Вы можете установить тему для всего в Свойствах страницы -> Стиль-> Тема.
Темы можно создавать / редактировать с помощью встроенного диспетчера тем или посетив веб-сайт ThemeRoller: http://jqueryui.com/themeroller/

Меню может быть стандартным, контекстным и Меню Bootstrap (адаптивное меню). Не все свойства можно использовать для всех типов меню.

Новое:
Тематическое меню (Themeable Menu) - Новые функции: добавлено свойство ориентации для управления положением подменю, добавлена ​​возможность показывать подменю при «наведении» вместо «щелчка», добавлено свойство расстояния между кнопками,  добавлена ​​поддержка CMS и другое.
Подробнее

Новое: Для Themeable Menu добавлена ​​поддержка многоуровневых выпадающих меню.
Примечание: используйте только с «нажмите, чтобы открыть» (click to open).
- Новые функции:
- добавлена ​​возможность устанавливать отступы для подэлементов в мобильном режиме.
- добавлена ​​опция «Расстояние между стрелками» (Arrow spacing). Задает расстояние между текстом и стрелкой раскрывающегося списка.
- добавлена ​​опция «Использовать кнопку разделения» (Use Split Button). Сплит-кнопка — это гибрид кнопки и раскрывающегося меню. Это отображает раскрывающееся меню, когда пользователь щелкает стрелку, но также предлагает доступ одним щелчком к выбору по умолчанию, который не требует открытия меню.
Примечание: разделенные кнопки работают только с «нажмите, чтобы открыть подменю» (click to open submenus). Наведение не поддерживается.

Обзор сайта

Обзор сайта (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

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

Новое для дерева сайта (Site Tree)
Улучшено: Дерево сайта теперь использует рендеринг Direct2D вместо MSHTML. Это приводит к более быстрому рендерингу и большему контролю над макетом.
_ адаптивные шрифты.

Новые функции:
- добавлена ​​поддержка заполнения.
-  добавлено свойство «отступ» для установки смещения текстовых элементов.
-  добавлено свойство «полная ширина» для использования с сетками макета.
-  добавлена ​​опция «выравнивание текста».
-  добавлена ​​поддержка пользовательских рамок и изображений рамок.
-  добавлена ​​возможность вращать объект.
-  добавлена ​​возможность установки высоты строки.

Новое для Site Tree / Table of Contents (Дерево сайта / Содержание) - Улучшено: все свойства стиля теперь также доступны через Инспектор свойств. См. также Новое в WYSIWYG Web Builder 19


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

Меню наложения - многоуровневое, полноэкранное меню с применением адаптивного дизайна (т.е предназначенное для экранов разных размеров). Может применяться анимация к меню, поддерживаются значки социальных сетей и множество вариантов стиля оформления меню.

Добавлен новый объект - Меню наложения (Overlay Menu).



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

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





Новое: Overlay Men. Улучшено: цвета кнопки (триггера) теперь чувствительны, поэтому они могут отличаться в точках останова.

Новая функция: добавлена ​​опция «Расширенный» (Expanded). Это позволяет отображать меню полностью развернутым. Например, для отображения дерева наподобие навигации. Когда меню полностью развернуто, основные пункты с подменю также могут иметь ссылки.

Новое для Overlay Menu (Наложение меню) - Добавлено свойство «Размытие». Это добавит фильтр размытия фона к наложенному фону.

Новое для Overlay Menu (Наложение меню) - Добавлено свойство «Позиция всплывающего окна». Добавлена ​​анимация «значка гамбургера». Добавлена ​​возможность скрыть стандартную кнопку «закрыть» полноэкранного меню. Теперь можно открыть меню «Наложение» с помощью события «Показать».   Подробнее


Dropdown Menu (Выпадающее меню)

Новое: добавлен пункт «Выпадающее меню» (Dropdown Menu) на Панели вставок (Toolbox) (вместо Themeable Menu). Подробнее


Новое для Drop Down Menu (Выпадающее меню) - Добавлен режим «переполнения». Бывают случаи, когда в раскрывающемся списке много пунктов меню, и они начинают переноситься (нежелательно) по мере уменьшения ширины страницы.
Подробнее

См. также


Оглавление

Оглавление— это список ссылок, которые ведут к различным разделам страницы. Оглавления особенно полезны для длинных страниц для быстрого перехода к нужному месту на странице.
Для создания оглавления (Table of Contents) используйте  Панель вставок (Toolbox) - раздел Navigation (Навигация) - Table of Contents
См. также Список объектов
Подробнее об оглавлении


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

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

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

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


Рейтинг@Mail.ru