Wysiwyg web builder android

WYSIWYG Web Builder

Обзор

Содержание

Сайты для разных экранов

Дополнительные справочные материалы

Применяемые технологии для создания мобильных страниц

Создание веб-страниц для маленьких экранов мобильных телефонов имеет свои особенности по сравнению с созданием страниц для больших экранов.
См. Сайты для разных экранов.

У WYSIWYG Web Builder есть встроенный проектировщик для мобильных web-страниц.

При создании сайтов для разных экранов (адаптивных сайтов) в WYSIWYG Web Builder используются технологии jQuery Mobile, jQuery UI и Bootstrap.
Для доступа к функциям и объектам адаптивных сайтов используйте Панель вставок (Toolbox) — раздел jQuery UI / Bootstrap .

jQuery Mobile — веб-фреймворк.

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

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

В отличие от стандартной страницы, все jQuery mobile-объекты стилизованы темами и образцами.

Создание мобильной web-страницы

Для создания страниц для мобильных телефонов используйте один из способов:

• Лента ( Лента — вкладка Page — New Page — New Mobile Page )
• Меню Page — New Mobile Page
• Менеджере сайта (Site manager) — » New Mobile Page ‘ («Новая мобильная Страница»).

Отметьте, что рабочее пространство первоначально будет меньшим, и изменится набор применяемых инструментов.

Вы можете, как обычно, перетащить и отпустить объекты на страницу (в Окно редактирования), но Вы не можете управлять точной позицией объекта, потому что это будет добавлено к ‘flow -‘потоку’ страницы.
Т.е. положение объекта на странице не настраивается вручную.

Редактор сам расставляет объекты: первый объект — вверху слева, второй объект — правее первого и т.д.
Если первый объект занимает всю ширину страницы, то второй объект будет расположен ниже его.

Вы можете управлять выравниванием (слева, по центру, справа) объектов в свойствах страницы.
У контейнеров как Collapsible, Layout Grid and Tabs есть своя собственная опция выравнивания.
Чтобы получить представление, на что будет похожа мобильная страница, перетащите и опустите Header (Заголовок), Footer (Нижний колонтитул) и Listview на страницу.

Вы заметите, что заголовок будет автоматически добавлен наверх, а нижний колонтитул — вниз.
Listview (и все другие объекты) будет добавлен между заголовком и нижним колонтитулом.
Более расширенные схемы размещения могут быть созданы с Layout Grid — Макетом полосы.
Тема страницы и объектов может быть установлена в Свойствах страницы (Page Properties).
У большинства объектов также есть опция, чтобы изменить образчик темы, чтобы придать различный стиль, чем остальная часть страницы.

Предварительно просмотрите результат в браузере и обратите внимание, что все объекты заполняют всю ширину браузера! (измените ширину страницы при предварительном просмотре).

Если Вы свяжитесь с другими страницами jQuery Mobile pages, тогда Вы можете также видеть переходы по разным страницам.

Чувствительный Web-дизайн (Responsive Web Design)

При создании сайтов для разных экранов используются несколько методов.
Один из них — создать несколько вариантов сайта, рассчитанных на разные размеры экрана.

Вы можете использовать один из переадресовывающихся скриптов в ‘Ready-to-use-JavaScripts’ (доступный в инструментах меню Insert), чтобы переадресовать пользователя к другой версии страницы.

