Содержание
Введение
Основные шаги
Настройки
WYSIWYG Web Builder
Интерфейс
Сайт
Страницы
Объекты
Расширения
События
Глобальная замена
Слои (уровни)
Поиск ошибок
Использование искусственного
интеллекта
Оптимизация сайта (SEO)
Администрирование
CMS
Предварительный просмотр
Публикация
Новое в последних версиях
Сотрудничество
|
Сайты для разных экранов
Применяемые технологии для
создания мобильных страниц
Создание веб-страниц для маленьких экранов мобильных телефонов
имеет свои особенности по сравнению с созданием страниц для больших
экранов.
См. Сайты для разных экранов.
У WYSIWYG Web Builder есть встроенный проектировщик для мобильных
web-страниц.
При создании сайтов для разных экранов (адаптивных сайтов) в WYSIWYG
Web Builder используются технологии jQuery Mobile, jQuery UI и
Bootstrap.
Для доступа к функциям и объектам адаптивных сайтов используйте Панель вставок
(Toolbox) - раздел jQuery
UI / Bootstrap.
jQuery Mobile -
веб-фреймворк.
jQuery
Mobile представляет
из себя систему на основе HTML5, предназначенную для создания
адаптивных веб-сайтов и приложений, доступных на всех смартфонах,
планшетах и настольных устройствах.
jQuery Mobile включает в
себя ThemeRoller для
мобильных устройств
Подробнее
о jQuery Mobile
Страница jQuery Mobile
jQuery UI — библиотека
JavaScript.
jQuery UI является частью проекта
jQuery. Построена поверх главной библиотеки jQuery и
предоставляет
разработчику упрощенный доступ к её функциям взаимодействия, анимации и
эффектов, а также набор виджетов.
Страница
jQuery UI
Bootstrap
Bootstrap
- фреймворк, может
применяться для быстрой разметки веб-страниц. Настраиваемая структура
(каркас) веб-страницы создается с применением сетки, основное
назначение которой - создание сайтов для разных экранов.. Компановка
страниц
из блоков. Применение шаблонов. При создании кода
используются HTML, CSS и Javascript.
Подробнее о Bootstrap
В чем разница между Bootstrap и пользовательским интерфейсом jQuery?
Bootstrap — это современная платформа пользовательского интерфейса,
основанная на функциях современного браузера.
JQuery UI — это более старый фреймворк пользовательского интерфейса,
основанный на Javascript, использующий темы. Подробнее
Веб-страницы для больших экранов создаются путем размещения объектов на
странице перетаскиванием. Каждый объект занимает свою определенную
позицию и имеет строго установленный размер.
Мобильные объекты должны
корректироваться в зависимости от ширины экрана. По
умолчанию все объекты помещены друг рядом с другом (они являются
плавающими в документе), но есть также макет полосы, когда объекты
располагаются в таблице (в строках и столбцах).
В отличие от стандартной страницы, все 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, тогда Вы
можете также видеть переходы по разным страницам.
Примечание:
WYSIWYG Web Builder также
поддерживает Responsive Web Design
- Чувствительный Web-дизайн, где Вы можете проектировать
различные схемы размещения в пределах той же самой страницы.
Чувствительный 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".
Примечание:
При использовании в интерфейсе ленты используйте вкладку ленты Page - Responsive Web Design
Add Breakpoint - Добавить
контрольную точку
Breakpoints -
Контрольные точки
Manage Breakpoints -
Диспетчер контрольных точек
Различные варианты размещения совместно используют одинаковый набор
элементов на странице (текст, изображения и т.д), и Вы можете изменить
позицию и
размер объекта для каждой контрольной точки.
Вы можете также добавить
уникальное информационное наполнение для определенных размеров экрана,
которое позволяет, например, скрыть некоторые объекты на меньшем
экране.
Следующие
объекты не чувствительны; это означает, что у них не может быть
разных размеров в контрольных точках:
- Banner
- Curve -Кривая
- Curved Text - Криволинейный текст
- Line -Линия
- Navigation
Bar - Навигационная панель (в последних версиях WYSIWYG Web Builder
имеется возможность создавать разные панели навигации для экранов
разных размеров - см. Новое в WYSIWYG Web
Builder 14)
- Объект OLE
- Polygon -Многоугольник
- Shape - Графическая форма
- Table - Таблица
- Text Art - Художественный текст
- Wrapping Text - Обертывание текста
Если Вы хотите использовать эти объекты в мобильной версии, то Вы
должны создать отдельные копии объектов для разных контрольных точек.
 Новое: Для использования контрольных точек
