|
|||||||
Содержание
Введение |
ИзображенияСм. также: Изображения - Введение Вставка изображения Для вставки изображения используйте один и вариантов:
 В зависимости от метода вставки или растяните рамку для изображения в окне редактирования, или просто щелкните по значку изображения  на Панели вставок
и перетащите его
в Окно редактирования.Размер рамки не имеет значения; редактор автоматически скорректирует размер рамки в соответствии с размером изображения. Выберите изображение на своем компьютере. Местоположение изображения не имеет значения - при публикации сайта WYSIWYG Web Builder создаст копию изображения и поместить эту копию в папке проекта (папка изображений проекта определяется в меню Tools -> Options -> Folders -> Make a copy of images). Установите изображение на странице, перемещая его мышкой. Размеры изображения можно предварительно настроить, потянув мышкой за рамку изображения в районе маркеров. При работе с изображениями применяются те же приемы, что и при работе с прочими объектами - см. Работа с объектами  WYSIWYG Web Builder 19 имеет встроенную
поддержку создания и улучшения изображений с использованием Искусственного
интеллекта
(AI). Создавайте новые изображения на основе ввода текста, создавайте
варианты существующих изображений и улучшайте изображения, используя
методы рисования. Вы можете указать желаемые изменения, такие как
добавление объектов, замена содержимого экрана или изменение причесок.
Расширьте изображения за пределы их исходных границ, предоставив
описания желаемых изменений. Или воспользуйтесь инструментом «Удалить
фон», чтобы легко создавать изображения с прозрачным фоном, позволяющим
вашим визуальным элементам плавно сочетаться с различными фонами и
макетами.См. также Добавление изображения на веб-страницу (англ. язык) Новое
для Image (изображение) - Новая экспериментальная функция, AI Vision
может распознавать, что находится на изображении, и позволяет вам
задавать вопросы. Также может использоваться для извлечения текста или
перевода текста с изображения на другой язык. Добавлена команда
«Заменить изображение». К выбранному изображению добавлен значок
быстрого меню. И другие улучшения. ПодробнееСвойства изображения Чтобы открыть свойства изображения, щелкните правой кнопкой по изображению, в контекстном меню выберите Properties (или просто дважды щелкните по изображению).  В окне свойств изображения Image (или Image Properties) определите свойства: Вкладка General Filename - Имя файла: введите путь и имя файла изображения или щелкните по обзору, чтобы найти изображение на Вашем местном диске. Примечания:
Когда Вы издадите страницу, изображение будет автоматически скопировано в папку, определенную в настройках (Tools -> Options -> Publish -> Images Sub Folder). Вы можете также определить абсолютный адрес изображения по типу: https://www.paypalobjects.com/en_US/i/logo/paypal_logo.gif Чтобы сделать (резервную) копию изображений, используемых в Вашей странице, используйте меню Tools -> Options -> Folders -> Make a copy of images. Это скопирует все изображения к указанной папке, таким образом они все будут сохранены в одном месте. Это также предотвращает дублирование файлов. Новое:
Retina
Image
 Вы можете