Другое решение состоит в том, чтобы использовать подобную архитектуре схему размещения, которая автоматически корректируется к текущей разрешающей способности экрана.
Это может быть сделано с jQuery Masonry extension (http://www.wysiwygwebbuilder.com/masonry.html).
Пример: http://www.wysiwygwebbuilder.com/support/masonry/metro.html (измените ширину страницы примера).

Это также возможно, чтобы использовать уровни, чтобы создать поддающиеся растягиванию схемы размещения.
http://www.wysiwygwebbuilder.com/using_layers.html

Отметьте, однако, что использование этих вариантов связано с дополнительными проблемами.

У WYSIWYG Web Builder 9 и 10 есть несколько новых опций для того, чтобы проектировать ‘чувствительные’ вебсайты.

WYSIWYG Web Builder 10 вводит ‘Responsive Web Design’ — Чувствительный Web-дизайн’, который позволяет Вам создавать единственную страницу HTML, содержащую различные варианты схемы размещения. Каждый вариант оптимизирован для определенных размеров экрана устройства. Ваш вебсайт динамически ответит на размер экрана посетителя и отобразит схему размещения, наиболее соответствующуюустройству.
Эти различные варианты называются »breakpoints’ -контрольными точками’, и использует запросы CSS3’s.

Контрольная точка (»breakpoints’) — отдельное ‘представление’ страницы в режиме WYSIWYG Web Builder. У страницы может быть множество контрольных точек, каждая будет оптимизирована для определенной ширины экрана.

Например, у Вас может быть стандартная схема размещения (для больших экранов), один для таблеток (1024 px) и другой для мобильных телефонов (320 px). Общие контрольные точки:

• 320 px, Mobile portrait , 480 px, Mobile landscape
• 768 px, Tablet portrait 1024 px, Tablet landscape/Netbook
• 1280 px and greater, Desktop

Конечно Вы можете определить свои собственные размеры и иметь так много контрольных точек, как Вам нравится (максимально 25), хотя обычно достаточно иметь не более 3.

Чтобы добавить или редактировать контрольные точки, нажмите ‘Manage Breakpoints’ в меню Page . Чтобы переключиться между контрольными точками, нажимают в раскрывающемся меню Breakpoints (Контрольные точки) и выбирают желательную контрольную точку. Чтобы возвратиться к заданной по умолчанию схеме размещения, выберите » Default «.

Различные варианты размещения совместно используют одинаковый набор элементов на странице (текст, изображения и т.д), и Вы можете изменить позицию и размер объекта для каждой контрольной точки.

Вы можете также добавить уникальное информационное наполнение для определенных размеров экрана, которое позволяет, например, скрыть некоторые объекты на меньшем экране.

Следующие объекты не чувствительны; это означает, что у них не может быть разных размеров в контрольных точках:

• Banner
• Curve -Кривая
• Curved Text — Криволинейный текст
• Line -Линия
• Navigation Bar — Навигационная панель (в последних версиях WYSIWYG Web Builder имеется возможность создавать разные панели навигации для экранов разных размеров — см. Новое в WYSIWYG Web Builder 14)
• Объект OLE
• Polygon -Многоугольник
• Shape — Графическая форма
• Table — Таблица
• Text Art — Художественный текст
• Wrapping Text — Обертывание текста

Если Вы хотите использовать эти объекты в мобильной версии, то Вы должны создать отдельные копии объектов для разных контрольных точек.

В WYSIWYG Web Builder 14 для использования контрольных точек добавлены новые функции — Подробнее .
— добавлено Font Family («семейство шрифтов») и Font Size(«размер шрифта») в диалоговом окне свойств Сетки расположения . Это можно использовать для установки шрифта текстового объекта при использовании адаптивных шрифтов.

Примечания о чувствительном Web-дизайне

У объектов могут быть различный размер, позиция и видимость в контрольных точках. Однако все другие свойства будут точно тем же самым! Например, если Вы измените цвет объекта, тогда он будет изменен во всех контрольных точках (потому что объект используется между всеми обозрениями).

Хотя у объектов могут быть различные размеры в контрольных точках, есть несколько исключений. Например у форм и других инструментальных средств рисования будет тот же самый размер во всех контрольных точках. Причина этого — то, что только одно изображение будет опубликовано. И если бы Вы изменили размер изображения в одной контрольной точке, тогда это выглядело бы искаженным в другой контрольной точке.
Но Вы можете использовать множественные формы, одну для каждой контрольной точки, и скрыть те, которые используете в других контрольных точках.

Если Вы совместно используете текст между множественными контрольными точками, тогда устанавите »output format’ (выходной формат) в опции совместимости к »Default’, потому что другие опции оптимизируют текст для определенной ширины.
Если Вы действительно должны использовать одну из опций совместимости, тогда рассмотрите использование отдельного текстового объекта для каждой контрольной точки. Таким образом текст может быть оптимизирован для той определенной ширины.

Объекты могут быть частью одного Уровня (Form, Carousel, Tabs, Accordion, Dialog). Так, если Вы перемещаете объект в уровене в одной контрольной точке, тогда, это автоматически будет частю того же самого уровня в других контрольных точках!

Если Вы добавите новый объект к контрольной точке, то это будет первоначально скрыто во всех других контрольных точках. Вы можете использовать Менеджера объектов (Object Manager), чтобы показать скрытые строки или столбцы, если Вы также хотите видеть это на других контрольных точках.

Если Вы удалите объект из контрольной точки, тогда он будет удален из всех других обозрений также. Если Вы хотите скрыть объект, Вы можете использовать Менеджера объектов .

Вы можете проверить контрольные точки в своем настольном браузере. Измените размеры окна браузера, чтобы активизировать контрольные точки.

Некоторые браузеры также имеют инструментальные средства для того, чтобы проверить чувствительные вебсайты. Например, у FireFox есть Responsive Design View — «Чувствительный режим конструктора», который может проверить контрольные точки. Консультируйтесь с документацией браузера для большего количества подробностей.

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

Менеджер тем для мобильных телефонов

Менеджер тем для мобильных телефонов (Mobile Theme Manager) создает темы, которые используются, чтобы разработать объекты для мобильных телефонов jQuery (кнопки, меню, заголовки, нижние сноски и т.д.).

Для открытия менеджера мобильных тем используйте меню Tools — Mobile Theme Manager (или Ленту — вкладку Tools — Mobile Theme Manager )

Мобильная тема jQuery — ряд цветных образчиков: цвета текста, цвет фона и градиента и шрифт.
Вы можете определить до 26 цветных образчиков, от А до Я. Поддерживаеется много свойств CSS3, таких как закругленные углы, тени и градиенты.

Чтобы создать новую тему, щелкают кнопкой ‘Add’. Теперь Вы можете определить цвет для каждой части виджета jQuery.
Справа в окне — просмотр указанных стилей. Для сохранения щелкните по ‘ Save ‘.
Файлы CSS и связанные изображения будут произведены, когда Вы издадите вебсайт, который использует тему.
Определения темы сохранены в файле: Сеть C:\Users\Username\Documents\WYSIWYG Builder\system\mobilethemes.dat
В редакторе Вы можете выбрать тему для (мобильной) страницы в Свойства страницы.

Отзывчивые стили (Responsive styles) — новая особенность в WYSIWYG Web Builder 11. Добавлена поддержка отзывчивым стилям в Менеджере стиля (Style Manager). Вы можете использовать различный шрифт, размер или цвет текста в контрольных точках. Например используйте больший шрифт для меньших экранов. С Отзывчивыми стилями Вы можете определить различные значения для контрольных точек.

В Менеджере стиля выберите Custom Style — Edit .

У большинства объектов теперь могут быть различные шрифты в контрольных точках. У большинства объектов могут также быть различные фоны и цвета текста. У некоторых объектов (фотогалерея, текст и блог) могут иметь различные колонки в контрольных точках.

Новое в WYSIWYG Web Builder 12
Новая функция: добавлена опция ‘CSS in media query’ («CSS в медиа-запросе»). Это позволяет добавлять определенные CSS-стили точек останова (Контрольных точек). Это может быть полезно, если вам нужны разные стили в Контрольных точках.

Новое в WYSIWYG Web Builder 16
— Новая функция: добавлена ​​возможность устанавливать размер шрифта по умолчанию для каждой точки останова (в «Управление точками останова»).
— Новая функция: добавлена ​​опция «Точки останова по умолчанию» (Инструменты-> Параметры-> Общие — Tools->Options->General) для настройки точек останова по умолчанию (и размеров шрифта) для новых страниц. Также можно установить значение по умолчанию для «Активировать точки останова, когда окно браузера меньше / больше ширины устройства».

Отзывчивый фон Responsive background styles (цвет, изображение) появился в WYSIWYG Web Builder 11 и применяется к страницам. Вы можете определить различные свойства фона для контрольных точек. Таким образом у мобильного расположения могут быть другими фоновый цвет или изображение.
Посмотреть пример (измените ширину окна браузера)

Сетка расположения ( Layout Grid )

Новое в WYSIWYG Web Builder 11.
Сетка расположения ( Layout Grid ) может использоваться, чтобы создать колонки, которые автоматически приспосабливаются к размеру экрана. У сетки может быть до 12 колонок, с размерами в процентах. Объекты, которые вставлены в ячейки сетки, автоматически станут плавающими. Это — новый способ создать гибкие и отзывчивые расположения!

Много объектов редактора были спроектированы заново, чтобы использовать в сетку расположения. Например, если изображение будут помещены в сетку расположения, то они автоматически станут отзывчивыми, т.е. будут заполнять всю ячейку сетки. Текст или видео YouTube будут всегда использовать полную ширину ячейки сетки и сохранять соотношение сторон как 16:9 или 4:3.

В сетку можно поместить также колонтитулы / нижние сноски, использовать слои и Карусель.

1. Не используйте Center in browser window (по центру в окне браузера) в комбинации с сетками расположения. Этот выбор должен использоваться только для ‘неподвижного’ содержания.

2. Вы не можете изменить размер или положение сетки расположения. Размер сетки зависит от своего содержания.

Чтобы вставить дополнительную колонку, щелкните кнопкой ‘Add’. Ширина колонок может быть приспособлена при перемещении маркеров между колонками.
Чтобы удалить колонку, сначала выберите ее и затем щелкните Remove .

У каждой колонки может быть свое собственное выравнивание. Чтобы изменить выравнивание, щелкните колонкой и затем выберите выравнивание.

Расположение (Layout)
Сетка может создаваться как постоянная или с «жидким» расположением.
Жидкая сетка использует полную ширину окна браузера, и все колонки будут изменяться соответственно.

Дополнение (Padding)
Дополнение определяет ширину краев на каждой стороне колонки.

Контрольная точка (Breakpoint) определяет, когда расположение будет переключено к мобильному/сложенному расположению.

Добавление объектов — просто тяните и отпустите объект в колонке. Отметьте, что курсор мыши должен быть в колонке.

Новое в WYSIWYG Web Builder 12

Новое для Layout Grid (Сетки макета)
WYSIWYG Web Builder 12 вводит несколько новых функций для макета сетки.

— Улучшено: gutter, отступы и поля теперь реагируют, поэтому они могут иметь разные значения в точках останова.
— Новая функция: добавлена опция наложения фона (background overlay). При этом используется указанный цвет фона (и Альфа-значение) для добавления и наложения на фоновое изображение.
— Новая функция: добавлена возможность использовать видео в качестве фона. Поддерживаются URL-адреса Youtube и Vimeo.
— Новая функция: добавлена опция ‘Use Flexbox’ («использовать Flexbox»). Если этот параметр включен, сетка будет использовать макет CSS flexbox. Это приводит к более чистому коду, а также включает некоторые дополнительные функции, такие как вертикальное выравнивание, и весь столбец будет заполнен фоном.
Обратите внимание, что это относительно новая функция CSS, она не поддерживается старыми браузерами ( Примечание: значение точки останова переопределяет значение переполнения. Это означает, что даже если для столбца задано переполнение, они не будут видны для столбцов с накоплением (если область просмотра ниже точки останова).
Если вам нужно другое поведение, то =ste точка останова vbbaleu до низкого уровня (так что она не будет вызвана) и реализовать точку останова с пользовательскими значениями переполнения.

Расширенный макет сетки

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

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

Используйте разное количество столбцов в контрольных точках.
Также можно скрыть столбцы в контрольных точках.

Новое в WYSIWYG Web Builder 14 для Сетки макета (Layout Grid) —
— добавлена поддержка фонового наложения на столбцы сетки. (background overlay)
— добавлена поддержка семантических тегов HTML5.
— Добавление свойств дополнения к колонкам. Дополнение отзывчиво.
— Добавлены свойства границы к колонкам. Это позволяет формировать границу для каждой колонки. Свойства границы отзывчивы.
— добавлена возможность сделать макет сетки в полноэкранном режиме: Высота столбца — >100vh (100% от высоты окна просмотра).
— Добавлена поддержка ‘Расположению сетки CSS’ (‘CSS Grid Layout’ ) ( в дополнение к Bootstrap и Flexbox).

Новое в WYSIWYG Web Builder 15 для Сетки макета
— Новая функция: добавлены режимы «Нижний колонтитул (фиксированный)» и «Нижний колонтитул (плавающий)». Это позволяет использовать сетку макета в качестве (фиксированного) нижнего колонтитула. Это также работает с мастер-страницами.
— Новая функция: добавлен режим «Липкий». Липкая Сетка Макетов обрабатывается как относительно позиционированный элемент до тех пор, пока он не достигнет вершины, после чего он прилипнет к вершине. Это стандартная функция HTML, которая работает только в современных браузерах (не в IE / Edge).
— Новая функция: добавлено «наложение шаблона». Добавьте полупрозрачные наложения на фоновое изображение / видео.

Новое в WYSIWYG Web Builder 16 для Сетки макета
Сетка макета (Layout Grid) — Новые функции: добавлено «растяжение» (stretch) для параметров вертикального выравнивания, добавлено несколько дополнительных параметров высоты столбца, добавлено свойство «Order» и другое.
Подробнее

У объектов, которые являются частью сетки расположения, не будет неподвижного положения. Они будут ‘плавать’ в колонке.

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

Добавление изображений
Изображения, которые являются частью сетки, могут или быть отзывчивыми (приспосабливаться к размеру колонки), или быть установленного размера. Это устанавливается в свойствах изображения — «Полная ширина’ (Full width’). Этот выбор доступен, если изображение — часть Сетки Расположения!

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

Добавление видео (YouTube/Vimeo/HTML5)
Точно так же как изображения, видео могут также быть отзывчивыми или установленного размера. Однако в отличие от изображений, браузер не может автоматически определить формат изображения видео. Определяя формат изображения в редакторе, видео будет отзывчиво, поддерживая определенный формат изображения!

Добавление других объектов
У различных объектов есть различное поведение в сетке расположения. Некоторые объекты гибки, таким образом они используют полную ширину колонки, в то время как у других есть неподвижный размер (не зависящий от ширины колонки).
Примеры ‘гибких’ объектов:
• Текст
• Фотогалерея
• Горизонтальная Линия
• Рамка (Inline Frame)
• Блог
• Элементы веб-формы — область Form input, editbox, combobox, область текста.
• формы Логина
• Ленты новостей (News Feed Ticker)

Примеры ‘неподвижных’ объектов:
• Графические формы и другие инструменты рисунка
• Кнопки
• Навигационные объекты

Некоторые объекты не могут быть частью сетки расположения, потому что они не могут быть расширены автоматически. Например:
• Слои (Layers)
• Веб-формы
• Вкладки
• Аккордеон.
Это поведение может измениться в будущих обновлениях.

Хотя Вы не можете расположить веб-форму в сетке расположения, сама сетка может быть формой! Чтобы облегчить создавать форму в сетке, Вы можете формировать сетку непосредственно как форму.

Видимость объектов при адаптивном дизайне

В меню Edit имеется опция Include Visibility (Включить видимость).
Данная опция добавлена в последних версиях редактора и доступна только для создания адаптивного веб-дизайна.

В адаптивном веб-дизайне программное обеспечение автоматически генерирует код для управления положением, размером и видимостью объектов (с помощью запросов CSS3 media).

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

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

Обратите внимание, что если включить видимость не активна, то объект будет иметь одинаковое состояние видимости во всех точках останова (Контрольных точках).

Flexbox

Модель flexbox — это новый режим макета CSS, который представляет мощный способ вставить, выровнять и распределить объекты. Адаптируемый блок состоит из контейнеры Flex и Flex пользования.
Гибкие объекты внутри контейнера Flex можно укладывать горизонтально или вертикально, выравнивать и располагать различными способами. Можно также растянуть или сжать объекты, чтобы заполнить пустые пространства.
Помимо настройки в контейнер, каждый объект также имеет свои параметры, используя меню -> Arrange -> Flexbox (меню -> упорядочить -> адаптируемые блоки).

Чтобы начать работу,а вам нужно добавить контейнер на страницу. Это работает так же, как слой или макет сетки, просто перетащите объект в контейнер.
Посмотреть пример:
http://www.wysiwygwebbuilder.com/support/flexbox.html

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

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

Система Flex-свойства Direction указывает направление гибких элементов внутри контейнера Flex.
В свойствах контейнера Flex вы можете контролировать то, как элементы внутри контейнера выровнены/распределены.
Подробнее (англ. язык)

Card (Карта) представляет собой легкий и гибкий контейнер содержимого. Он включает в себя опции для верхних и нижних колонтитулов, широкий спектр контента, стилей и мощных вариантов отображения.
Объект карты был вдохновлен компонентом карты V4 Bootstrap.
Подробнее о Card

Источник