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

Настройки WYSIWYG Web Builder

General - Основные настройки 
HTML 
Fonts (Шрифты)  
Files & Folders (Файлы & Папки)  
Publish & Preview (Публикация & Предварительный просмотр)
Miscellaneous - Разное  
Backups  
User Interface (настройки интерфейса)  
Grid and Guides (Сетка и направляющие) 
Extension (Расширения)  
Ecommerce (Электронная торговля) 


Введение

Для настройки программы используйте
  • меню Tools - Options
  • Ленту - вкладку Tools - раздел Application - Options



WYSIWYG Web Builder сохраняет пользовательские настройки в папке
My Documents\WYSIWYG Web Builder\system\

Например. если Вы измените стили градиента, используя Менеджера стиля  (Style manager), то изменения будут сохранены в папке
My Documents\WYSIWYG Web Builder\system\gradients.dat
Параметры настройки публикации будут сохранены в файле My Documents\WYSIWYG Web Builder\system\publish.dat

Примечание: Настройки редактора и Свойства сайта (Site Properties) содержат много схожих настроек, но их не нужно путать.

Программа настроена по умолчанию.
Пожалуйста, не изменяйте ни один из вариантов настроекr, если вы не знаете, что вы делаете. Эти параметры влияют на поведение приложения и создаваемый HTML-код.
Вы можете использовать кнопку  'Reset Settings' ("Сброс настроек"), чтобы восстановить настройки по умолчанию.


General - Основные настройки

Create blank document at startup - Создайте пустой документ при запуске

Application window maximized at startup - Прикладное окно развернуто при запуске.

Open the most recent used file at startup - Откройте новый используемый файл при запуске

Locked objects can not be moved or resized, but you can still edit their properties - Блокированные объекты не могут быть перемещены или изменены, но Вы можете все еще редактировать их свойства.

Determine Flash Movie size by finding the largest frame - Определите размер Кино Вспышки, находя наибольшую рамку

Use high quality rotation for images - Используйте высококачественное вращение для изображений.

Check for updates online at startup - Проверьте обновления онлайн при запуске.

(Вы можете также проверить обновления в меню Помощи: Menu->Help->Check for updates online).

Show page extensions in Site Manager - Отображение расширения страницы в Менеджере Сайта.

     TextBox

Initial Text - Начальный Текст: Дважды щелкните, чтобы редактировать

Новое в WYSIWYG Web Builder 15
В разделе General добавлены новые настройки:

Новая функция: добавлена ​​опция «Открыть самую последнюю использованную страницу проекта». При загрузке проекта откроется страница, которая была активной при последнем сохранении проекта.

- Новая функция: добавлена ​​опция для включения / выключения функциональности ctrl + click + drag (дублировать объекты).

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

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

- Новая функция: добавлена ​​тема Visual Studio 2019 Light Blue.
 
- Новая функция: добавлено окно подтверждения для «Простого режима».

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

- Новая функция: добавлена ​​опция AutoSave (Автосохранение). Это автоматически сохраняет активный проект с указанным интервалом.


HTML

Preload images used by javascripts - Выбор этой опции предварительно загрузит все изображения страниц, используемых javascript (как navigationbar и демонстрация слайдов), когда страница будет загружена.

Generate external CSS style sheets for page specific styles - Дайте возможность этой опции произвести отдельный файл CSS со стилями, используемыми страницей.
Действующие стили не будут частью листа стиля! Поэтому для лучших результатов Ваши объекты должны использовать стили, созданные в Style Manager - Менеджер стиля.

Примечание:
Вы должны будете перезапустить приложение прежде, чем расширения страницы будут отображены!

Generate single CSS style sheet for global styles - Дайте возможность этой опции произвести единственный файл CSS со всеми стилями, созданными в  Site Manager - Менеджере Сайта. Все страницы обратятся к этому файлу.

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

Generate external JavaScript file for common code - Произведите внешний файл JavaScript для общего кода.

Дайте возможность этой опции поместить весь общий код javascript, произведенный Составителем программы Сети во внешнем javascript файле (wwb6.js).

Использование @font-face для non-websafe шрифтов.

Если Вы допустите эту опцию, то Вы сможете использовать любой тип шрифта, даже если это не будет сейф сети при использовании новой особенности CSS3.

Редактор автоматически произведет необходимый код и загрузит шрифт на сервер.

Знайте, что файлы шрифта могут быть довольно большими, таким образом они могут добавить значительный вес к странице.

Use CSS3 gradients instead of images (when possible)- Используйте градиенты CSS3 вместо изображений (когда возможно).