определить (дополнительную) версию с высокой разрешающей способностью
изображения. Если вариант с высокой разрешающей способностью будет
определен, то подлинник будет добавлен. Full
width - новое
Добавлена опция в Свойствах изображения
‘Полная ширина’ (Full width). которая определяет, является ли
изображение полной шириной (отзывчивой) в ее контейнере (сетке
расположения). Если выбрано false,
изображение использует неподвижный размер. Примечание: Этот выбор доступен только тогда, когда изображение - часть Сетки расположения. Новое: Добавлена опция ‘Максимальная ширина’
(Maximum width). Определяет максимальный размер изображения,
когда это установлено в полную ширину. Это препятствует тому, чтобы
изображение стало слишком большим при применении чувствительного Web-дизайна.Примечание: Этот выбор доступен только тогда, когда изображение - часть Сетки расположения . Alternate text - Этот обычно короткое описание изображения, появляется вместо объекта в браузере, когда отключено отображение изображений при медленных соединениях. Title - Заголовок - отражается при наведении курсора на изображение Border style - Стиль границы - Dotted (пунктирная), Dashed (подчеркнутая шриховая), Solid (сплошная), Double (двойная) и другое.  Новое: Тень Коробки (Box Shadow)- Новая функция: добавлена поддержка типа тени: inset. Это изменяет тень от внешней тени (начало) к внутренней тени.  Новое для Линии/Баннера
- Добавлено свойство «предопределенный стиль» в разделе «Стиль». Подробнее Fit to layout rectangle - выбор, если Вы хотите вручную определить размер изображения. Border width (Border size) - Определяет толщину границы вокруг изображения (Выбор 0 - нет границ). Border color - Цвет границы Border radius - Радиус закругления углов границы Примечание:
Если Вы примените какие-нибудь зеркальные эффекты (как отражение, тень, подрезка и т.д), то радиус границы больше не будет работать в браузере! Reflection - Отражение Opacity - Непрозрачность. Измените прозрачность (0 - 100 %) изображения. Frame style - выбор стиля рамки. Вы можете легко добавить свои собственные стили рамки (формата gif, jpg или png), скопировав их в папку My Documents\WYSIWYG Web Builder\system\gallery\yourstyle\. Auto thumbnail - Авто эскиз Используйте эту опцию, чтобы быстро создать уменьшенную версию изображения. Гиперссылка к оригинальному полноразмерному изображению будет добавлена. В меню Edit имеется опция Restore Original Size - Восстановите оригинальный размер. Эта опция имеется в последних
версиях редактора и может использоваться для восстановления исходного
размера изображения или объекта flash.
Вкладка EffectsWYSIWYG Web Builder позволяет применить к изображению множество различных эффектов. Enable Shadow - Определяет, позволить ли теневой эффект. Shadow Offset X и Y - Теневое погашение X по горизонтали, Y - по вертикали Shadow Opacity - Непрозрачности тени. Shadow Color - Определяет цвет тени Shadow Blur- Смягчение теневого пятна по краям Use CSS3 box - shadow -Используйте тень CSS3. Этот выбор требует современного браузера с поддержкой CSS3! Rotation -Вращение изображения Available effects are - Доступные эффекты: акварель, размытие, чеканка, гравировка, импрессионизм, живопись, карандаш, рябь, текстура и др. Вы можете применить многократные эффекты к изображению. Эффекты являются неразрушающими, что означает, что они не применены к оригинальному изображению. Копия оригинального изображения будет издана к Вашему вебсайту, используя уникальное имя (.png формат). Не добавляйте слишком много эффектов к изображениям. Это увеличит время загрузки изображения. Не применяйте эффекты к очень большим изображениям! Resample - может использоваться, чтобы уменьшить размер изданного изображения и поэтому может увеличить загружающую скорость Вашего вебсайта (при этом снижается качество).. Вкладка Link - Ссылка - См. Ссылки Вкладка Events - События - см. События Вкладка Watermark Инструмент Watermark (водяные знаки) позволяет Вам быстро и легко защищать Ваши изображения путем нанесения на изображение текста и других отличительных знаков. Type - Определяет тип водяных знаков. None - Инструмент водяных знаков будет заблокирован. Standard - Текст будет вставлен вверху Inverted - Эффект отметки уровня воды будет инвертирован. Embossed - Эта опция будет использовать чеканящийся эффект для текста. Text - Ввод текста Font Type - Тип Шрифта Style - Стиль шрифта - Полужирный, Курсив Font Size - Размер Шрифта Color - Цвет текста Opacity - Непрозрачность текста Выравнивание текста: Horizontal - Горизонтальное Выравнивание текста Vertical - Вертикальное выравнивание текста Repeat Text - Повторите Текст на изображение Новое
для Форма/Картинка/Текст/Многоугольник/Кривая - добавлена новая опция
размера фона «обложка» - cover (в дополнение к «плиткам» и
«растягиванию»). ПодробнееНовое - Shape Dividers. Добавлена поддержка фона изображения, текстуры, градиентов и узоров. Подробнее Добавлена возможность применять фигуру к изображению (с использованием CSS). Добавлена возможность применять к рисунку трафарет/маску. И другое. Подробнее Панель инструментов изображений  1. Rotate - Поворот изображения с шагом 90 градусов 2. Flip - Зеркальное отражение вертикальное или горизонтальное 3. Contrast - Контраст 4. Brightness - Яркость 5. Hue/Saturation - Корректируйте оттенок или насыщенность изображения. 6. Set Transparent Color - Выбранный Прозрачный Цвет. Вы можете создать прозрачную область в большинстве изображений (кроме анимационного GIF-изображения). Выделите изображение, в котором Вы хотите создать прозрачные области. На панели инструментов изображения или меню щелкните Set Transparent Color'.В изображении щелкните цветом, который Вы хотите сделать прозрачным. Изображение будет преобразовано к формату PNG и будет издано с другим названием. 7. Crop - обрезка изображения - удаление ненужных частей путем перетаскивания рамки за маркеры. Второй щелчок по Crop - удаление обрезанных частей. 8. Resample - изменение числа пикселей в изображении для снижения веса файла 9. Slice - Нарезка изображения на части (для ускорения загрузки и с целью воспрепятствовать копированию изображения). 10. Add/Replace stencil - Добавьте/замените трафарет - способ изменить появление Ваших изображений. 11. Frame - Выбор рамки 12. Add/Replace Shape - Добавьте/замените фигуру - Изображение заполняет выбранную фигуру 13. Image Effects - Применение эффекта Использование ленты Для WYSIWYG Web Builder 9 и 10 настройки изображения сгруппированы на Ленте 
Изменение размеров изображения Чтобы изменить размеры изображения тянут границы (маркеры) объекта изображения.  Вращение изображения Для вращения изображения используйте команду Rotate на Ленте.
Рисование Для рисования используйте меню Insert - Drawing - Drawing Можно нарисовать кривую (Curve), замкнутую кривую (Curve Closed), Изогнутый текст (Curved Text), Линию (Line), многоугольник (Polygon), каракули (Scribble), создать изменение формы (Morphing Shape), Новое для Многоугольник / Кривая / Линия /
КаракулиДобавлен формат вывода «CSS». Подробнее Новое: объект «Многоугольник/Кривая» может быть частью Сетки расположения. Если для вывода выбран формат SVG или CSS, многоугольник/кривая также адаптивны и масштабируемы. Подробнее Добавлена новая опция размера фона «обложка» - cover (в дополнение к «плиткам» и «растягиванию»). Подробнее Добавлена поддержка фона изображения, текстуры, градиентов и узоров. Подробнее Изображения с эффектом Rollover Изображение и эффектом Rollover (иначе - эффект Одновременного нажатие клавиш) заключается в том, что при наведении курсора (onMouseOver случай) одно изображение заменяется на другое. И возвращается к первоначальному изображению при отведении курсора (onMouseOut случай). Пример изображения с эффектом Rollover Для создания изображения с эффектом Rollover используйте:
Настройки: Initial image - Начальное изображение Mouseover image -Изображение, которое появляется при наведении курсора Alternate text -Альтернативный текст. В некоторых браузерах появляется как ToolTip (всплывающая подсказка), когда Вы перемещаете мышь по изображению. Title -Заголовок. В современных браузерах этот заголовок появляется как ToolTip, когда Вы перемещаете мышь по изображению. Animation - Определяет эффект мультипликации для изображения одновременного нажатия клавиш:
Easing - Ослабление. Мультипликации скольжения также поддерживают ослабление. Вы можете выбрать из больше чем 30 ослабляющихся функций, чтобы управлять процессом мультипликации. Эта опция может использоваться, чтобы (например) создать срыв или упругие эффекты. Link - см. Ссылки Save as Image - Сохраните как Изображение Эта опция может использоваться, чтобы экспортировать изображение, включая все примененные эффекты. Вы можете экспортировать изображение в JPG, формате GIF ИЛИ PNG. Примечание: Объект Themeable
Button
улучшает стандартные кнопки (normal, submit, reset или anchor/link) в
коллекции эталонных кнопок с
соответствующими эффектами "mouseover" (Rollover
Image) и стилями.
 Новая функция: добавлена анимация 'Flip
