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

Карта ссылок

Карта изображения (или карта ссылок - Image Map) - это изображение, на котором находятся области ссылок на разные веб-страницы. Созданные области обычно называют "горячими точками".

Горячие точки могут иметь форму прямоугольника (rectangle), круга (circle) или форму фигуры неправильной формы (polygon).

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

Растяните рамку в окне редактирования.
При использовании Панели вставок перетащите объект Image Map в Окно редактирования.
Появится окно для выбора изображения - выберите изображение
WYSIWYG Web Builder поддерживает jpg, gif, bmp и png (XP только) файлы.

Пример карты ссылок


Настройки:

Дважды щелкните по вставленному изображению - появится окно свойств.

Вкладка General

File Name: введите путь и имя файла изображения/изображения или выберите Обзор, чтобы найти изображение на Вашем местном диске.

Примечания:
Изображение будет автоматически скопировано в папку, которую Вы определили в настройках  (Tools->Options->Publish->Images Sub Folder).

Вы можете также определить абсолютный адрес изображения.

Чтобы сделать (резервную) копию изображений, используемых в Вашей странице, используйте меню Tools->Options->Folders->Make a copy of images to this folder.

Alternate text - Текст, который появится в браузере при блокировке показа изображений.Дополнительный текст

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

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

Border width - Ширина границы. Выбор равный 0 - отсутствие границ

Border color - Цвет границы

Reflection - Отражение - Определяет количество отражения.

Opacity - Непрозрачность - Измените прозрачность (0 - 100 %) изображения.


Вкладка Hotspots - Горячие точки

Есть два способа добавить горячие точки к карте изображения:

1. Ввод координат в свойствах карты изображений

2. Визуально изменяя координаты, используя мышь


Ввод координат:

Откройте свойства карты изображения и щелкните вкладкой Hotspots, чтобы вставить координаты горячей точки.

Вы можете вставить 3 типа горячих точек:

1. Add Circle-Круг - Здесь Вы вводите координаты центра и радиус круга.

2. Add Rectangle - Прямоугольник. Здесь Вы вводите координаты верхнего левого угла,  ширину и высоту прямоугольника.

3. Add  Polygon - Многоугольник (Неправильная форма). Здесь Вы вводите каждый пункт (x, y координаты) углов многоугольника


Визуальная установка горячих точек

Это более быстрый способ создания горячих точек.

1. Щелкните правой кнопкой мыши, чтобы отобразить контекстное меню.

2. Выберите тип горячей точки, который Вы хотите вставить (Add Circle Hotspot - Добавьте Горячую точку Круга, Добавьте Горячую точку Прямоугольника или Добавьте Горячую точку Многоугольника)

3. Окно будет всплывающий, где Вы можете установить начальные координаты, URL и чередовать текст области.

Можно просто нажать ОК - редактор вставит горячую точку в центре изображения.

4. После того, как Вы нажали OK, форма будет вставлена к карте изображения, Вы можете теперь изменить размеры и расположение горячей точки, используя мышь.

5. Чтобы редактировать или удалить горячую точку, щелкните по точке, в контекстном меню выберите Edit Hotspot (редактировать) или Delete Hotspot (удалить горячую точку).


Создание ссылок

Каждой горячей точке должна соответствовать своя веб-страница, на которую нужно сделать ссылку.

Откройте окно свойств Карты ссылок (ImageMap Properties), дважды щелкнув по созданной горячей точке.

На вкладке Hot Spots дважды щелкните по нужной горячей точке, чтобы открыть окно редактирования горячей точки.

В разделе Link:

в строке Link to - укажите тип ссылки (внутренняя ссылка, ссылка на внешний файл и др.)

в строке Page - укажите адрес веб-страницы. Для страниц Вашего сайта - используйте кнопку Select

в строке Bookmark - укажите закладку (если она есть)

В строке Target выбирается, как должна открыться веб-страница после щелчка по ссылке.


Вкладка Effect

Вкладка Effect (контекстное меню - Properties) позволяет создать тень и применить эффекты.

Enable Shadow - Допустимость тени

Тень с x и смещением y 0 (ноль) создаст подобие ореола.

Уменьшение фактора пятна тени сделает края более острыми.

Shadow Offset X -Теневое Смещение X - Горизонтальное теневое смещение

Теневое Смещение Y - Вертикальное теневое смещение

Shadow Opacity -Теневая Непрозрачность - Устанавливает прозрачность тени.

Shadow Color - Цвет тени

Shadow Blur - Теневое Пятно - Смягчает края тени.


Для применения эффектов в разделе Effects щелкните кнопку Add. Выберите эффект.

См. также: Создание горячих точек на карте изображений


Новое в  WYSIWYG Web Builder 17

Image Hotspots (Горячие точки изображения)
- Улучшено: объект «Области изображения» теперь реагирует. Координаты горячих точек будут автоматически пересчитываться при изменении размера изображения в сетке макета или контрольных точках.
- Улучшено: точки доступа теперь имеют собственный идентификатор. Это можно использовать (например) для отображения всплывающей карты или объекта всплывающей подсказки.
- Новая функция: добавлена ​​возможность показывать всплывающие подсказки для горячих точек.
- Новая функция: добавлена ​​​​новая точка доступа «значок». Это дает возможность использовать значки на изображении. Каждая точка доступа может иметь свой значок и цвет. Также можно добавить к значку пульсирующую анимацию, чтобы привлечь внимание посетителя.
- Новая функция: добавлена ​​возможность импорта горячих точек из файлов SVG. Это может быть полезно для импорта карт SVG, чтобы вам не приходилось вводить координаты вручную.
- Новая функция: иногда количество точек может быть слишком большим для точки доступа. В этом случае вы можете использовать опцию «Простой путь». Это уменьшит количество точек в списке на основе указанного значения эпсилон.

Ново5е для Image Hotspot - добавлена ​​опция автоматического размещения в свойствах всплывающей подсказки. Добавлена ​​возможность добавлять рамку (ширину/цвет) во всплывающую подсказку. И другое. Подробнее


Последнее обновление - июль 2022 г.


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


Рейтинг@Mail.ru