Include page name in automatically generated ID attributes - Включайте название страницы в автоматически произведенные признаки логина.

Enable HTML encoding (based on the selected character set) - Допустите кодирование HTML (основанное на отобранном наборе символов).

Enable URL encoding to prevent web unsafe file names -
Если Вы выберите эту опцию, то программное обеспечение закодирует имена файла, чтобы предотвратить возможные проблемы с недопустимыми именами файла.


Fonts
  • Do not use @font-face (default) - Не используйте шрифты @font-face (по умолчанию)
  • Automatically use @font-face for non-websafe fonts - Автоматически используйте @font-face для non-websafe шрифтов. Если Вы позволите этот выбор, то Вы будете в состоянии использовать любой тип истинного шрифта типа, даже если это не будет сейф сети при использовании новой особенности CSS3, названной @font-face. WYSIWYG Web Builder автоматически произведет необходимый код и загрузит шрифт к серверу. Это приведет к созданию второго файла шрифтов, что требуется для браузера IE!
  • Manually specify @font-face fonts - Вручную определите @font-face шрифты. В некоторых случаях это необходимо, чтобы вручную формировать @font-face. Например, если это не возможно  автоматически или если Вы хотите использовать отдельные файлы для каждого формата. Предоставление возможности этого выбора позволяет передовым пользователям вручную связывать файлы шрифта с определенным шрифтом.

Примечания:
Файлы @font-face могут быть довольно большими, таким образом они могут добавить значительный вес к странице.
Удостоверьтесь, что Вы проверили лицензию шрифта, который Вы желаете использовать, поскольку большинству шрифтов не разрешают этот вид использования, т.к. это нарушает большинство лицензионных соглашений конечного пользователя.
К сожалению Internet Explorer требует различного типа шрифта (EOT вместо TTF), таким образом WYSIWYG Web Builder будет автоматически производить версию EOT шрифта. Это означает, что Вы закончите с двумя версиями каждого шрифта!!

Шрифты Google

Use Google Fonts for non web-safe fonts - Сделайте этот выбор, если Вы планируете использовать шрифты Google в Вашем проекте.
При этом все шрифты, которые не являются шрифтами сети, будут заменены шрифтами Google.
Вы не должны это делать вручную. Отметьте однако, что чтобы использовать шрифты Google при создании проекта, Вам нужно будет установить их на Вашем компьютере!
Вот то, как Вы можете установить Шрифт Google на своем компьютере:
1) Посетите вебсайт Шрифтов Google: http://www.google.com/fonts/
2) Найдите нужный шрифт и добавьте его к коллекции (Щелкните Add to collection). Примите во внимание название шрифта, Вы будете нуждаться в нем в шаге 6.
3) Чтобы можно было использовать шрифт на Вашем компьютере, Вы должны будете загрузить и установить его так, чтобы он был доступен  в WYSIWYG Web Builder (и для других программ Windows). Щелкните ссылкой “Download your Collection -  “Загрузкой Ваша Коллекция” наверху вебсайта Шрифтов Google, и Вы получите файл ZIP, содержащий весь требуемый шрифт (ы) в формате TTF.
4) Разархивируйте ZIP и поместите файлы TTF в свою папку шрифтов Windows - Панель управления - Шрифты. (В Windows 8: Menu -> Tools -> Options -> Miscellaneous   -  Панель управления  \Appearance и Personalization\Fonts). Шрифт (ы) теперь будет доступен для всех Ваших приложений Windows.