Horizontal' и 'Flip Vertical'
("отразить по горизонтали" и "отразить по вертикали") (использует
преобразования CSS3). Новое: Ролловер
изображение (Rollover Image) - новые функции: добавлена поддержка
границ, добавлено более 25 новых CSS-анимаций, добавлена возможность
запускать наведение
изображения при нажатии вместо наведения и другое.Подробнее Новое
для Rollover Image - Добавлен режим сравнения. В этом режиме к
изображениям добавляется ползунок сравнения для сравнения изображений
до и после. Подробнее.Новое для Rollover
Image: Добавлен значок быстрого меню для быстрой замены ролловерных
изображений. И другие улучшения.Подробнее Об эффектах В WYSIWYG Web Builder Вы можете применить эффекты к изображениям, не имея необходимость открывать отдельного редактора изображения!  Выделите изображение. Щелкните на Ленте
по кнопке эффектов Некоторые из доступных эффектов: Contrast ( Контраст), Brightness (Яркость), Blur (Пятно), Grayscale (Шкала яркости), Emboss (Чеканка), Negative (Негатив), Sepia (Сепия), Sharpen (Обострение), Soften (Смягчение), Stencils (Трафареты) и больше. 1. Вы можете применить одновременно несколько эффектов к изображению. 2. Эффекты являются неразрушающими, что означает, что они не относятся к оригинальному изображению. Копия оригинального изображения будет издана к Вашему вебсайту, используя уникальное имя (.png формат). 3. Эффекты применены к 'непрерывному' изображению, когда изображения загружаются для редактирования страницы, и в том порядке, как Вы добавили их. Так например, если Вы примените яркость 3 раза, то изображения будут обработаны 3 раза в то время, когда Вы загружаете свою страницу. 4. Запланируйте свои эффекты! Не добавляйте много эффектов к изображениям, это замедлит времена погрузки изображения. 5. Не применяйте эффекты к очень большим изображениям! Чем больше изображение, тем дольше будет обработка изображения перед эффектом (точно так же, как в любом другом редакторе изображения!). Улучшено:
WYSIWYG Web Builder теперь сохраняет исходное имя файла при
использовании
фильтров (вместо создания уникального имени). Вы все еще можете
изменить его с помощью ‘Allocated filenames’ ("выделенных имен
файлов"), если хотите.- Новая функция: добавлен фильтр ‘Color overlay’ ("наложение цвета’) на объект изображения. Часто используется на веб-сайтах для создания эффекта "dim". Почему мои изображения получают другое название при публикации? Когда Вы примените эффекты (вращение, тень, отражение и т.д) или добавляете рамку к изображению, тогда WYSIWYG Web Builder создаст новую версию изображения, чтобы препятствовать тому, чтобы оригинальный файл был записан поверх. Вы можете определить приставку произведенного имени файла в меню Tools -> Options -> Publish. Также в Object Manager (Менеджере объектов) Вы можете рассмотреть и редактировать автоматически произведенные названия через контекстное меню: Право щелкните по объекту в Менеджере объектов и выберите ''Allocated filenames'. ClipArt  ClipArt - Графический
элемент (рисунок). Редактор идет с набором рисунков - используйте Ленту - вкладку Insert - раздел Drawing - ClipArt. Или: используйте Панель вставок (Toolbox) - ClipArt. Создайте рамку в окне редактирования, выберите ClipArt из запасов редактора. При двойном щелчке по вставленному ClipArt открывается окно настроек. Кроме того, Вы можете загрузить из Интернета тысячи бесплатных образцов ClipArt, чтобы использовать их на веб-страницах. Для этого наберите в строке поиска, например, 'free dingbat fonts', чтобы найти большую коллекцию новых графических форм. После того, как Вы загрузили один или более файлов, Вы можете скопировать их к папке 'clipart' - My Documents\WYSIWYG Web Builder\system\clipart\ См. также описание Графического элемента.  Новое: Добавленная поддержка
FontAwesome. Простой способ превратить
изображения FontAwesome в изображения со всеми специальными эффектами,
которые доступны для объекта ClipArt.- Добавленная поддержка Bootstrap’s GlyphIcons Halflings. Этот шрифт не включен по умолчанию, но доступен как свободное добавление: http://wysiwygwebbuilder.com/free_extras.html Text Art  Редактор идет с набором образцов художествено
оформленного текста. Образцы служат шаблонами, которые можно изменить
по своему вкусу.Новая функция: добавлена поддержка Material
Icons, поэтому вы также можете опубликовать новый значок в виде
изображения. Новое: Диалог выбора символа ClipArt.Новые функции: Добавлена поддержка символов «Segoe UI Emoji» в ClipArt (Windows 10). Все поддерживаемые библиотеки значков теперь также можно использовать в ClipArt! Подробнее см. Новое в WYSIWYG Web Builder 15. Новая функция: добавлены категории
«Форма» (Shape0 и «Клякса» ('Blob'). Новые функции для КлипАрт (ClipArt) /
TextArt / Фигура
(Shape)- добавлена возможность использовать видео в качестве фона для фигур, рисунков и текстов. При этом используется clip-path CSS Подробнее о клипирования видео внутри пути. Поддерживаемые видео включают YouTube, Vimeo, Pixabay и видео HTML5 (mp4, webm). См. также Объекты Media. - добавлена опция "Added 'fill rule" (правило заполнения" (нормальное / обратное). Это позволяет создавать «вырезанные» (cutout) фигуры, картинки и текст, где фигура или текст прозрачны, а не фон. - добавлена возможность добавлять отступы к фигуре, клипарту или тексту. Это особенно полезно, когда для правила заливки установлено значение «инверсия» (inverse), поэтому вы можете установить некоторое расстояние вокруг фигуры. Улучшено: объекты ClipArt, TextArt, Shape теперь реагируют, когда выходной формат установлен на SVG. Итак, наконец, фигуры могут иметь разные размеры в контрольных точках даже в фиксированных/абсолютных макетах. Улучшено: Shadow теперь использует собственные фильтры CSS вместо симулированного эффекта. Это улучшает размер, качество и производительность формы. Также изображение/svg остается отзывчивым, а эффект можно анимировать (посредством перехода и анимации). См. также: Новое в WYSIWYG Web Builder 17 для ClipArt / TextArt / Shape и др. Новое для Clip Art /
Text Art: добавлен формат вывода «CSS». Это выведет элемент с clip-path
и SVG. При использовании CSS в качестве вывода границе и фону можно
стилизовать с помощью стилей. ПодробнееГрафические формы (Shape) Редактор идет с большим набором графических форм. Для выбора формы используйте: Преобразование формы (Morphing Shape) может создать анимацию на вашем веб-сайте - см. Анимация. Новое
для Форм - Улучшено: фоновые узоры фигур SVG теперь экспортируются в
векторный формат (вместо изображения), большинство стилей градиентов
теперь имеют достойный запасной вариант для SVG и другое. ПодробнееМорфинг формы Морфинг формы (Morphing Shape) плавно трансформирует две или более фигур, создавая анимацию на вашем веб-сайте. Поддерживаются все встроенные формы, клипарты и библиотеки значков. Вы даже можете переключаться между значками разных библиотек. Для создания морфинга формы используйте Панель вставок (Toolbox) - раздел Drawing - Morphing Shape Анимации могут запускаться автоматически (слайд-шоу), при наведении курсора мыши, при прокрутке с помощью привязок или в зависимости от текущей позиции прокрутки (непрерывно). Фигура морфинга поддерживает те же параметры стиля, что и стандартные фигуры, выходной формат всегда SVG. Вы можете выбрать любую из доступных фигур или значков, но для достижения наилучших результатов следует использовать похожие фигуры, поскольку процесс морфинга пытается сопоставить схожие точки, чтобы обеспечить плавный переход между фигурами. Не существует стандартных правил относительно того, что будет работать лучше всего, поэтому вам придется попытаться выяснить, что выглядит приемлемым. См. также Морфинг(преобразование) формы Формы-разделители Формы-разделители (Shape dividers) — это фигуры на основе SVG, которые можно использовать для разделения разделов страницы. Разделители формы доступны в слоях, сетках макета и контейнере Flex Box. Разделители можно добавлять вверху или внизу (или в обоих) слоя. Вы можете выбирать из более чем 30 фигур, но вы также можете добавлять SVG-файлы собственных фигур. Подробнее о Формах-разделителях Значки Редактор идет с большим набором значков (Icons). Для использоывания значков: На Панели вставок
(Toolbox) в разделе Drawing выберите Icon.
В меню Insert в разделе Drawing выберите Icon Новое: Библиотеки иконок (Icons Libraries)
- добавлена функция «Коллекция пользователей». ПодробнееИзображения
FontAwesome Icon
Новое в WYSIWYG Web Builder 11.Возможность добавить на страницу векторные изображения (значки) из набора, который идет с программой (вкладка Insert - Font Awesome Icon). Объект поддерживает эффект наведения курсора, фоны, события, связи, мультипликации CSS3 и намного больше.  Новая функция: реализовано новое окно выбора
значков. С категориями
(так же, как на ленте) и возможностью поиска, так что вы можете быстро
найти значок, который вы ищете.Новое: Добавлена
поддержка иконок дизайна
Google (https://material.io/icons/).
Добавлено более 900 новых иконок. Поддерживаются те же функции, как и
FontAwesome.- FontAwesome - галерея иконок FontAwesome теперь разбита по категориям, чтобы было легче найти иконки (на основе категорий на сайте FontAwesome: http://fontawesome.io/icons/). - Новая функция: добавлена поддержка вращения (то использует преобразования CSS3). - Новая функция: добавлена опция 'Publish as svg' ("опубликовать как svg"). Это выведет значок как встроенный SVG (масштабируемое векторное изображение) вместо шрифта. Это значительно уменьшает общий размер веб-сайта, если вы используете только несколько значков fontawasome. Новое: Библиотеки значков (Icon Libraries)- Улучшено: качество экспортированного SVG теперь значительно лучше. - Новая функция: добавлена поддержка 7 новых библиотек иконок: Microsoft
Fabric Icons
Значки карты (Map Icons) Значки погоды (Weather Icons) Devicon Оплата Webfont (Payment Webfont) Ico Font Captain Icon Новые функции:- добавлена возможность использовать многоцветные значки. Каждая отдельная часть значка теперь может иметь свой цвет. - добавлена опция «текстовый штрих» в стили - добавляет штрих к значку. - добавлена встроенная поддержка значков материалов 4.0.0 с более чем 800 новыми значками - добавлена поддержка круглых значков материалов, контурных значков материалов и острых значков материалов. Это варианты значков материалов. Эти надстройки доступны в разделе «Бесплатные дополнения»: - добавлена поддержка значков Bootstrap с более чем 1300 значков. Значки Bootstrap доступны как бесплатное дополнение. Подробнее Улучшено: - изображение теперь использует scrset вместо javascript для изображения сетчатки. - сценарий отложенной загрузки был заменен собственным HTML-атрибутом loading="lazy" для повышения производительности. Также относится к фотогалерее и ролловер-изображениям. - эффект тени «размытие по Гауссу» (gaussian blur) был переименован в «тень» (drop shadow), поскольку это официальное название CSS для этого эффекта. - «Тень» (drop shado) теперь использует собственные фильтры CSS вместо симулированного эффекта. Это улучшает размер, качество и производительность изображения. Также изображение остается отзывчивым, а эффект можно анимировать (через переход и анимацию). См. также Библиотеки значков
(англ. язык)
Новое для Icons
(Иконки) добавлена встроенная поддержка Font Awesome 6. И другие
улучшения. ПодробнееНовое для Favorite Icon
_ Добавлена возможность использовать файлы SVG в разделе значков
свойств страницы. ПодробнееЗначки (Badges) Добавлен объект
«Значок» (Badge)— это небольшое
изображение, текст или символ, который можно использовать для
добавления дополнительной информации к элементам веб-сайта. Например,
показывая, доступен ли продукт, рекламируя скидку, отображая достижения
пользователя или указывая, насколько популярен продукт. Значок можно
применить практически к любому объекту WWB.Объект Badge имеет 8 различных типов: стрелка, закладка, значок в стиле Bootstrap, флаг, полоса, треугольник, лента и фигура (более 200 типов фигур). Значки могут включать в себя как текст, так и значки, а также анимацию, чтобы привлечь внимание посетителя. Для вставки Значков (Badges) используйте Панель вставок (Toolbox) - раздел jQuery UI / Bootstrap - Badge. Stock Photo В интернете имеется много сайтов, содержащих библиотеки изображений - Unsplash, Pexels или Pixabay. Эти изображения можно непосредственно использовать в WYSIWYG Web Builder. Для этого используйте меню Insert (Вставка) - Stock Photo. Поддерживается поиск и возможность установки желаемого размера. Введите одно или несколько ключевых слов в поле «Поиск», чтобы отобразить пользовательский выбор. В каждом запросе будет отображаться 40 изображений. Нажмите кнопку «Еще», чтобы перейти на следующую страницу. Вы также можете ограничить размер изображения, указав ширину и высоту (свойства W и H). Если указанный размер отличается от исходного соотношения сторон, изображение будет обрезано. Это позволяет создать квадратную версию изображения (например, 250х250). Использование изображений с сайта Unsplash Сайт Unsplash содержит бесплатную библиотеку изображений. По умолчанию запросы Unsplash будут выполняться через учетную запись Unsplash WYSIWYG Web Builder. Количество запросов в час ограничено 250 для каждого пользователя. Если вам нужно более 250 запросов, вы можете указать (частный) ключ доступа (в меню Инструменты -> Параметры), чтобы приложение вместо этого использовало вашу собственную учетную запись Unsplash. Создание учетной записи Unsplash Новое для Unsplash: Просматривайте и используйте
тысячи бесплатных изображений с
сайта Unsplash непосредственно
из WYSIWYG Web Builder.Сайт Unsplash Чтобы открыть просмотр изобоажений:
Откроется окно выбора фотографий
(Select Unsplash Photo). Введите одно
или несколько ключевых слов в поле «Поиск»
для выбора. Каждый запрос будет
отображать 40 изображений, нажмите кнопку «Еще», чтобы показать
следующую страницу.
Вы также можете ограничить размер изображения, указав ширину и высоту (свойства W и H). Если указанный размер отличается от исходного соотношения сторон, изображение будет обрезано. Это позволяет создать квадратную версию изображения (например, 250x250). Подробнее см. http://www.wysiwygwebbuilder.com/unsplash.html Новая функция:
добавлена интеграция с Pexels для использования бесплатныъ фото.
Ранее WWb уже поддерживает
UnSplash и PixabayПодробнее Использование изображений с сайта Pixabay Сайт Pixabay содержит тысячи бесплатных высококачественных изображений и видео. Изображения Pixabay можно вставлять через меню Insert (Вставка) - Images - Stock Photo. Подробнее "Ленивая" загрузка (Lazy Loading) Новое - "Ленивая" загрузка -
задержка при погрузке изображений. Это ускорит погрузку страницы. Это
также предотвращает
загрузку больших изображений в мобильных устройствах.Ленивая погрузка в настоящее время доступна для:  Новое в WYSIWYG Web Builder 15.- Новая функция: переменная сайта $ LAZYLOAD_EFFECT $. Добавляет возможность установить анимацию для ленивой нагрузки - отскок, падение, исчезновение, сгиб, пульс, затяжка, масштабирование, встряхивание, скольжение и др. - Новая функция: переменная сайта $ LAZYLOAD_DURATION $. Определяет продолжительность анимации. Новое: В HTML5 элемент <Picture>
представляет
собой контейнер.Вы можете указать различные изображения для разных контрольных точек при использовании эффектов анимации при прокрутке страниц (см. Создание мультипликации). Также поддерживается высокое разрешение экрана. Вы можете включать различные варианты изображения с использованием названий для различных разрешений экрана по типу filename@1.5x.png, filename@2x.png Объект изображения поддерживает вращение с помощью стандарта CSS3-трансформаций. Также имеется экспериментальная поддержка CSS3 с применением фильтров (размытие, контрастность, яркость, тон, насыщенность, негатив, сепия, оттенки серого). Объект изображения поддерживает различные фильтры, уникальные для WYSIWYG Web Builder, изображение поддерживает только стандартные фильтры CSS. Подробнее (англ. язык) Сжатие PNG/JPEG В WYSIWYG Web Builder v 12 новая функция: добавлено сжатие PNG / JPEG для динамически генерируемых изображений (фигуры, инструменты рисования, изображения с фильтрами и т. д.). Это позволяет оптимизировать качество и производительность изображений (большие изображения выглядят лучше, но требуют больше времени для загрузки и обработки). Поддержка 10 уровней. Фотоколлаж Фотоколлаж - новый объект, появившийся в
WYSIWYG Web Builder v 12 (см. Список
объектов)Доступны более 30 вариантов компоновки с различным количеством изображений. Фотоколлаж является гибким, поэтому он может быть использован при создании сайтов для разных экранов. Кроме того, поддерживаются лайтбоксы, интеграция с Instagram, анимации загрузки и многое другое. Фотоколлаж поддерживает несколько различных анимаций, которые запускаются, когда изображения загружаются. Анимацию носит случайный характер для каждого изображения, так что изображение загружается по-разному каждый раз. Подробнее (англ. язык) Посмотреть пример фотоколлажа. См. также: Новое
в версии WYSIWYG Web
Builder 14 (Фотогалерея)
Новое в версии WYSIWYG Web Builder 15 (Фотогалерея) Новое - Фото коллаж
(Photo
Collage)- Новая функция: добавлено 6 новых анимаций: двигаться вверх, падать, летать, отражать, спираль, всплывающее окно Посмотреть пример - Новая функция: добавлена опция Customize («Настроить»). Добавлена возможность создавать собственные макеты для фотоколлажа. - Новая функция: добавлена опция Lazy Load («Ленивая загрузка»). Она реализует функциональность «onscrollreveal», поэтому анимация запускается, когда галерея прокручивается в область просмотра. Для изображений добавлена поддержка вращения.Добавлена новая функция 'Publish as SVG'. Это позволит вывести значок в качестве встроенной графики SVG (масштабируемые векторные изображения), а не как шрифт. Это значительно снижает общий размер сайта, если вы используете только несколько иконок FontAwesome. Интеграция с Instagram (для Фотогалереи и Слайдов). Добавление опрокидывания слоя, новые анимации и многие другие эффекты Эффекты для изображений при наведении курсора Примеры Добавлена возможность сжатия изображений
форматов PNG/JPEG для динамически генерируемых
изображений (формы, инструменты рисования, изображения с фильтрами и т.
д.). Поддержка 10 уровней.Новое: Улучшено - много
усовершенствований в разрешении (Точки на дюйм - DPI
improvements). Например, все встроенные изображения
/ значки / панели инструментов теперь имеют версии с высоким
разрешением для использования на экранах с высоким
разрешением.- добавлена опция "установить начальный уровень масштабирования на основе масштабирования DPI" ('Set initial zoom level based on DPI scaling' ). На некоторых компьютерах с дисплеем высокого разрешения (4k) начальное рабочее пространство может быть слишком маленьким. При включении этой опции значение DPI вашей системы будет использоваться в качестве начального уровня масштабирования. Формат SVG SVG - Scalable Vector
Graphics — масштабируемая векторная графика (См. также Википедия о SVG.).Новая функция: WYSIWYG Web Builder 14 теперь официально поддерживает SVG. Picture Picture - один из элементов, которые вы
можете использовать при создании веб-страниц для экранов разных
размеров (см. Сайты для разных
экранов)Для вставки Picture используйте один из способов:
Для точек останова (Контрольных точек) можно задать различные изображения. Он также поддерживает дисплеи высокого разрешения с использованием дескрипторов плотности пикселей, таких как 1 x, 1.5 x, 2x и 3x. Например, можно включить различные версии образа, используя следующие имена: filename@1.5x.png, filename@2x.png Объект picture поддерживает вращение с использованием стандартных преобразований CSS3. Плюс экспериментальная поддержка CSS3 фильтров (размытие, контраст, яркость, оттенок, насыщенность, негатив, сепия, оттенки серого). Новая
функция: добавлен HTML-оверлей к параметрам водяного знака. Это
добавляет текстовое наложение к изображению (вместо слияния текста с
изображением). Это обеспечивает быстрый способ добавления текста поверх
изображения в плавающих макетах. Также поддерживается только наведение,
которое отображает текст при наведении мыши.Новое: Изображения WebP (WebP Images)Новая функция: добавлена поддержка изображений WebP. Формат растровых изображений, разработанный Google для веб-графики; предназначен для уменьшения размеров файлов изображений по сравнению со стандартным сжатием JPEG. Подробнее Новая функция: добавлена интеграция с
Pixabay. Просматривайте
тысячи бесплатных высококачественных изображений и видео с Pixabay
прямо в WYSIWYG Web Builder. Сайт
Pixabay.Новые функции: добавлена возможность
устанавливать цвет фона для
текста водяного знака, добавлена опция «полная ширина» (full width)
для
горизонтального выравнивания.Подробнее Удаление фона из изображений Новое: добавлена
функция удаления фона для изображений с
помощью искусственного интеллекта.AI - см. Искусственный
интеллект.Эта функция автоматически обнаруживает человека или объект на изображении и заменяет фон прозрачным. В отличие от традиционных методов удаления фона, этот инструмент работает на 100% автоматически. Вам не нужно вручную выбирать слои фона и переднего плана, чтобы разделить их — просто нажмите «Удалить фон», и он мгновенно создаст новое изображение с удаленным фоном! Доступные расширения: Random
Image
Отображает различные изображения каждый раз, когда пользователь посещает ваш сайт. См Random Image Simple Viewer Простой просмотрщик - это отличный способ добавить профессиональный просмотрщик изображений flash на ваш веб-сайт. См. Simple Viewer Postcard Viewer Просмотрщик изображений flash, основанный на реальном расположении набора открыток, перетасованных на поверхности. См. Postcard Viewer AutoViewer (устаревший) AutoViewer-это средство просмотра изображений Flash. AutoViewer предназначен для отображения линейной последовательности изображений и надписей. См. AutoViewer Tilt Viewer (устаревший) Tilt Viewer-это настраиваемое приложение для просмотра 3D-изображений. См. Tilt Viewer CSS Ribbon (Лента CSS) Простой способ создать ленточный (CSS-стиль) заголовок для вашего сайта. См. CSS Ribbon SVG Image - Scalable Vector Graphic SVG - масштабируемая векторная графика Вставляйте изображения SVG на страницы WYSIWYG Web Builder. См. SVG Image HTML Art Расширение HTML Art преобразует изображение в HTML! См. HTML Art Film Strip Gallery Это расширение отображает изображения в виде ленты фильма. Вы можете связать каждое изображение в галерее с другим URL-адресом или создать лайтбокс. См. Film Strip Gallery CSS Sprite Image Спрайт изображения - это набор изображений, помещенных в одно изображение. Использование спрайтов уменьшит количество запросов к серверу и сэкономит пропускную способность. См. CSS Sprite Image Последнее
обновление: январь 2024 г.
|
||||||
|
|||||||
).