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

Страницы

Свойства страницы  
Название страницы 
Цветовое оформление
Верхний и нижний колонтитулы  
Расположение страницы в окне браузера  
Оглавление
Добавление объектов 
Страницы для различных экранов 
Эффекты при прокрутке страницы
Предварительный просмотр страницы 
Поиск ошибок
Публикация страницы 
Предзагрузчик
Импортирование страницы HTML 
Вставка собственного кода
Примечания
Embedded Page
Reusable objects
Google Analytics
Защищенный контент


Сайт, создаваемый в WYSIWYG Web Builder, может иметь неограниченное количество страниц.
Каждая страница может иметь свои под-страницы.

В WYSIWYG Web Builder сайт, т.е. и все страницы сайта, можно создать двумя основными способами:
1. С использованием шаблонов - см. Шаблоны сайта
2. Самостоятельно, не используя шаблоны.

В свою очередь, самостоятельно создавать страницы сайта также можно по-разному:
- создавать каждую страницу заново, "с нуля"
- использовать Главную страницу - Master Page
- использовать Главную рамку - Master Frames
- использовать Главные объекты - Master Objects

Применяя последние три способа, можно ускорить и облегчить создание страниц сайта, т.к. Master Page, Master Frames, Master Objects являются разновидностями шаблона страницы.


Основные инструменты для работы со страницами в WYSIWYG Web Builder:


Ниже показан раздел Ленты (Ribbon), посвященный работе над страницами (для версии WYSIWYG Web Builder 17)





Свойства страницы

Свойства страницы можно открыть, используя:


1. Меню Page - Page Properties
2. Ленту - вкладку Page - раздел Page - Page Properties (для WYSIWYG Web Builder 9 и 10)
3. Site Manager - Менеджер сайта
4. Контекстное меню страницы - Page Properties


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

Фон страницы
Фон страницы может быть заполнен цветом, градиентом, образчиками, текстурой, изображениями. При применении изображений можно покрыть фон как плиткой.
Для настройки  фона используйте Свойства страницы - вкладку Ctyle.

Примечания:
1. Свойства страницы используются, когда нужно определить индивидуальные свойства конкретных страниц.
Свойства всех страниц сайта определяются в Свойства сайта.
2. Многие свойства страницы определяются в Инспекторе свойств.


Подробнее о свойствах страницы


Новое: При использовании Сетки расположения (Layout Grid)
- Новая функция: добавлена новая опция повторения фона: пробел. Фоновое изображение повторяется в максимально возможной степени без обрезки. Первое и последнее изображения прикрепляются по обе стороны от элемента, и пробелы равномерно распределяются между изображениями.
- Новая функция: добавлена новая опция повторения фона: круглая. Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без пропусков).

Цветовое оформление


По умолчанию палитра цветов WYSIWYG Web Builder отображает стандартную цветовую палитру, содержащую 140 стандартных веб-цветов.
С помощью опции «Образец цвета» (на основе палитры цветов MS Office) вы можете настроить собственную цветовую палитру из 12 цветов.
Светлый и темный варианты этих цветов будут сгенерированы автоматически, как в MS Office.

Цветовые палитры
Доступны следующие варианты:
• нет - используйте цветовую палитру по умолчанию.
• да – не синхронизировать - используйте собственные цвета, но не заменяйте цвета на страницах при изменении темы.
• да — синхронизировать все цвета
использовать собственные цвета, заменять цвета на страницах при изменении темы или выборе другой темы. По сути, это приведет к глобальной замене совпадающих цветов на всех страницах. Цвета из предыдущей выбранной темы будут заменены цветами из выбранной темы.
• да — синхронизировать категории
использовать собственные цвета, заменять цвета на страницах при изменении темы или выборе другой темы. Выполните глобальную замену соответствующих цветов на всех страницах в зависимости от их категорий. Например, цвета текста будут обновляться только для текста, но если фон использует тот же цвет, он не будет обновлен. Это работает так же, как и в этом инструменте «Глобальная замена».

Для выбора темы оформления страницы используйте меню Page - раздел ленты Theme.

Подробнее о цветовом оформлении (англ. язык)


Название страницы
Название файла HTML (название страницы) взято с названия, которое Вы определили в Site Manager - Менеджере Сайта
Подробнее


Верхний и нижний колонтитулы

В WYSIWYG Web Builder имеются два  объекта - Верхний колонтитул (Page Header) и Нижний колонтитул (Page Footer).

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

В основном этот объект - упрощенный Слой (уровень), таким образом большинство параметров настройки идентично, и другие объекты можно перетащить на вершину этого объекта и сделать их частью заголовка.
Подробнее

Расположение страницы в окне браузера

Вот несколько подсказок, как выбрать расположение страницы в окне браузера:
  • Установите ширину страницы (в Свойствах страницы) (например,  800x600 или 1024x768). Высота на самом деле не имеет значения.
  • Определите левую и правую границу страницы, используя  справочные линии (Guide) и  установив тот же самый размер. Например, установите вертикальную направляющую линию на отметке 1024.
  • Удостоверьтесь, что все объекты страницы  располагаются в пределах установленных границ.
  • Выберите 'Center to browser' в Свойствах страницы.