5), Чтобы видеть шрифт в  WYSIWYG Web Builder, удостоверьтесь, что не выбрана опция Display web safe fonts only  - 'показать только шрифты сейфа сети' (Tools -> Options -> Miscellaneous
Примечание: Некоторые шрифты Google требуют дополнительных параметров. Вы можете добавить те параметры, щелкая кнопкой 'Manage'. Следующий щелчок Add -'Добавить' и выберите семью шрифта. В Параметрах область определяют параметры.

 &subset=latin,cyrillic-ext or :400,700,900&subset=latin,cyrillic
или:
Пример: &subset=latin, кириллическое расширение или:400,700,900&subset=latin, кириллица

Use CSS3 gradients instead of images (when possible) -Используйте градиенты CSS3 вместо изображений (когда возможно).
Позвольте этому выбору произвести стили CSS для фоновых градиентов вместо изображений. Это сокращает количество изображений. Имейте в виду, что не все браузеры (особенно Internet Explorer!) действительно поддерживают градиент CSS3.
Также отметьте, что не все стили градиентов поддержаны.

Include page name in automatically generated ID attributes - Включайте название страницы в автоматически произведенные IE, когда новый объект будет добавлен к странице. Так например 'Image1' это станет 'indexImage1'. Где 'индекс' - название страницы.
Это может быть полезно, когда Вы используете много основных страниц, когда это предотвратит дублированные IE в пределах страницы.

Примечание: Этот выбор не изменяет Ваше существующее IE, единственное для недавно созданных объектов!

Enable HTML encoding (based on the selected character set) - Позвольте кодирование HTML (основанный на отобранном наборе символов).
Это - новая особенность в версии 7.5 в попытке произвести еще более соответствующие стандартам  W3C документы HTML.

Примечания:
- Этот выбор затронет весь HTML на странице. PHP и JavaScript не будут отформатированы.
- При этом выборе потребуется больше времени, чтобы произвести страницу.
- Размер страницы немного увеличится из-за дополнительных пропусков символов (белых мест), добавленных к странице. Но вообще это не затрагивает работу в браузере!

Enable URL encoding to prevent web unsafe file names -Позвольте кодированию URL предотвратить неправильные имена файла.
Вообще Вы не должны использовать пропуски (белые места) или другие неалфавитно-цифровые символы в именах файла, потому что это вносит путаницу (особенно в комбинации с JavaScript). Если Вы позволите этот выбор, тогда редактор закодирует имена файла, чтобы предотвратить возможные проблемы с неправильными именами файлов. Конечно, все же лучше давать файлам правильные названия .

Use shared folder for assets (pages in folders will not have their own asset folder) - При этом выборе редактор разделит целевую папку (ки) актива для всего вебсайта (включая страницы в sub папки!). Это означает, что sub папки в Менеджере сайта (Site Manager) больше не будут использовать отдельную папку актива.
Примечание: Вы можете установить целевую папку для определенных файлов для печати, публикации и предварительного просмотра. Если этот выбор не сделан, тогда каждая папка, которую Вы создаете в Менеджере сайта, будет иметь собственную папку активов.


Files & Folders (Файлы & Папки)

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

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

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

В области Preview Folder (Папки предварительного просмотра) Вы можете изменить папку значения по умолчанию, которая используется для файлов предварительного просмотра. Это может быть полезно, если Вы хотите, чтобы файлы были скопированы к папке Вашего местного сервера сети в случае, если Вы производите страницы ASP или PHP.

Если сделан выбор Remove preview files (Удалить файлы предварительного просмотра), WYSIWYG Web Builder удалит все ранее произведенные файлы  предварительного просмотра. При этом только новые файлы предварительного просмотра будут сохраняться.


Publish & Preview (Публикация & Предварительный просмотр)

FTP Connection Timeout - Блокировка времени Подключения ПРОГРАММЫ ПЕРЕДАЧИ ФАЙЛОВ
Значение по умолчанию составляет 30 секунд.

Enable Logging - Допустите Регистрации
Допустите регистрации, когда у Вас есть проблемы, издавая Ваш вебсайт. Файл регистрации мог бы содержать полезную информацию о проблеме.

Target folder for File Types - Целевая папка для Типов Файла
Редактор может издать изображения, сценарии, swf, pdf, css и другие файлы, которые производит, в отдельные папки на сервере сети. Это сохранит Ваш вебсайт организованным.

Preview Scope - эта опция определяет возможности предварительного просмотра WYSIWYG Web Builder. Выберите текущую страницу, одну страницу или весь сайт для предварительного просмотра

Disable IE security warning during preview - Отключите  предупреждение безопасности во время предварительного просмотра в браузере Internet Explorer.

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

Remove PHP code during preview - Удалите код PHP во время предварительного просмотра

Примечание:
Во время предварительного просмотра программное обеспечение переименует расширение файла страницы от.php до.html.  Это означает, что если другие страницы связываются с этой страницей, браузер не будет находить страницу, так как у этого есть различное расширение.


Miscellaneous
- Разное

Language
- Язык: Используйте эту опцию, чтобы определить язык  пользовательского интерфейса. Значение по умолчанию - английский язык.. Для других языков  Вы должны установить соответствующий языковой модуль.
См. также  Язык интерфейса

User Interface - Пользовательский Интерфейс
Определяет, использовать ли классическое меню и панели инструментов или интерфейс Ленты.

Display websafe fonts only - Отобразите websafe шрифты (шрифты сейфа сети)  только.

И другое.


Backups
Настройки резервирования файлов: место сохранения папки с резервной копией, число сохраненных копий.
См. также Менеджер резервирования


User Interface (настройки интерфейса)

User Interface Language - Язык пользовательского интерфейса. (по умолчанию (Default) - англ.). См. также  Язык интерфейса
User interface (Пользовательский интерфейс) - Лента (Ribbon) или меню /  панель инструментов (Menu/Toolbar)
Docking algoritm - Алгоритм стыковки
Visual theme - Визуальная тема (см. Новое в  WYSIWYG Web Builder 17)
Tab dose'button - Вкладка кнопок
Use theme colors - Используйте цвета темы
Rounded comers - Закругленные углы

Use colored tabs - Используйте цветные вкладки

□   Enable Skinned Dialogs - Включить диалоговые окна со скинами
□    Display Ribbon commands search ("Tell Me") - Отображение поиска команд ленты («Расскажи мне»)
□   Show Mini Toolbar on text selection (Ribbon only) - Показать мини-панель инструментов при выделении текста (только лента)
□   Display all objects in Bookmarks dropdown list (Unk properties)
□   Display Office-like property view - Отображать все объекты в раскрывающемся списке «Закладки» (свойства Unk) 0 Отображать представление свойств в стиле Office
□   Use simplified icons in toolbars (restart required)- Используйте упрощенные значки на панелях инструментов (требуется перезагрузка)
□  Set initial zoom level based on DPI scaling - Установите начальный уровень масштабирования на основе масштабирования DPI
□   Display rotate handle for rotatable objects - Показать ручку поворота для вращающихся объектов
□   Use ctrl+click+drag to duplicate objects - Используйте Ctrl+щелчок+перетаскивание для дублирования объектов.

Advanced - расширенные настройки
□    Enable High DPI support (restart required) - Включить поддержку высокого разрешения (требуется перезагрузка)
□    Enable Direct2D rich text rendering (restart required) - Включить рендеринг форматированного текста Direct2D (требуется перезагрузка)



Новое в  WYSIWYG Web Builder 17

Новая функция: На ленте (вкладка View - "Вид") в разделе Views добавлена ​​кнопка переключения для быстрого переключения между светлым и темным режимом.

Темная цветовая схема «Темный режим» (Dark Color Scheme или Dark Mode) — это цветовая схема, в которой светлый текст, значки и элементы графического пользовательского интерфейса используются на темном фоне. Многие современные веб-сайты и операционные системы предлагают пользователю дополнительную темную цветовую схему. Подробнее

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

В последних версиях программы в настройки программы добавлены разделы:

Grid and Guides (Сетка и направляющие)

Настраивается:
■ Привязка к направляющим линейки и отображение направляющих линейки сверху
■ Показывать всплывающие подсказки при изменении размера и перемещении объектов и направляющих. Включать частично выделенные объекты в выделение лассо.
■ Включить заблокированные объекты в выделение лассо
■ Показать контуры ячеек таблицы (если граница = 0)
■ Показать идентификатор на слоях/формах
■ Блокировка высоты страницы (без автоматической регулировки размера)
■ Показать границы направляющих
■ Показывать интеллектуальные направляющие, когда объекты выровнены.
Сетка
■ Показать сетку
■ Привязка к сетке Тип сетки:
■ Цвет сетки:
■ Отображение сетки сверху. Расстояние по горизонтали: Расстояние по вертикали
И другое.


Extension (Расширения)

Automatically download missing extensions - Автоматически загружать отсутствующие расширения
Enable live HTML rendering of extensions (may decrease performance of Ul) - Включить визуализацию HTML расширений в реальном времени (может снизить производительность Ul)
 Enable debug logging (use for test purposes only!) - Включите ведение журнала отладки (используйте только в целях тестирования!)


Ecommerce (Электронная торговля)

См. Объекты электронной коммерции

WYSIWYG Web Builder имеет встроенную поддержку нескольких сторонних платежных систем и/или платежных систем:
Ecwid, Stripe, Snipcart, Paddle, PayPal, Gumroad, WebMoney, Vibracart Pro.

Для работы этих сторонних сервисов некоторым из них требуется идентификатор магазина, ключ API или адрес веб-сайта.

Из настроек:
Указывается идентификатор магазина Ecwid  Подробнее
Настройка встроенных инструментов электронной коммерции Paddle. Подробнее
Указывается адрес электронной почты PayPal - Подробнее
Указывается ключ API Snipcart - Подробнее
Настройка встроенных инструментов электронной коммерции Stripe.
Подробнее
Указывается расположение Vibracart Pro на вашем сайте. Подробнее
URL-адрес  для возврата на ваш сайт.
И другое.



См. также:
WYSIWYG Web Builder Опции Настройка программы
Правильная настройка WYSIWYG Web Builder (видео)


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


Рейтинг@Mail.ru