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

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

Открытие свойств страницы
Свойства страницы
Многостраничные свойства
Оптимизация поискового сервера
Master Frame
Вес страницы
Особенности Internet Explorer
Проверка ссылок
Название страницы

Новое в WYSIWYG Web Builder 12
Новое в WYSIWYG Web Builder 14
Новое в WYSIWYG Web Builder 15   
Новое в WYSIWYG Web Builder 17    


Стиль оформления (вкладка Style)

Откройте Свойства страницы - вкладку Style (меню Page - Page Properties - вкладка Style).

Примечение: С версии WYSIWYG Web builder 8  моделирование (применение CSS) является отдельным от HTML (где только возможно). Этим достигается более чистый код страницы, ускоряется загрузка страницы.
Однако это означает, что более чем когда-либо важно удостовериться, что Ваши логины уникальны в пределах содержания страницы, иначе тот же самый объект получит многократные определения стилей.


Раздел Background (Фон)

Background mode - Определяет фоновый режим.

Transparent - Фон страницы будет прозрачным (при просмотре в браузере фон будет белым)

Solid - Используйте сполошной цвет фона.

Image - Используйте изображение как фон.

Repeat
Задает расположение листов для фонового изображения (покрытие "черепицей"):
Возможные варианты:
- Repeat in both directions - Повторите в обоих направлениях
- Repeat in horizontal direction - Повторить в горизонтальном направлении
- Repeat in vertical direction - Повторить в вертикальном направлении
- Do not repeat - Не повторять
 
Background image size - Размер фонового изображения (это выпадающий вариант справа от "повтора") - Задает размер фонового изображения.
 

empty - пусто (по умолчанию)
Фон-изображение имеет размер по умолчанию и прокручивается вместе с содержимым.
 
fixed - фиксированный
Фиксированный фон - это фоновое изображение, которое будет оставаться на одном месте, в то время как остальная часть текста и изображений прокручивается поверх него.
 
cover
Масштабировать фоновое изображение, чтобы фон полностью покрыл всю страницу. Некоторые части фонового изображения могут не отображаться в области позиционирования фона.
 
contain
Масштабируйте изображение до наибольшего размера, чтобы его ширина и высота поместились внутри области содержимого.
 
parallax (параллакс)
Изображение прокручивается медленнее, чем содержимое на переднем плане, создавая иллюзию 3D-глубины.
 Для опытных пользователей:
Скорость по умолчанию-0.3. Это можно изменить, добавив переменную сайта с именем $PARALLAX_SPEED$
Скорость, с которой работает эффект параллакса. 0.0 означает, что изображение будет отображаться фиксированным на месте, а 1.0 изображение будет течь с той же скоростью, что и содержимое страницы.
 
percentages - проценты
Например, '100% 100%' растянет изображения до 100% ширины/высоты объекта. Другие значения как "50% 50%" также возможны.
 
pixels - пикселы
Например: '320px 250px' покажет изображение в указанном размере.
 
Horizontal Align - Выравнивание по горизонтали
Устанавливает горизонтальное положение фонового изображения.
 
Vertical Align- Выравнивание по вертикали
Устанавливает вертикальное положение фонового изображения.

Gradient - Используйте градиент (с двумя цветами) как фон. Эта опция поддерживает много различных стилей градиента, таких как  linear, ellipse, glass, glossy -линейный, эллипс, стеклянный, глянцевый и т.д.

Опция Repeat - повторение, т.е страница будет покрыта изображением как черепицей.

Вы также можете использовать градиенты CSS3, включив опцию  'Use CSS3 gradients instead of images' ("использовать градиенты CSS3 вместо изображений") в меню Tools -> Options -> HTML.
Однако имейте в виду, что не все браузеры поддерживают CSS3.

По умолчанию фоновое изображение будет произведено для эффекта градиента. Однако Вы можете также использовать градиенты CSS3, в меню  Tools выбрав Options -> HTML -> 'Use CSS3 gradients instead of images'

Эффект градиента может использоваться графическими формами, ClipArt, TextArt и другими инструментами рисунка.

Имейте в виду однако, что не все браузеры поддерживают CSS3.