добавлены
новые функции - Подробнее.
- добавлено Font Family ("семейство шрифтов")
и Font Size("размер шрифта") в диалоговом окне свойств Сетки расположения . Это можно
использовать для установки шрифта текстового
объекта при использовании адаптивных шрифтов.
 Добавлена функция «требуется проверка». При
использовании точек останова изменения в одном представлении могут
также повлиять на макет в других точках останова. Например, если вы
добавили новый объект, вам может потребоваться изменить размер или
положение в другой точке останова. WYSIWYG Web Builder теперь
показывает значок «требует проверки» для этих контрольных точек, чтобы
напомнить вам об этом. Кроме того, менеджер сайта может отображать
список страниц, на которых необходимо просмотреть одну или несколько
контрольных точек. Как только вы переключите точку останова, состояние
«требует проверки» будет очищено.
 Новое для гибких
контейнеров (Flex Container) - Улучшена реализация адаптивной
высоты. И другое. Подробнее
Примечания о чувствительном
Web-дизайне
У объектов могут быть различный размер, позиция и видимость
в контрольных точках. Однако все другие свойства будут точно тем же
самым! Например, если Вы измените цвет объекта, тогда он будет
изменен во всех контрольных точках (потому что объект используется
между
всеми обозрениями).
Хотя у объектов могут быть различные размеры в контрольных точках, есть
несколько исключений. Например у форм и других инструментальных средств
рисования будет тот же самый размер во всех контрольных точках.
Причина этого - то, что только одно изображение будет
опубликовано. И если
бы Вы изменили размер изображения в одной контрольной точке,
тогда это выглядело бы искаженным в другой контрольной точке.
Но Вы
можете использовать множественные формы, одну для каждой контрольной
точки, и скрыть те, которые используете в других контрольных точках.
Если Вы совместно используете текст между множественными контрольными
точками, тогда устанавите ''output format' (выходной формат) в опции
совместимости к ''Default', потому что другие
опции оптимизируют текст для определенной ширины.
Если Вы действительно
должны использовать одну из опций совместимости, тогда рассмотрите
использование отдельного текстового объекта для каждой контрольной
точки. Таким образом текст может быть оптимизирован для той
определенной
ширины.
Объекты могут быть частью одного Уровня (Form, Carousel,
Tabs, Accordion, Dialog). Так, если Вы перемещаете объект в
уровене в одной контрольной точке, тогда, это автоматически будет частю
того же самого уровня в других контрольных точках!
Если Вы добавите новый объект к контрольной точке, то это будет
первоначально скрыто во всех других контрольных точках. Вы можете
использовать Менеджера
объектов (Object Manager), чтобы показать
скрытые строки или столбцы, если Вы также хотите видеть это на других
контрольных точках.
Если Вы удалите объект из контрольной точки, тогда он будет удален из
всех других обозрений также. Если Вы хотите скрыть объект, Вы
можете использовать Менеджера объектов .
Вы можете проверить контрольные точки в своем настольном браузере.
Измените размеры окна браузера, чтобы активизировать контрольные точки.
Некоторые браузеры также имеют инструментальные средства для того,
чтобы проверить чувствительные вебсайты. Например, у FireFox есть Responsive Design View -
"Чувствительный режим конструктора",
который может проверить контрольные точки.
Консультируйтесь с документацией браузера для большего количества
подробностей.
Браузеры, которые не поддерживают запросы носителей CSS3, отобразят
заданную по умолчанию схему размещения.
Подробнее о создании отзывчивого дизайна:
http://www.wysiwygwebbuilder.com/responsivewebdesign.html
Менеджер тем для мобильных
телефонов
 Менеджер тем для мобильных телефонов (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.
У большинства объектов теперь могут быть различные шрифты в контрольных
точках. У большинства объектов могут также быть различные фоны и цвета
текста. У некоторых объектов (фотогалерея, текст и блог) могут иметь
различные колонки в контрольных точках.
 Новая функция: добавлена опция 'CSS in
media query' ("CSS
в медиа-запросе"). Это позволяет
добавлять определенные CSS-стили точек останова ( Контрольных точек). Это может быть
полезно, если вам нужны разные стили в Контрольных
точках.
 Новая функция:
добавлена возможность устанавливать размер шрифта по
умолчанию для каждой точки останова (в «Управление точками останова»).
- Новая функция: добавлена опция «Точки останова по умолчанию»
(Инструменты-> Параметры-> Общие -
Tools->Options->General) для настройки точек останова по
умолчанию (и размеров шрифта) для новых страниц. Также можно установить
значение по умолчанию для «Активировать точки останова, когда окно
браузера меньше / больше ширины устройства».
Отзывчивый фон
Отзывчивый фон Responsive background styles (цвет,
изображение) появился в WYSIWYG Web Builder 11 и применяется к
страницам. Вы можете определить различные свойства фона для
контрольных точек. Таким образом у мобильного расположения могут быть
другими фоновый цвет или изображение.
Посмотреть
пример (измените ширину окна браузера)
Сетка расположения (Layout Grid)
Новое - Сетка расположения (или сетка макета
- Layout Grid)
может использоваться, чтобы создать колонки, которые автоматически
приспосабливаются к размеру экрана. У сетки может быть до 12 колонок, с
размерами в процентах. Объекты, которые вставлены в ячейки сетки,
автоматически станут плавающими. Это - новый способ создать гибкие и
отзывчивые расположения!
Примечание:
применение сеток для создания отзывчивого дизайна есть и в других
веб-редакторах, например
Responsive Layout
Maker.
Много объектов редактора были спроектированы заново, чтобы использовать
в сетку расположения. Например, если изображение будут помещены в сетку
расположения, то они автоматически станут отзывчивыми, т.е. будут
заполнять всю ячейку сетки. Текст или видео YouTube будут всегда
использовать полную ширину ячейки сетки и сохранять соотношение сторон
как 16:9 или 4:3.
В сетку можно поместить также колонтитулы / нижние сноски, использовать
слои и Карусель.
Примечания:
1. Не используйте Center in browser
window (по центру в окне браузера) в комбинации с сетками
расположения. Этот выбор должен использоваться только для
'неподвижного' содержания.
2. Вы не можете изменить размер или положение сетки расположения.
Размер сетки зависит от своего содержания.
Чтобы вставить дополнительную колонку, щелкните кнопкой 'Add'. Ширина
колонок может быть приспособлена при перемещении маркеров между
колонками.
Чтобы удалить колонку, сначала выберите ее и затем щелкните Remove.
У каждой колонки может быть свое собственное выравнивание. Чтобы
изменить выравнивание, щелкните колонкой и затем выберите выравнивание.
Расположение (Layout)
Сетка может создаваться как постоянная или с "жидким" расположением.
Жидкая сетка использует полную ширину окна браузера, и все колонки
будут изменяться соответственно.
Дополнение (Padding)
Дополнение определяет ширину краев на каждой стороне колонки.
Контрольная точка (Breakpoint) определяет, когда расположение будет
переключено к мобильному/сложенному расположению.
Добавление объектов - просто тяните и отпустите объект в колонке.
Отметьте, что курсор мыши должен быть в колонке.
См. также
Разделители
Новое для Layout Grid (Сетки макета)
Несколько новых
функций для макета сетки.
Если Вы не знакомы с основами функций макета сетки, то прочитайте
сначала эти обзоры:
http://www.wysiwygwebbuilder.com/layoutgrid_part1.html
http://www.wysiwygwebbuilder.com/layoutgrid_part2.html
- Улучшено: gutter, отступы и поля теперь реагируют, поэтому они
могут иметь разные значения в точках останова.
- Новая функция: добавлена опция наложения фона (background
overlay). При этом используется указанный цвет фона (и Альфа-значение)
для добавления и наложения на фоновое изображение.
- Новая функция: добавлена возможность использовать видео в качестве
фона. Поддерживаются URL-адреса Youtube и Vimeo.
- Новая функция: добавлена опция 'Use Flexbox' ("использовать
Flexbox"). Если этот параметр включен, сетка будет использовать макет
CSS flexbox. Это приводит к более чистому коду, а также включает
некоторые дополнительные функции, такие как вертикальное выравнивание,
и весь столбец будет заполнен фоном.
Обратите внимание, что это относительно новая функция CSS, она не
поддерживается старыми браузерами (< IE11). http://caniuse.com/#feat=flexbox
- Новая функция: различные ширины столбцов в точках останова
- Новая функция: различные счетчики столбцов в точке останова
- Новая функция: добавлена возможность скрывать столбцы в точках
останова.
- Новая функция: добавлена опция 'overflow' ("переполнение"). Это
определяет, что произойдет, если столбцы не поместятся в текущей
строке. Столбцы переполнения могут быть скрыты, иметь 100% или иметь
пользовательское значение.
- Новая функция: добавлена опция вертикального выравнивания столбцов.
Обратите внимание, это работает только при использовании CSS.
- Новая функция: добавлена возможность установить сетку макета
фиксированной в верхней части страницы.
Примечание:
значение точки останова переопределяет значение переполнения. Это
означает, что даже если для столбца задано переполнение, они не будут
видны для столбцов с накоплением (если область просмотра ниже точки
останова).
Если вам нужно другое
поведение, то =ste точка останова vbbaleu до низкого уровня (так что
она не будет вызвана) и реализовать точку останова с пользовательскими
значениями переполнения.
Расширенный макет сетки
Переполнение
Когда у вас разное количество
столбцов в контрольных точках, то вам
будет нужно сообщить программе, что делать со столбцами, которые не
вписываются в один ряд.
Подробнее
(англ. язык)
Новые функции для сетки макета (Layout Grid):
- добавлена поддержка
фонового наложения на столбцы
сетки. (background overlay)
- добавлена поддержка семантических тегов HTML5.
- Добавление свойств дополнения к колонкам.
Дополнение отзывчиво.
- Добавлены свойства границы к колонкам. Это
позволяет формировать границу для каждой колонки. Свойства границы
отзывчивы.
- добавлена возможность сделать макет сетки в
полноэкранном режиме: Высота столбца - >100vh (100% от высоты окна
просмотра).
- Добавлена поддержка 'Расположению сетки CSS'
('CSS Grid Layout' ) ( в дополнение к Bootstrap и Flexbox).
 Новая функция для сетки макета - добавлены режимы «Нижний
колонтитул (фиксированный)» и
«Нижний колонтитул (плавающий)». Это позволяет использовать сетку
макета в качестве (фиксированного) нижнего колонтитула. Это также
работает с мастер-страницами.
- Новая функция: добавлен режим «Липкий». Липкая Сетка Макетов
обрабатывается как относительно позиционированный элемент до тех пор,
пока он не достигнет вершины, после чего он прилипнет к вершине. Это
стандартная функция HTML, которая работает только в современных
браузерах (не в IE / Edge).
- Новая функция: добавлено «наложение шаблона». Добавьте полупрозрачные
наложения на фоновое изображение / видео.
Новая функция для сетки макета (Layout
Grid) - добавлено «растяжение»
(stretch) для параметров вертикального выравнивания, добавлено
несколько дополнительных параметров высоты столбца, добавлено свойство
"Order" и другое.
Подробнее
Новая функция для сетки макета (
Layout Grid) - добавлено свойство «Фиксированная ширина» для
столбцов. Это позволяет задать фиксированную ширину одному или
нескольким столбцам сетки. Это свойство является адаптивным, поэтому
оно может отличаться в точках останова.
Новое для Сетки макета: теперь можно
установить левое и правое поле сетки макета, добавлена поддержка
закругленных углови др. Подробнее
Вставка объектов
У объектов, которые являются частью сетки расположения, не будет
неподвижного положения. Они будут 'плавать' в колонке.
Добавление текста
Когда текст будет добавлен к сетке расположения, он будет автоматически
использовать полную ширину колонки. Так, если Вы изменяете размеры
ширины страницы, динамически приспособится текст.
Добавление изображений
Изображения, которые являются частью сетки, могут или быть отзывчивыми
(приспосабливаться к размеру колонки), или быть установленного размера.
Это устанавливается в свойствах изображения - "Полная ширина' (Full
width'). Этот выбор доступен, если изображение - часть Сетки
Расположения!
Максимальная ширина определяет максимальный размер изображения, когда
это установлено в полную ширину. Это препятствует тому, чтобы
изображение стало слишком большим в отзывчивых расположениях.
Примечание: Выбор полной ширины
также доступен для Rollover Image
и слайдов (SlideShow).
Добавление видео
(YouTube/Vimeo/HTML5)
Точно так же как изображения, видео могут также быть отзывчивыми или
установленного размера. Однако в отличие от изображений, браузер не
может автоматически определить формат изображения видео. Определяя
формат изображения в редакторе, видео будет отзывчиво, поддерживая
определенный формат изображения!
Добавление других объектов
У различных объектов есть различное поведение в сетке расположения.
Некоторые объекты гибки, таким образом они используют полную ширину
колонки, в то время как у других есть неподвижный размер (не зависящий
от ширины колонки).
Примеры 'гибких' объектов:
• Текст
• Фотогалерея
• Горизонтальная Линия
• Рамка (Inline Frame)
• Блог
• Элементы веб-формы - область Form input, editbox, combobox, область
текста.
• формы Логина
• Ленты новостей (News Feed Ticker)
Примеры 'неподвижных' объектов:
• Графические формы и другие инструменты рисунка
• Кнопки
• Навигационные объекты
Некоторые объекты не могут быть частью сетки расположения, потому что
они не могут быть расширены автоматически. Например:
• Слои (Layers)
• Веб-формы
• Вкладки
• Аккордеон.
Это поведение может измениться в будущих обновлениях.
Хотя Вы не можете расположить веб-форму в сетке расположения, сама
сетка может быть формой! Чтобы облегчить создавать форму в сетке, Вы
можете формировать сетку непосредственно как форму.
См. также Responsive Menu
Посмотреть
пример применения сетки расположения (измените ширину окна
браузера)
См. Подробнее
об отзывчивой сетке (англ. язык)
Видимость объектов при адаптивном
дизайне
В меню Edit
имеется опция Include Visibility
(Включить видимость).
Данная опция добавлена в последних версиях редактора и доступна только
для создания адаптивного веб-дизайна.
В адаптивном веб-дизайне программное обеспечение автоматически
генерирует код для управления положением, размером и видимостью
объектов (с помощью запросов CSS3 media).
Однако в некоторых случаях управление видимостью может конфликтовать с
другими объектами на странице (например, событиями, которые показывают
или скрывают объекты).
Этот параметр позволяет исключить атрибут видимости из запроса
носителя, чтобы он не влиял на состояние объекта при использовании
событий.
Обратите внимание, что если включить видимость не активна, то объект
будет иметь одинаковое состояние видимости во всех точках останова (Контрольных точках).
Flex Grid
Flex Grid — это новый способ создания гибких макетов на основе CSS Grid
Layout (https://www.w3schools.com/css/css_grid.asp).
Сетка CSS позволяет веб-разработчикам более легко и единообразно
создавать сложные адаптивные веб-макеты в браузерах.
Подробнее
о Flex Grid
Flexbox
Модель flexbox - это новый режим макета CSS,
который представляет
мощный
способ вставить, выровнять и распределить объекты. Адаптируемый блок
состоит из контейнеры Flex и Flex пользования.
Гибкие объекты внутри контейнера Flex можно укладывать
горизонтально или вертикально, выравнивать и располагать
различными способами. Можно также растянуть или сжать объекты, чтобы
заполнить пустые пространства.
Помимо настройки в контейнер, каждый
объект также имеет свои параметры, используя меню Arrange -> Flexbox
См. также
Разделители
Подробнее
о 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 (Карта)
Card (Карта) представляет собой легкий и гибкий контейнер
содержимого.
Он включает в себя опции для верхних и нижних колонтитулов, широкий
спектр контента, стилей и мощных вариантов отображения.
Объект карты был вдохновлен компонентом карты V4 Bootstrap.
Подробнее о
Card
Раздел (Section)
Раздел (section) — это адаптивный, автономный контейнер макета. Разделы
работают так же, как и карты, но основное отличие состоит в том, что
элементы можно свободно располагать (наслаивать).
Автономность означает, что все элементы раздела встроены в сам объект
раздела, а не являются отдельными элементами (в отличие от слоев и
сеток макета). Это упрощает раздел и добавляет множество мощных опций,
которые обычно было бы сложно реализовать.
Например, гибкие (и масштабируемые) перекрывающиеся элементы. Эффекты
параллакса для нескольких элементов в сетках макета. Синхронизированные
переходы. Различные выравнивания/привязки элемента в одном контейнере и
многое другое.
Для создания раздела используйте Панель вставок
(Toolbox) - раздел Layout - Section
Новое для Section
(Раздел) - Функция "Раздел" для создания блоков контента. Раздел
работает так же,
как и Card (Карта),
но основное отличие состоит в том, что элементы можно
позиционировать (наслаивать). Подробнее
 Новое для Section
(Раздела) Добавлена возможность добавлять ссылки к тексту и
фигурам. Добавлена функция электронной коммерции
Дополнительные справочные
материалы
Связанные обучающие программы:
http://www.wysiwygwebbuilder.com/anchored_layers.html
http://www.wysiwygwebbuilder.com/floating_layers.html
Вы можете рассмотреть оперативную демонстрационную версию здесь
(измените ширину окна просмотра браузера):
http://www.wysiwygwebbuilder.com/support/anchoredlayer/
Загрузите демонстрационный проект:
http://www.wysiwygwebbuilder.com/support/anchoredlayer/anchoredlayer.zip
Примечание:
WYSIWYG Web Builder в режиме создания мобильных страниц может работать
не очень надежно.
См. также по Адаптивномувеб-дизайну (англ. язык)
Доступные расширения:
jQuery
Masonry
Расширение
jQuery Masonry позволяет создавать макеты, которые динамически
адаптируются к размеру экрана (адаптивный макет).
См. jQuery
Masonry
Видео-обзор
по созданию сайтов для разных экранов
Последнее обновление:
январь
2024 г.
|