Отметьте, что все содержание страницы будет сосредоточено в пределах ширины страницы, которую Вы определили. Так, если фактическое содержание шире чем 1024 пикселя, тогда Вы должны также увеличить ширину страницыв ее свойствах.

Смотрите на шаблоны, как использовать этот метод:
http://www.wysiwygwebbuilder.com/templates.html

Большая часть шаблонов имеет установку страницы по центру браузера.


Добавление объектов

Для вставки объектов можно использовать:
См. также:

Новое для Загрузки файла) - обавлен тип «Bootstrap». Это отобразит входной файл с использованием стиля Bootstrap (только CSS). В отличие от версии пользовательского интерфейса jQuery, для которой требуется JavaScript.


Оглавление

Оглавление (Table of Contents) — это список ссылок, которые ведут к различным разделам страницы. Оглавления особенно полезны для длинных страниц для быстрого перехода к нужному месту на странице.
Подробнее об оглавлении

Страницы для различных экранов

В версии WYSIWYG Web Builder 10 появилась новая функция - создание сайтов для разных экранов, в т.ч. для экранов мобильных телефонов.
См. Сайты для разных экранов
Подробнее о мобильных страницах


Предварительный просмотр страницы


В меню File  выберите Preview in Browser -> Default Browser
Или: Лента  - вкладка  Home -> Preview  -> Default Browser (F5), чтобы анонсировать текущую страницу в Вашем браузере по умолчанию.
Подробнее о предварительном просмотре


Публикация страницы


WYSIWYG Web Builder создает и сохраняет проект сайта как один файл с расширением .wbs.
При публикации сайта единый файл распадается на отдельные файлы - страницы HTML, изображения, файлы CSS, файлы Java Script и пр.

Таким образом, функции публикации индивидуальных страниц в WYSIWYG Web Builder  нет, нужно публиковать целый сайт.
При этом есть возможность выбрать или исключить из публикации отдельные страницы.
Подробнее о публикации


Предзагрузчик

Новое: Предварительный загрузчик (также известный как экран загрузки или Page Preloader) - это то, что вы видите на некоторых сайтах перед загрузкой основного содержимого веб-страницы.
WYSIWYG Web Builder может отображать  анимированный файл GIF в то время, когда идет загрузка сайта, в виде полупрозрачного наложения. Анимация исчезнет сразу после загрузки страницы.
Коллекция стандартных изображений preloader включена, но вы также можете добавить свои собственные анимации, добавив пользовательское изображение gif в подпапку preloader. Эта папка обычно находится в папке Documents \ WYSIWYG Web Builder \ system \ preloader \
Вы можете настроить изображение preloader в Свойствах страницы -> Разное
Примечание:
Если загрузчик не исчезает, то, скорее всего, существует конфликт сценариев на странице. Когда это произойдет, удалите все пользовательские сценарии Java и повторите попытку.
Подробнее см. http://www.wysiwygwebbuilder.com/preloader.html

Импортирование страницы HTML

Хотя WYSIWYG Web Builder не редактор HTML, Вы можете импортировать существующие страницы HTML.

Выберите меню Page -> Import -> Import HTML Page,  чтобы показать окно импорта страницы HTML
Вы можете выбрать страницу HTML или из местной папки на Вашем компьютере, или страницу из Интернета, ввеля адрес (URL) страницы

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

Примечания об импортировании HTML:
  • WYSIWYG Web Builder не редактор HTML, а генератор HTML! При импорте редактор пытается преобразовать содержание страницы во внутренний формат WYSIWYG Web Builder.
  • В настоящее время возможен импорт текста, изображений, элементов формы и признаков  body  - (цвета ссылок, фоновое заполнение, мета-признаки). Таблицы, scripts, листы стиля и мультимедийные компоненты не могут быть импортированы. Но в большинстве случаев это достаточно хорошо, чтобы начать работать с импортированной страницей.
  • WYSIWYG Web Builder не разбирает листы стиля, поэтому оформление текста может выглядеть по-иному, чем на оригинальной странице.
  • WYSIWYG Web Builder в настоящее время не поддерживает фреймы (framesets). Если Вы хотите импортировать веб-страницу, которая использует фреймы, Вы должны будете импортировать все индивидуальные страницы отдельно.
  • Очень трудно поддержать все различные типы HTML. Даже популярные браузеры будут интерпретировать HTML по-другому, так что не ожидайте чудес. Если страница не в состоянии быть импортированной, она, вероятно, содержит код, который не понимает WYSIWYG Web Builder, и поэтому Вы должны начать работу над страницей на пустом месте.
  • Импортирование веб-страниц, созданных в WYSIWYG Web Builder, даст лучшие результаты!

Import page from another project  -  Этот выбор позволяет импортировать страницу из проекта, созданного WYSIWYG Web Builder.

Вставка собственного кода

WYSIWYG Web Builder не позволяет редактировать код, который создает сам, но есть возможность добавить собственный код. При этом свой код можно вставить только в строго отведенные для этого места.

Для вставки своего кода используйте Панель вставок или Ленту - вкладку Insert - раздел Standart - HTML.