Multi color gradient - Многоцветный градиент
Используйте многоцветный градиент как фон.
WYSIWYG Web Builder включает много цветных стилей градиента, но Вы можете легко создать свой собственный стиль с
Gradient Style Manager  - Менеджером стиля градиента.

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

Color - выбор цвета

Pattern  - Образец - Используйте образец как фон.

Texture - Используйте текстуру как фон.

Border - Граница
Стиль границы -  Пунктирный, подчеркнутый штриховой линией, двойная линия и др.

Для многих объектов Вы можете также установить индивидуальный стиль, ширину, цвет и радиус для каждой стороны границы!  Выберите 'Индивидуальный стиль для каждой стороны' и затем щелкните "Settings".

Width - Определяет толщину границы ( 0 - нет границ).
Color - Цвет границ
Radius -  Определяет закругленность углов


Новое для Фон  (Background)
- Новая функция: добавлена поддержка рендеринга фона Карт Google (Google Maps). Теперь вы можете использовать (статическое) изображение карты Google в качестве фона в большинстве объектов.
Например: https://maps.googleapis.com/maps/api/staticmap?center=New + York, NY&zoom=12 & размер=440x330
- Улучшено: фоновый режим - > изображение (Background mode -> image)   теперь отображает палитру цветов, чтобы выбрать цвет для изображения + цвет и изображение + наложение.
- Новая функция: добавлена опция "image+fade" (изображение+исчезать) в свойствах фона. Это добавит эффект градиентного наложения на фон.
- Новая функция: добавлена системная переменная $PROJECT_CSS$. Это позволяет указать другое имя для глобальной (внешней) таблицы стилей вместо имени проекта.

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

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

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

Раздел "Defaults"

Text - Текст
Font - Шрифт
Style - Определяет стиль текста такой как Bold, Italic or Regular-Полужирный, Курсив или Регулярный.
Size - Определяет размер текста.
Color - Определяет цвет текста.


Theme - Определяет тему страницы, основанную на ThemeRoller.
Эта тема будет применена к позволенным объектам всей темы как jQuery UI widgets (виджеты jQuery UI). Помимо jQuery UI виджетов Вы можете также позволить темы (theming) для строки меню, навигационных панелей, меню счета, slidemenu, горизонтальной линии. Этим путем Вы можете дать оформление всей страницы в одном стиле. Темы могут быть созданы и отредактированы с Менеджер темы (Theme Manager).


Style Manager - Менеджер Стиля

С Менеджером стиля (Style Manager) Вы можете управлять стилями проекта. При использовании стилей Вы можете изменить стиль всего вебсайта, все в одном месте.

Менеджер стиля можно открыть, используя:

  • Меню Format - Styles - Style Manager
  • Ленту - вкладку Tools - раздел  Site Tools - Style Manager
Подробнее о Менеджере стиля



Макет страницы

В WYSIWYG Web Builder v 12 возможно создание полного макета страницы (Full Page Layouts) со слоями и создание макета страницы с использованием карусели.
Создать полный макет страницы с карусели
Создать полноценный сайт-страницу с помощью Карусели.
При этом можно создать карусель с автоматической прокруткой. Это означает, что вы можете использовать колесо прокрутки мыши, чтобы быстро перейти на следующую страницу/слайд.

В свойствах карусели (Carousel properties)  установите режим полной ширины fullpage. При этом стандартный скрипт карусели с fullPage.js будет заменен, чтобы создать не горизонтальную, а вертикальную прокрутку.

Добавьте содержимое каждого слайда, со своим заголовком и другим содержимым. Кроме того, каждый слайд может иметь свой цвет фона или  фоновое изображение.
Вы также можете добавить меню в верхней части страницы. Чтобы сделать меню видимым все время, его можно добавить в липкий слой.
Подробнее (англ. язык)
Посмотреть пример:
http://www.wysiwygwebbuilder.com/support/carouselfullpage.html

Скачать демо-проект:
http://www.wysiwygwebbuilder.com/support/carouselfullpage.zip

Связанные учебные материалы:
http://www.wysiwygwebbuilder.com/carousel.html
http://www.wysiwygwebbuilder.com/carousel3d.html
http://www.wysiwygwebbuilder.com/carouselevents.html


Цвета темы

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

См. также:
Параллакс

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

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


Рейтинг@Mail.ru