Подробнее о вставке кода


Примечания


На страницу можно вставить примечания, которые не будут отражаться при публикации страницы
Подробнее


Embedded Page/Reusable objects

Embedded Page - Встроенная страница
Reusable objects - многоразовые объекты

Примечание: при использовании встроенных страниц важно убедиться, что все идентификаторы (ID) объектов уникальны! См. также: Как предотвратить дублирование идентификаторов.

Embedded objects - Встроенные объекты (ранее известные как  Master Objects) - это полезная функция, которая позволяет повторно использовать объекты (но не свойства страницы) с другой страницы внутри страницы.
Объект 'Embedded Page' в основном является указателем на объекты другой страницы (например, 'Master Page"). Эти объекты будут внедрены в страницу точно так же, как они находятся на исходной странице. Вы даже можете использовать несколько встроенных страниц на одной странице!

Предположим, у вас есть определенный макет, который одинаков для всех ваших страниц, и вы не хотите применять эту копию и вставку между всеми вашими страницами.  Для этого просто создайте макет один раз на странице и вставьте макет этой страницы во все ваши другие страницы, используя Embedded Page (встроенные страницы).

Если вы хотите обновить макет, вам нужно будет сделать это только один раз на исходной странице.

Пример:
Вы хотите создать веб-сайт, который имеет общий заголовок и меню для всех страниц.

1. Создайте новую страницу с именем demo
2. Создать макет
3. Откройте другую страницу и вставьте объект" Embedded Page".
4. Откройте свойства и выберите демо-страницу.
5. Вы заметите, что все объекты из заголовка страницы теперь являются частью страницы индекса.
6. Теперь при редактировании demo-страницы изменения будут автоматически применены и к индексной странице!

Подробнее см. http://www.wysiwygwebbuilder.com/embedded_page.html

Примечания:

* Встроенные страницы не клонируют свойства страницы! Это всего лишь указатель на объекты другой страницы.

· Поскольку объекты клонируются "как есть", убедитесь, что идентификаторы объектов (ID) на главной странице уникальны. Идентификатор можно изменить в Properties Inspector (Инспекторе свойств). Рекомендуется дать им префикс, например master_, это предотвратит дублирование идентификаторов на странице.

* Растягиваемые слои- Stretchable layers (относительный размер) будут иметь фиксированный размер, так как сама страница имеет фиксированный размер!

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

* Опция  'Use hover state style to indicate the current page' ("использовать стиль состояния наведения для указания текущей страницы") в инструментах навигации не будет работать в сочетании со встроенной страницей, поскольку для этого объекта будет только один набор изображений. Одни и те же изображения будут использоваться на всех страницах.

* Embedded Page (Внедренная страница) должна находиться в той же папке, что и страницы, которые ее используют. Это особенно важно, если вы используете внутренние ссылки, так как ссылки будут относительно главной страницы. Так что если страница находится в другой папке, то ссылки не являются допустимыми.
 

Внедрить как слой

Когда выбран параметр "embed as a layer" ("внедрить как слой"), все элементы, составляющие внедренную страницу, фактически находятся на слое. Этот слой будет блокировать доступ к любым элементам страницы "под" ним (в z-порядке).

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

Если флажок "embed as a layer"  ("встроить как слой") снят, элементы вставляются как отдельные объекты на странице (а не на слое). Затем вы можете получить доступ к любым объектам "под" встроенной страницей (если они видны).

Обратите внимание, что WYSIWYG Web Builder также поддерживает Master Frames.


Google Analytics (Гугл Аналитика)

Google Analytics - Лента - вкладка "Страница" - раздел "Инструменты" - Google Analytics.
Вставьте код Google Analytics в раздел <head> текущей страницы.
Этот параметр является ярлыком для страницы HTML в поисковике Google.


См. также:
Быстрая верстка landing page, подписных и продающих страниц
Создаем страницу подписки
Связываем страницу подписки с сервисом JustClick


Новая функция - Защищенный контент (Protected Content): добавлена ​​возможность показывать/скрывать элементы в зависимости от статуса входа пользователей. Теперь можно защитить определенный контент на странице. Подробнее

пользовательский интерфейс добавлена ​​вкладка «Новая страница». ДНовое для страниц: Отчеты об ошибках проверяют неправильное выравнивание страниц в гибких макетах. Добавлен быстрый и простой способ переупорядочивания плавающих слоев (сеток макета, гибких контейнеров и т. д.). В свойствах страницы отображается значок «предупреждение», если длина заголовка менее 30 или более 60 символов. Добавлена ​​возможность устанавливать минимальный размер шрифта для «Автоматически масштабировать новые объекты в других точках останова». Вобавлена ​​возможность переименовать страницу, дважды щелкнув вкладку. И другое. Подробнее


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

Page Redirect
Простое решение для перенаправления пользователей на другую страницу на основе даты, времени, дня недели, браузера или ширины экрана.
См. Page Redirect

Language Text
Используется для переключения между несколькими языками (на одной странице).
См. Language Text

Pace
Pace - это индикатор выполнения автоматической загрузки страницы.
См. Pace

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

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


Рейтинг@Mail.ru